Let's start by going into the client's theme and setting a loop that pulls only from the Our Structure category. Then, using jQuery UI we'll display those posts in a set of tabs that is viewable mostly "above the fold" ensuring site visitors get an overview of the organization's most important information up front and general post items will flow below.
First up, in the index.php page, we'll create a new loop, above the existing loop. php include that only displays the Our Structure category. Before we do this though, we'll head over to the jQuery UI site and take a look at the demo of how tabs are set up:http://jqueryui.com/demos/tabs/.
Essentially we see that demo tabs have a ul that lists the titles, wrapped in href calls to id anchors that point to the content's div. This means our theme actually will require two custom WordPress loops to accommodate this widget.
We'll set them up in our index.php template file, right above our main content loop.php include, inside the #content div in the theme we're using, which is the default theme. The first loop will set up our custom #ourStructure div with the ul list of titles:
<div id="ourStructure"> <ul>
<?php//start custom loop
//get posts in the proper category
$postList = get_posts('category=4'); foreach($postList as $post):
//set up a list item with a unique anchor link
<a href="#post-<?php the_ID(); ?>"> <?php the_title(); ?></a> </li>
<!--//second loop goes here-- > </div><!--//end of ourStructure-->
Next, under the previous loop, but still inside the #ourStructure div, we'll run the loop one more time, focusing now on the post's titles and content as follows:
//again, call correct category $postContent = get_posts('category=4'); foreach($postContent as $post):
//assign a unique ID to div <div id="post-<?php the_ID(); ?>"> <h2><?php the_title(); ?></h2> //add content:
<?php the_content('Read the rest of this entry »'); ?>
This gives us a result that looks like the next screenshot. While not super pretty, it's functional, and it certainly gets that important info up there and allows the user to link down to the id instance's anchor name.
We'll then enhance that markup with jQuery's UI tabs like so, by targeting the #ourStructure div, in our custom.js file we set up the following jQuery statement:
Yes. Hard to believe, but thanks to the flexibility of WordPress and the work we got the theme to do for us, that's all the jQuery we need!
Not bad! The content is now contained up top using the jQuery UI theme we chose, called "Smoothness" to compliment our WordPress theme best (again, we're using the default WordPress theme that comes with 3.0 as of the writing of this book). Let's look at some other uses for the UI plugin.
Was this article helpful?