Highlighting Current Page

If you use wp_list_pages to generate your nav menu, you’ll be able to use WP’s inbuilt list of classes – including a “current” class.

Thanks esmi! Yes i know that using wp_list_pages can generate the results I expect with the current highlighting.

But using image is very challenging and I have found the answer after hours and hours of trying and trying.

Below is my menu using hardcoding. Notice the the addition of conditional tags to is_page() which are is_page_template() and is_categories().

<ul id="pagenav">

<li<?php
                if (is_home())
                { echo ' class="current"'; }?>><a href="<?php bloginfo('url'); ?>/"><img src="<?php bloginfo('url'); ?>/wp-content/uploads/headquarters.png" /></a></li>

<li<?php
                if (is_page('log-book') || is_page_template('log_book_page.php') || is_category('12'))
                { echo ' class="current_logbook"'; }?>><a href="<?php bloginfo('url'); ?>/log-book/"><img src="<?php bloginfo('url'); ?>/wp-content/uploads/logbook.png" /></a></li>

<li<?php
                if (is_page('grammar-guru') || is_page_template('ask_johnny_page.php') || is_category('17'))
                { echo ' class="current_grammarguru"'; }?>><a href="<?php bloginfo('url'); ?>/grammar-guru/"><img src="<?php bloginfo('url'); ?>/wp-content/uploads/grammarguru.png" /></a></li>

<li<?php
                if (is_page('english-s-o-s') || is_page_template('english_sos_page.php') || is_category('10'))
                { echo ' class="current_englishsos"'; }?>><a href="<?php bloginfo('url'); ?>/english-s-o-s/"><img src="<?php bloginfo('url'); ?>/wp-content/uploads/englishsos.png" /></a></li>

<li<?php
                if (is_page('once-upon-a-time') || is_page_template('once_uponatime_page.php') || is_category('11'))
                { echo ' class="current_onceuponatime"'; }?>><a href="<?php bloginfo('url'); ?>/once-upon-a-time/"><img src="<?php bloginfo('url'); ?>/wp-content/uploads/onceuponatime.png" /></a></li>

<li><a target="_blank" href="https://www.britishcouncil.org/malaysia.htm"><img src="<?php bloginfo('url'); ?>/wp-content/uploads/thebritishcouncil.png" /></a></li>

</ul>

by using the || the page recognize all the conditions and will highlight the current page. Just inserting the is_page() conditional tag is not enough.

Then the challenge for me is that each menu is of different length and I could not use simply background-color to be used for all menus.

So I use PS to paint each menu the color for highlight and then save it as a different name but easy to identify like filename_c.png.

Then I used different classes for each menu so that whenever the current page pass through all conditions, then the selected page class will be used for highlighting the current page.

I hope I have not confuse anyone. Anyway below is my CSS.

.current {
background:url('https://singanista.com/demosite/wp-content/uploads/headquarters_c.png') no-repeat top left;
}
.current_logbook {
background:url('https://singanista.com/demosite/wp-content/uploads/logbook_c.png') no-repeat top left;
}
.current_grammarguru {
background:url('https://singanista.com/demosite/wp-content/uploads/grammarguru_c.png') no-repeat top left;
}
.current_englishsos {
background:url('https://singanista.com/demosite/wp-content/uploads/englishsos_c.png') no-repeat top left;
}
.current_onceuponatime {
background:url('https://singanista.com/demosite/wp-content/uploads/onceuponatime_c.png') no-repeat top left;
}

Phew! Job done! Time for me to zzz…

This has been very helpful. I used a single “current” class; here’s my CSS:

#pagenav a:hover, #pagenav li.current a, #pagenav li:hover li.current a {
	opacity:1;
	filter:alpha(opacity=100);
	/**	or whatever attributes you want for the hovered, current and current hovered links **/
}

I am too using images (with text), but I added extra classes to links:
<a class="image_01" href="/link" title="link title">link name</a> and specified in the CSS which image to use.

The challenge i’m facing is making the is_category('') function to work…