3082 Coded Tutorials & 285 Plugins

Add a Custom Class & Style Specific WP Nav Menu Items Conditionally

Jan 2, 2014

—

I found this code on the WordPress Codex recently which i think will be useful.

The code enables you to generate custom classes for specific menu items conditionally.

This way you can use CSS code to change the appearance of each item using conditional tags.

add_filter('nav_menu_css_class' , 'conditional_nav_menu_class' , 10 , 2);
function conditional_nav_menu_class($classes, $item){
if ( is_front_page() AND $item->title == "Home") { 
             $classes[] = "home-icon";
     }
     return $classes;
}

Source https://codex.wordpress.org/Function_Reference/wp_nav_menu

Nav Menu

6 responses to “Add a Custom Class & Style Specific WP Nav Menu Items Conditionally”

Changing The Color Of Each Nav Menu Item

August 25, 2015

[…] Add a Custom Class & Style Specific WP Nav Menu Items Conditionally […]

Reply
Tweet Parade (no.2 Jan 2014) – Best Articles of Last Week | gonzoblog

January 11, 2014

[…] How To Style Specific Menu Items Conditionally – I found this code on the WordPress Codex recently which i think will be useful. The code enables you to generate custom classes for specific menu items conditionally. […]

Reply
Hea figurether Hess

January 3, 2014

thanks Brad – I think I’ll give it a break for a few days and go for a walk and come back and it will all make sense.

I am good at adding content to sites and networking but my mind can’t figure coding out very easily.

Heather

Reply
scot

January 3, 2014

Could you not repeat the code for other pages? If you know for sure the pages you will be using?

Reply
1. Brad Dalton
  
  January 3, 2014
  
  That’s right Scot.
  
  Reply
Heather Hess

January 2, 2014

thanks Brad – my mind is going crazy with all this coding – I will try and figure it out. However, I would like to get someone to help me so I can network and add content – my two main talents.

Heather

Reply