Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

How do I add the active class to the current link that the user is viewing? I have a mixture of pages and custom post types in my main nav menu and I know that wordpress has .current_page_item that can be used but when I tried that nothing happened. I'm slightly confused about how to implement it. Currently the menus for the site are being pulled in using:

<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>

AND:

<?php wp_nav_menu( array('menu' => 'Mobile Menu' )); ?> - for mobile state.

share|improve this question
    
hi may b u should take a look at this might be wat ur looking for...wordpress.org/support/topic/… –  codebreaker Oct 11 '13 at 11:12
    
thanks that worked for pages but when I click on the custom post types in the nav menu it doesnt work. –  Neelam Khan Oct 11 '13 at 11:26
    
hi check this post ur done i believe..if not reply back..wordpress.stackexchange.com/questions/6333/… –  codebreaker Oct 11 '13 at 11:30
add comment

1 Answer

Edit

Two things:

  1. wp_nav_menu() also outputs .current_page_item, as backward compatibility with wp_page_menu().
  2. Among the list item CSS classes added by wp_nav_menu(), for a custom post type, list items will have a CSS class .list-type-object-{slug}, where {slug} is the CPT slug. So, you could target: .list-type-object-{slug}.current-list-item

Original Answer

The key is in the class name: .current_page_item. That class is added by wp_page_menu(), whereas wp_nav_menu() adds .current-list-item.

What that means is that wp_nav_menu() is outputting its fallback menu, and not a user-created custom nav menu.

Ensure:

  1. Custom nav menu Theme Location is registered via register_nav_menu() or register_nav_menus()
  2. Call to wp_nav_menu() includes the theme_location parameter *and not the menu parameter, and that thetheme_locationpassed towp_nav_menu()matches the one defined inregister_nav_menu()/register_nav_menus()`
  3. At least one custom nav menu is defined via Appearance -> Menus
  4. A defined custom nav menu is assigned to the Theme Location that corresponds to theme_location passed to wp_nav_menu().

For example:

  1. Register

    function wpse117502_theme_setup() {
        register_nav_menus( array(
            'primary' => 'Primary'
        ) );
    }
    add_action( 'after_setup_theme', 'wpse117502_theme_setup' );
    
  2. Call

    wp_nav_menu( array(
        'theme_location' => 'primary'
    ) );
    
  3. Define

    User creates a menu, e.g. "Main Menu"

  4. Assign

    User assigns "Main Menu" to "Primary" Theme Location

share|improve this answer
    
Thanks @chip Ive realised that for the page items in my navigation the class being applied by wordpress is: li.current-menu-item and so I can style those ones as I please, however for the custom post types I cant figure out which class wordpress is assigning which is making it difficult to style them. –  Neelam Khan Oct 11 '13 at 13:36
    
Did you check the linked Codex references for wp_nav_menu() list item classes? (See edited answer.) –  Chip Bennett Oct 11 '13 at 13:45
    
I have read through the codex but everything I try for the custom post types isnt working. The custom post types are in the main nav and then they are sub-nav items. I have viewed the source code and found that wordpress is assigning the following class to the current post type page: menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-133 current_page_item menu-item-137 –  Neelam Khan Oct 11 '13 at 13:50
    
Nope; you're on a static page: menu-item-object-page. Can you post a live link? –  Chip Bennett Oct 11 '13 at 13:54
    
purpleclaw.org.uk/lulu - Link to the site –  Neelam Khan Oct 11 '13 at 13:55
show 3 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.