WordPress

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!

Author: nathanrice

13 thoughts on “WordPress: Active Page Tabs

  1. hrmmmm, It looks like you want to simply change the color of the link on the active page. Assuming that is what you are looking for you need to add “a” to that current_page_item definition.

    #menu ul li.current_page_item a { color: #000; }

    HTH

  2. What am I doing wrong here?

    #menu {

    text-align: left;
    height: 50px;
    width: 100%;
    background-color: #51b948;
    }
    #menu ul {
    margin: 0px;
    padding: 0px;
    text-align: left;
    font-family:’Lucida Grande’, Verdana, Arial, Sans-Serif;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    line-height: 20px;
    white-space: nowrap;
    }
    #menu li {
    list-style-type: none;
    display: inline;
    }
    #menu li a {
    text-decoration: none;
    padding: 5px 5px;
    color: #ffffff;
    }
    #menu li a:link {
    color: #ffffff:
    }
    #menu li a:hover {
    font-weight: bold;
    color: #ffffff;
    }
    #menu ul li.current_page_item{
    font-color: #000000;
    }

    My menu code is as follows:

  3. Hey man- I really appreciate your taking the time to publish this- it’s extremely clear and solves a whole pile of brain ache.

    So anyway, I don’t know if you’re in the habit of helping random commenters, but the last part, with the (is_home()) php call, doesn’t seem to be working for me- firebug shows the home li class as “”

    …So I’ve got an echo problem.

    I’m using a Page as my homepage, with its own specific page tempate file- do you think this could be causing the difficulty?

    Here’s my code:

  4. ">
    /" title="Return to the the frontpage">Home
  5. Any ideas? Don’t worry if you don’t have time.

    Thanks again!

  6. Thank you so much for writing this tutorial. I’ve had so many problems in the past trying to follow tutorials, but this one was very clean, simple, short, and explained well. THANK YOU!!!!!!!

  7. thank you thank you thank you!!!!!!
    been looking for a wordpress css menu with current or active list for more then weeks already…
    thanks a lot!!!!

  8. Holy crap, I have been searching for weeks in hopes of finding a solution to categories as tabs. Your code was just. so. simple.

    Let’s say I’m on the main tab and I click over to another one to view the posts related to that category. When I click to view an individual post, how can I get the tabs to recognize that post and display the current item?

Comments are closed.