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,

4 Answers 4


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.

enter image description here

  • I can't believe it was that simple. Thank you for the tip.
    – Massagran
    Commented Jan 20, 2012 at 18:05

The menu can easily be generated using this code,

                <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=' ); ?>

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 */

/* Style the link element */
li.current_page_item a{
  • He's using wp_nav_menu, not wp_list_pages Commented Jan 20, 2012 at 14:20
  • 1
    I understand that code. thank you for the suggestion. However I'll stick to wp_nav_menu as it's where I'm starting from.
    – Massagran
    Commented Jan 20, 2012 at 18:25

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.

  • thanks for the suggestion. it makes sense ... although it may be a complex thing to find if someone maintains the code later on.
    – Massagran
    Commented Jan 20, 2012 at 18:27

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 */
  • Hi Rob. I can't see "home" and "menu-item-47" as classes associated with "blog". Rather I only see, "menu-item menu-item-type-custom menu-item-object-custom menu-item-47". So, unless I'm missing something I don't think that CSS would target it. Sanchothefat's solution solves it though.
    – Massagran
    Commented Jan 20, 2012 at 18:10
  • The class home is a body class for the front-page (check the body element), so .home .menu-item-47 represents the menu-item-47 on the font-page. But anyway Sanchothefat's answer is indeed the right answer :-) Commented Jan 20, 2012 at 18:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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