Content-aware image navigation menus in WordPress with simple CSS & PHP
Swapping menu images to match user's location
So you’ve built yourself a new WordPress blog and decided to use a fancy image-driven navigation menu, but now you’d like that menu to tell visitors where they are. By using a few of WordPress’ built-in functions along with a little CSS and PHP, we can easily make it happen.
You’ll need to have a basic understanding of CSS, HTML and maybe a little PHP to understand how it all comes together.
Overview
What we’ll be doing is reading the current page’s slug and applying this slug to the body element. We’ll then apply that slug in the CSS and style our menu accordingly. It sounds more complicated than it really is. This is actually a very simple way to do things, and is just one of many methods of achieving this result.
PHP Function
Before we can even think of moving forward, we’ll need a way to grab the current page’s slug. Why the slug? Simply because slug are free of special characters and cleanly formatted which makes CSS integration much, much easier. Simply insert the following snippet in your theme’s function.php file.
function steelfrog_bodyID() {
if ( is_page() or is_single() ) {
$post_data = get_post($post->ID, ARRAY_A);
$slug = $post_data['post_name'];
echo $slug;
}
elseif ( is_home() ) { echo "home"; }
elseif ( is_archive() ) { echo "archives"; }
else { echo ""; }
}This script does a few things: first, it checks whether you’re on a single page, on the home page or in the archives. If you’re on the home page, then it returns the value “home” and returns “archive” if you’re in the archive. If you’re on a page other than home or the archive, it grabs the page’s slug and returns it. Should it fail to identify with any of those, it simply returns a blank value.
Using the script
All we need to do now is plug our script into the body. While it can vary from one theme to the next, the <body> tag is usually located in the Header section, or included in other pages. Simply replace it with the following.
<body id="<?php steelfrog_bodyID(); ?>">Integrating the CSS
Assuming that you’re using CSS to style your menus, let’s take a look at a simple menu.
<ul>
<li class="home"><a href="#"></a></li>
<li class="about"><a href="#"></a></li>
</ul>This menu works with two CSS states: normal, or hover.
li.home a { background: url('images/home_normal.gif'); }
li.home a:hover { background: url('images/home_hover.gif; }All we need to do is add little bit of CSS to duplicate the hover state.
li.home a:hover, body#home li.home a { background: url('images/home_hover.gif; }We use body#home and then apply the same effect as a hover. This can of course be styled differently with other states, but for the sake of simplicity, that’s how I chose to do it. Repeat the same process for the pages you want to mark. You can find your page’s slug simply by viewing the page’s source and finding the body, or you can change it in WordPress.
Mike
January 9, 2012 at 5:42 PMhttp://www.steelfrog.com/content-aware-image-navigation-menus-in-wordpress-with-simple-css-php/#comment-649
I couldn’t find an answer to this anywhere else on the internet and I was “this close” to hiring a programmer to do it for me. This little trick adds the finishing touches to a WordPress site … I think it makes all the difference.
Really improves the navigation experience for the user. Thanks for posting this tip! And I also like how you’re using it on this site.
Thanks again!