I’m pretty decent at web design, but up until today, I didn’t really know how to do current page highlighting in the correct manner. I was using an extremely convoluted method that used a buttload of PHP if() and elseif() tags. Today I finally learned how to use WordPress’s built in functionality to achieve the same effect with a lot less work.
I know a few people that have seen this page are learning CSS, as they’ve found this site on the CSS-Tricks website, where I frequent the message boards. Therefore, I present to you this WordPress/CSS/PHP tutorial.
Click the “Read More” link to check it out!
For the purposes of this tutorial (and also because I’m not too experienced at writing tutorials), I’m going to assume a working knowledge of CSS. Some PHP knowledge will help, but for this tutorial I think I’ve got you covered. If you don’t know CSS, W3schools has a section devoted to teaching it. If you’re trying to build a WordPress theme from scratch, there’s a good tutorial e-book that you can download at the bottom of this link. We’re going to jump right in with displaying the links.
To display the page links, you need this code:
<ul> <?php wp_list_pages(); ?> </ul>
That will display your links in an unordered list. When you view the source, you’ll see that the list elements have classes of “page_item page-item-#”. The current page you’re viewing will have an additional class of “current_page_item”. That’s what we’re going to use in our style.css file to create the current page highlighting.
In your CSS file, the following will cause your page links to be white with over and underlines when hovered (just like the links on this site), and will cause them to be yellow when you’re currently viewing that page.
/* non-current page links */
.page_item a {
color: #ffffff;
text-decoration: none;
}
.page_item a:hover, .page_item a:active {
text-decoration: overline underline;
/* current page links */
.current_page_item a {
color: #fff000;
text-decoration: none;
}
.current_page_item a:hover, .current_page_item a:active {
text-decoration: overline underline;
}
In your page_item element, you can define the style and look of your links as you see fit, but we’re not going to get into that right now.
I know what you’re thinking though - “but JoE, that’s all well and good for my page links, but what if I want a home link in the same navigation section?”
Fine. I’m going to show you some PHP code here, which will allow you to add a “home” link that works with the link styling shown above - just like on my site!
You’ll recall that when we put the tag to get the links, we enclosed it in some <ul> tags. To illustrate this properly, I will show those tags again in the following example. Here goes:
<ul>
<? if(is_home()) { ?><li class="page_item current_page_item"><a href="<? bloginfo('url'); ?>">Home</a></li>
<? } else { ?><li class="page_item"><a href="<? bloginfo('url'); ?>">Home</a></li><? } ?>
<?php wp_list_pages('title_li= '); ?>
</ul>
So what in the hell is going on here? We start our unordered list in line one. In line two, we use the PHP if() call to find out if we’re on the homepage, using WordPress’ is_home() function as our argument. On this line, if it’s true that you’re looking at the home page, we’re going to give our list element a class of “page_item current_page_item.” That will trigger the “.current_page_item a” element from our stylesheet, rendering the “Home” link yellow, setting it apart from the other links. On line three, we use the “else” statement to say say that the case in line two isn’t true. This will only give our list element a class of “page_item,” leaving it to render in the same manner as the other site links other than the current page. At the end of the line, we use “}” to close the PHP “else” statement. On line four, we continue as normal with our list of pages - though we’ve added in “title= ‘” into that statement, which gets rid of the “PAGES” title. You can put that above your home link by using <li>PAGES</li>.
Hope this helps!
