WordPress: Active Page Tabs

If you browse the WordPress Theme Viewer, take notice of where most designers place their page links. Most designers put them in a horizontal menu either directly above or below their header image. What you might also notice is that many designers treat the links like tabs with a link hover effect. Sometimes, that link style (something that sets the tab apart on hover) will be shared with an active page style. In other words, a tab will look different than the other tabs when it is either being hovered over by the mouse, or if the tab represents a page that is currently active.

Thankfully, the good folks at WordPress decided to add a great little feature to the wp_list_pages function. When a page is active, the list item that represents that page gets a class added to it called “current_page_item”. This is in addition to the “page_item” class that is on all page list elements (elements can have multiple classes). So now that we know that this new class is automatically added to active list items, we can take advantage of that and style that element based on the class, to demonstrate that the page tab is active.

As always, I’m assuming you know basic web coding, and this isn’t a tutorial on how to make tabs in CSS. If you need help with that, check out Listamatic.

The WordPress Template Code

So, let’s assume you’ve got the menu marked up like so:

<div id="menu">
<ul>
<li><a href="<?php echo get_settings(‘home’); ?>">Home</a></li>
<?php wp_list_pages(‘title_li=&depth=1’); ?>
</ul>
</div>

Yes, I’ll explain this 🙂

The first <li> is a link back to the home page of our blog. It’s dynamically generated based on our WordPress Settings. Pretty cool. Next comes our page list function. As you can see, I’ve opted to not display a header (because this is a horizontal menu), and only display top-level pages (depth). You can take a look at all the different options here.

The HTML Output

Now, the html output of that code will look a little something like this:

<div id="menu">
<ul>
<li><a href="http://example.com/">Home</a></li>
<li class="page_item"><a href="http://example.com/page-1/" title="Page 1">Page 1</a></li>
<li class="page_item"><a href="http://example.com/page-2/" title="Page 2">Page 2</a></li>
</ul>
</div>

You may have noticed the class added to each of the list items that were given to us by the wp_list_pages function. Really, this doesn’t matter all that much, because we can control the look fairly easily without it.

But, when you are on one of those pages (when the page is active), the output looks like this:

<div id="menu">
<ul>
<li><a href="http://example.com/">Home</a></li>
<li class="page_item current_page_item"><a href="http://example.com/page-1/" title="Page 1">Page 1</a></li>
<li class="page_item"><a href="http://example.com/page-2/" title="Page 2">Page 2</a></li>
</ul>
</div>

Notice the addition of the “current_page_item” class that got added to the Page 1 list item. What this means is we can actually add a new class in our CSS file and style it:

#menu ul li.current_page_item {
style goes here
}

Add whatever style you’d like to that class, and make it stand out as an active tab.

Oops! A problem!

As some of you may have noticed, because we hard coded the <li> element of the link to the homepage, there’s no way for it to add the class dynamically based on whether or not the homepage is active. So, let’s put in a little PHP to fix it:

<div id="menu">
<ul>
<li class="<?php if (is_home()) { echo "current_page_item"; } ?>"><a href="<?php echo get_settings(‘home’); ?>">Home</a></li>
<?php wp_list_pages(‘title_li=&depth=1’); ?>
</ul>
</div>

We use the is_home() conditional tag to determine if we were on the homepage. If we are, then it echoes “current_page_item”. A simple workaround, but it works like a charm.

Definitely take a look at this and use it to learn a bit more about how to take the built in WordPress functionality and use it to your benefit by making really cool, feature-rich themes.

Have an idea for a future post? Want to know something about WordPress that you can’t quite figure out? Leave a comment below and let me know. Your question may be the subject of a future WordPress tutorial right here on Performancing!