When it comes to WordPress navigation, I like to include some styling that signifies when a user is on that specific page. Indicating to a user the current page they’re on is a small thing, but it adds to the overall usability of the site.
My normal routine is to style the navigation menu to display the current page in the same way that the navigation hover appears. The only thing I have to make the navigation menu do in order to accomplish this is to include a feature that indicates that the current page is being displayed.
This is easy enough with the built-in wp_nav_menu function included in the current version of WordPress. If your theme uses this feature, a class of “current-menu-item” is added to the nav item in your menu bar if you are currently located on that page. Then it’s a simple process of using CSS to style it accordingly.
But there are many times when you may have to code a custom navigation system that doesn’t automatically include this feature. How do you do it then?
Not too long ago I was working on The Wind Works Project and I needed to create a custom navigation menu in the sidebar. I chose to manually write the code out instead of creating a function for it.
I coded an unordered list in HTML and styled it how I needed to with CSS. Simple enough, but now I needed to add the capability to highlight the current page if the visitor was on that page.
To get WordPress to add a class or id of “current” to the currently displayed nav item, I modified the list items in the navigation menu as follows:
<div id="navmenu">
<ul>
<li<?php if (is_front_page()){ echo " id="current"";} ?> class="home"><span class="slant">Home Page</span><br /><a href="<?php bloginfo('url'); ?>">The Wind Works Project</a></li>
<li<?php if (is_page('about')){ echo " id="current"";} ?>><span class="slant">Wind Works Project</span><br /><a href="<?php bloginfo('url'); ?>/about/">About Us</a></li>
<li<?php if (is_page('13')){ echo " id="current"";} ?>><span class="slant">Understanding</span><br /><a href="http://thewindworksproject.com/understanding-wind-energy/">Wind Energy</a></li>
<li<?php if (is_page('5')){ echo " id="current"";} ?>><span class="slant">Taking Action</span><br /><a href="http://thewindworksproject.com/best-energy-saving-ideas/">Best Energy-Saving Ideas</a></li>
<li<?php if (is_page('11')){ echo " id="current"";} ?>><span class="slant">Did you know... ?</span><br /><a href="http://thewindworksproject.com/important-wind-facts/">Important Wind Facts</a></li>
<li<?php if (is_home()){ echo " id="current"";} ?>><span class="slant">Wind Works</span><br /><a href="http://thewindworksproject.com/blog/">Project Blog</a></li>
<li<?php if (is_page('9')){ echo " id="current"";} ?>><span class="slant">How You Can</span><br /><a href="http://thewindworksproject.com/donate-to-the-wind-works-project/">Donate Today</a></li>
</ul>
</div>
Note: The current navigation code on the site has been changed slightly than what I’m showing here, but the necessary code is still the same.
That short bit of PHP code inserted into the <li> tag is what allowed me to style the current page item in the navigation menu to my liking. You can see it in action below:
The next time you are tinkering with a navigation menu in WordPress, think about adding a current state to the navbar if it doesn’t already exist. It’s the little things like this that add an extra oomph to your overall usability.
No related posts.