Part 2: Filling Your Tabs With Dynamic WordPress Content
Your jQuery tabs are nice and all, but now we want to fill them with post content.
Our approach will be as follows:
- Create a new WP query for posts in a specific category (say “campus”).
- Loop through the jQuery tab navigation and content.
- Place post content in jQuery tabs.
Creating a new WP query is pretty simple. We’ll want to call wp_reset_query() just in case and then assign $displayposts to our new query. Make sure to include the category name (or ID or Slug) in your query so that it gets posts from the specific category.
[cc lang=”php-html”]
wp_reset_query();
$displayposts = new WP_Query(); $displayposts->query(‘category_name=campus’);
[/cc]
Before we create a new loop for the post content, to be truly dynamic we need to count the number of posts in the queried category. You will probably know how many tabs/posts you need (in this example we’ll use three), but being principled developers, we want to make our tabs TRULY dynamic, which means the number could change based on the number of posts in your queried category.
Don’t worry though. Assigning that number to a variable is quite easy.
[cc lang=”php”]
while ($displayposts->have_posts()) : $displayposts->the_post();
$tab_number = $displayposts->current_post + 1;
[/cc]
The current_post property of a WordPress query is a little-known but useful one which displays the current index of a post in our query. We need this because we have several incrementally numbered element IDs in our loop. I’ve added one because in our HTML and jQuery our tabs will be numbered 1-3 not 0-2.
Let’s add some post content to our tabs. We’ll need to echo the $tab_number variable inside each link to make sure the link activates the corresponding tab content.
[cc lang=”php”]
sandy boone says
I am new to jquery and don’t know hwere to put that code into my html page – does it go in the header, footer, or page code? Does it go above, below the tab div?
Does this code still work if someone has turned off javascript?
Last question for this NOOB
* When I call the
Here is what I have in the header.php just before closing the head:
$fb = jQuery.noConflict();
$fb(document).ready(function() {
//When page loads…
$fb(“.tab-content”).hide(); //Hide all content
$fb(“ul.tabs li:first”).addClass(“active”).show(); //Activate first tab
$fb(“.tab-content:first”).show(); //Show first tab content
//On Click Event
$fb(“ul.tabs li”).click(function() {
$fb(“ul.tabs li”).removeClass(“active”); //Remove any “active” class
$fb(this).addClass(“selected”); //Add “selected” class to selected tab
$fb(“.tab-content”).hide(); //Hide all tab content
var activeTab = $fb(this).find(“a”).attr(“href”); //Find the href attribute value to identify the active tab + content
$fb(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
Brian Notess says
Those are good questions.
With this example, you don’t actually need to include the jQuery code in your html. All you have to do is.
1. Make sure you load jQuery in your header.php file
or whatever version you want.
2. in the same way load your own script containing the jQuery from this example.
(or whatever you call it)
the code will run “on load” which means as soon as your page loads your script should start running.
It will not work if JS is turned off on a users browser.
Hope that helps.
sandy boone says
Thanks Brian! I’ll try i tout.
Derek says
Any thoughts on how you can link directly to a tab?
Samia says
Nice post. I am tying to do the same thing, only with custom fields. so far, I can’t escape going to the editor to add the name of the field, so that it fetches the correct tab/field. any idea how I can make it dynamic?