Skip to main content Skip to secondary navigation Accessibility Feedback

How to highlight the current page in your navigation on WordPress

You may have noticed that some websites will highlight the page you’re currently on in the site navigation. This is a nice usability technique so that people always know where on a site they are.

This is actually really easy to do in WordPress using a simple trick I picked up from Chris Coyier a few years ago. Here’s the technique: We’ll assign each page and each navigation link a unique ID, and when they match, we’ll add styling.

Update: There’s actually a simpler and more elegant way to do this than what I describe here. Check out this great tutorial from Todd Motto.

Let’s look at how it works…

Create an ID for the page #

The first thing we’ll do is add a snippet of PHP to the header.php file that will create a unique ID for each page.

<?php
    $page = $_SERVER['REQUEST_URI'];
    $page = str_replace("/","",$page);
    $page = str_replace(".php","",$page);
    $page = $page ? $page : 'default'
?>

This creates a variable and assigns it a value equal to the page slug. So if the page your on is www.my-site.com/about, then the value of $page will be “about.” It assigns the home page a value of “default.”

Add an ID to your page #

Next, we need to add an ID to each page. We’ll use this snippet to do that…

id="<?php echo $page ?>"

I add this to my <header> element, but you can also add it to the <body> element instead. The ID will match the page URL.

Next, we need to add an ID to each navigation link.

For ease, I use the prefix “nav-” and match the rest of the ID to the URL. For example, the About page navigation link has an ID of id="nav-about".

Here’s what a simple navigation menu using this technique might look like…

<ul>
	<li><a id="nav-home" href="/">Home</a></li>
	<li><a id="nav-about" href="/about/">About</a></li>
	<li><a id="nav-search" href="/search/">Search</a></li>
</ul>

Add styling to your CSS #

The last step is to adding styling to the CSS file. In this example, we’ll simply underline the navigation element that matches the current page, though you can do a lot more here. Since I have a dedicated search page, I also want search results to highlight the search navigation link as well.

#default #nav-home,
#about #nav-about, 
#search #nav-search,
[id^="?s"] #nav-search { 
    text-decoration: underline; 
}

This tells browsers that if the ID “nav-home” is a sub-element of a section with the ID “default,” or “nav-about” is a sub-element of a section with the ID “about,” and so on, that it should apply an underline to the element.

Searches in WordPress generate a URL that starts with “?s.” [id^="?s"] #nav-search says that if “#nav-search” is a sub-element of a section with an ID that starts with “?s” (it can contain any text after it), then apply the styling.

You could take a similar approach for category pages, individual blog posts, and more. If you’re not sure what the ID or ID prefix is, publish your site with the page ID code, and then view source.

Combined Code #

Here’s a very simplified version of the code altogether on a single page…

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Page Title</title>

    <style>
        #default #nav-home,
        #about #nav-about, 
        #search #nav-search,
        [id^="?s"] #nav-search {  
            text-decoration: underline; 
        }
    </style>
</head>

<?php
    if (is_single()) {
        $prefix = 'page';
    }
    $page = $_SERVER['REQUEST_URI'];
    $page = str_replace("/","",$page);
    $page = str_replace(".php","",$page);
    $page = $page ? $page : 'default'
?>

<body id="<?php echo $page ?>">

    <h1>Blog Title</h1>
    <ul>
        <li><a id="nav-home" href="/">Home</a></li>
        <li><a id="nav-about" href="/about/">About</a></li>
        <li><a id="nav-search" href="/search/">Search</a></li>
    </ul>

    Page Content

</body>
</html>

Obviously in WordPress the header, footer and body content would be in their respective templates, and the CSS would be in it’s own file. But hopefully this makes it a bit easier to see how it all works.

  • More articles on...
  • Code

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get the Weekly Digest