When at / ( or "home") my menu doesn't get a current-menu-item class

Question

I'm a wordpress noob tweaking a theme, so I'm trying to understand how it works. I've read about 10 related posts in SE but don't get it yet. My problem is as follows:

header.php seems to generate the menu with,

<?php wp_nav_menu(array('theme_location' => 'nav-menu','container'  => 'div', 'container_class' => 'menu' )); ?> 

In the wp-admin, I've created a menu with

"Blog | About | Contact"

which point to the root and two pages: "/" | "about" | "contact" (very standard). Now, I'd like to style the menu depending on the "active" page. For "about" and "contact" this seems very easy. The classes generated for each menu item include current-menu-item. However, when on the home page my "blog" menu "li" only gets the classes

menu-item menu-item-type-custom menu-item-object-custom menu-item-47

and so cannot be styled accordingly. I've read some stuff about filtering, using functions, etc ... but don't quite understand it. If I define a function in functions.php, where would I use it afterwards.

Any insight and help is greatly appreciated,

Answer 1

To get this to work you need to go to the menu admin and on the pages section click the tab that says 'view all'. At the top of the list is a special option for your home page, whether it's the normal blog view or a specific page. Add that to the menu and you're good.

Answer 2

The menu can easily be generated using this code,

<ul>
                <li <?php if(is_home()) { ?> class="active" <?php } ?>><a href="<?php echo get_option('home'); ?>/">Home</a></li>
                <?php wp_list_pages('depth=1&sort_column=menu_order&title_li=' ); ?>
            </ul>

The function used to create a list of published pages, wp_list_pages(), automatically add a class current_page_item to the list item corresponding to the page you're viewing.

You just have to add the .current_page_item class to your style.css file:

/* Style the list element */
li.current_page_item{
background:#eee;
color:#777;
}

/* Style the link element */
li.current_page_item a{
text-decoration:underline;
}

Answer 3

It's not very pretty (and could be improved by dynamically picking up the menu item ID with php) but you can do this:

     <?php if (is_front_page()) echo
       '<style type="text/css" title="text/css">.menu-item-14 a
         {your current_page_item style here}</style>'
    ;?>

Change the .menu_item-14 to the class of the current home page and change the current_menu_item to your CSS, too.

Place that statement right after the

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

in header.php so the CSS gets loaded after the main style sheet.

Answer 4

Strange that wordpress doesn't pick that page up as current page. But a easy solution is this (CSS only).

In your style.css

.home .menu-item-47 {
   /* current-menu-item styles */
}