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.

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,

share|improve this question

4 Answers 4

up vote 4 down vote accepted

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

share|improve this answer
    
I can't believe it was that simple. Thank you for the tip. –  Massagran Jan 20 '12 at 18:05

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;
}
share|improve this answer
    
He's using wp_nav_menu, not wp_list_pages –  songdogtech Jan 20 '12 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 Jan 20 '12 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.

share|improve this answer
    
thanks for the suggestion. it makes sense ... although it may be a complex thing to find if someone maintains the code later on. –  Massagran Jan 20 '12 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 */
}
share|improve this answer
    
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 Jan 20 '12 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 :-) –  Rob Vermeer Jan 20 '12 at 18:13
    
Got it. Thanks. –  Massagran Jan 23 '12 at 11:51

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.