Implementing tab content using jQuery and WP_Query

Wordpress provides a wealth of information about your blog and its content. Displaying a large amount of this information may take up space. A great solution is tabbed content!

In this tutorial we will take the WordPress newspaper layout we used earlier and extend it with tabs.

Preface

right! We'll be using a nice and powerful combination of jQuery animations and the .bind function, perfectly blended with Wordpress's versatile WP_Query() and Wordpress' unique conditional tags. If you're like me, you like to see the finished product before you do anything:

If you would like to only follow this tutorial, this tutorial requires the latest version of jQuery. Download it here. Otherwise, it should already be included in my prepared theme, which you can download here: myTheme.

We assume you already have a live WordPress installation, either local or hosted. There’s a tutorial on running Wordpress natively on Windows here and a tutorial on OS X here . Activating the theme I prepared earlier - myTheme - will help a lot. We're going to expand on this, so open index.php and start editing!

Step 1 - New structural HTML.

Obviously, we need some new HTML. this is very simple. We just need some extra divs to wrap everything we're using. Place the following code only above

:

<div id="container">
	<div id="header">
		<h1>iBlog - Wordpress and jQuery together in <em>Harmony.</em></h1>
	</div>
		

and we need to add the last

The above is the detailed content of Implementing tab content using jQuery and WP_Query. For more information, please follow other related articles on the PHP Chinese website!