I recently added the “highlighting” feature to my menu because  it ’s really good for usability and helps the user understand where they are on your website.

I’m still learning WordPress but I think I have this menu highlighting sorted.

(I’m also going to assume that you have a css menu and you only need the php to make the menu work.)

First of all I had my menu fully coded and had my “current” css id affecting the li tag only I had some trouble with this at the beginning.

Now I opened up the WordPress codex , had a little read at that and realized I had to go with step 2.

The WordPress Menu Code.

if (is_home()){ echo ” id=\”current\””;}?>>Page One

Now the above line of code checks to see of the page your on is the home page, if so then it simply writes id=”current”.

Neat eh?

The Variables for the WordPress Menu Code.

Also there are other variables for “is_home” such as: -

• is_front_page – Highlights what ever page you set as your front page in the “settings>reading” section.
• is_home – Highlights the blog’s “home page” (I suggest using this on the menu item that links to all your websites post or what ever is your static front page.)
• is_page – Highlights any buttons using a page template.

There is also an option for “is_page” to apply the “current” id depending on the ‘page slug’ this is done by the following code: -

if ( is_page(’about’) ) { echo ‘ id=”current”‘; } ?>>About

The code above checks to see if the slug is “about” and if so it prints id=”current”.

A few points to remember and how to avoid errors.

I must make you aware however if your custom front page is using “home.php” it will highlight that page and your blog page.

To get round this you must have a custom static page and define your posts page in the “settings>reading” section.

Menu highlights are a great usability feature to basically give the user information on what page they are actually viewing so there should be nothing stopping you implementing this feature to your own website/wordpress blog.

I hope this helps you out when you’re creating your own menu!

Bryan

Related posts:

• Welcome To Sindustries 4.0
• 10 WordPress Usability Features Your Blog Needs
• Sindustries V5