Posted In Tutorials

Dynamic Highlighting Navigation in ExpressionEngine and WordPress

Usability should be a main priority when developing a website. How quickly a user can move from page to page to find what they’re looking for, can be the difference between a user staying on your website, or leaving for another. One item that can be helpful is to have your website navigation auto highlight the page link that a user is currently on.

For example, the image above shows a screenshot from our project for Hess Landscape Architects when you’re on one of the project pages. The ‘Projects’ menu text is green for the page that the user is on, and when a user hovers to visit a different page, they get a green line below the page link for the hover state.

This tutorial is a twofer as we’re going to discuss how to use this technique in 2 different CMS’s. At J Taylor Design, we proudly use both ExpressionEngine and WordPress content management systems for our clients. Which system is used is decided on a per-project basis depending on the goals and needs of the project. Either way, we start with a basic HTML navigation structure:

    <li class="current"><a href="./">Home</a></li>
    <li><a href="blog">Blog</a></li>
    <li><a href="contact">Contact</a></li>

The class=“current” calls in the style that we want for the page that we’re currently on.

Auto Highlighting Your Navigation In WordPress

In WordPress, we can accomplish an auto highlighting menu by referencing the permalink structure and using an ‘if’ statement. The HTML above assumes that we’re using a ‘pretty’ URL structure like the following which can be set in WordPress under Settings » Permalinks:


The ‘if’ statement we’re going to use is this:

<?php if ( is_page('blog') ) { echo ' class="current"'; } ?>

What this statement is saying is that if the page permalink is ‘blog’ then echo (or output) the following code, which we have specified as ’ class=“current”’ So we would take our HTML nav code from above and change it to the following:

    <li<?php if ( is_page('home') ) { echo ' class="current"'; } ?>><a href="./">Home</a></li>
    <li<?php if ( is_page('blog') ) { echo ' class="current"'; } ?>><a href="blog">Blog</a></li>
    <li<?php if ( is_page('contact') ) { echo ' class="current"'; } ?>><a href="contact">Contact</a></li>

You should notice that the is_page(’‘) value is exactly the same as the href value. So when a user is on the c,lass=“current” is output for that menu button and the other code is ignored as we aren’t on those pages.

Auto Highlighting Your Navigation In ExpressionEngine

To create an auto highlighting navigation in ExpressionEngine, the method is similar to WordPress, but actually offers a little more flexibility. The ‘if’ statement we use for ExpressionEngine is the following:

{if "{segment_1}" == "blog"} class="current"{/if}

What this is saying is that if segment_1 in our URL is ‘blog’ then echo the class=“current” code. The cool part about this code is the ‘segment.’ A segment is a part of the URL string. For example, the URL may be for a blog article. In this URL string, we have 3 segments after which are ‘blog’ ‘single’ and ‘this-is-our-article.’ We may want to have the blog button on the navigation always highlighted when we’re on an individual blog article page. With the code above, as long as segment_1 is ‘blog’ then that nav item will stay highlighted.

So to wrap up the EE version, we get the following:

    <li{if "{segment_1}" == "home"} class="current"{/if}><a href="./">Home</a></li>
    <li{if "{segment_1}" == "blog"} class="current"{/if}><a href="blog">Blog</a></li>
    <li{if "{segment_1}" == "contact"} class="current"{/if}><a href="contact">Contact</a></li>


Spread The Word