Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

WordPress

Nicholas Nelson
Nicholas Nelson
23,731 Points

Nav / menu current-item-parent not avaliable

Greetings all, wondering if anyone else is running into this problem. I completed the Build a WordPress Theme project and am now well into my own WordPress theme. I made a "main menu" in the same fashion as the Treehouse project.

// Enable custom menus
add_theme_support('menus');

in the functions.php page.

<?php
    $args = array(
        'menu' => 'main-menu',
        );
    wp_nav_menu($args);
?>

in the header.

The current-menu-item selector fires just fine but when I am on my "single-work" page there is no such current-item-parent (or similar) selector fired for the main work nav item. The only answers I seem to find on parent page nav styling say that the proper selectors are simply included by the WordPress menu object?

Many thanks!

6 Answers

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher

Try removing the , after 'main-menu'

Nicholas Nelson
Nicholas Nelson
23,731 Points

Oh gosh, how lame of me to not catch that ",". Thank you, Zac! I promptly removed it, however my result is still the same. Dang.

Perhaps I'm missing something when setting up pages? The wp-portfolio project did not require saving a separate single-work page in the admin, so I followed suit. I had also toyed around with making a single-work.php template page and setting the Work page as its parent via the WP Admin. I didn't get the desired result with this either. Hmmm.

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher

Okay, one problem down, one more to go ;p

There are a number of different approaches to this now that I fully get what you're trying to do. Try a few of these top results here. It's definitely something that others have created work arounds for: https://www.google.com/search?q=active+class+for+custom+post+pages

I'm pretty sure the parent pages association won't work, although I like the clever thinking!

Nicholas Nelson
Nicholas Nelson
23,731 Points

Thank you for the help with a better search. Often times it is most important to know what questions to ask!

After wrestling with this for 5-6 hours I'm feeling like a dullard, and still not solving the problem.

In this thread -> http://wordpress.stackexchange.com/questions/3014/highlighting-wp-nav-menu-ancestor-class-w-o-children-in-nav-structure The author seems to have the same problem. However, what seems to be a popular answer, I cannot quite work out. It involves adding another menu item which I, and I assumed the author doesn't need?

I tried other suggestions without progress.

The one seemingly simple snippet I found was on the Codex http://codex.wordpress.org/Function_Reference/wp_nav_menu

Adding Conditional Classes to Menu Items

<?php
add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class($classes, $item){
     if(is_single() && $item->title == "Blog"){ //you can change the conditional from is_single() and $item->title
         $classes[] = "special-class";
     }
     return $classes;
}
?>

I changed '$item->title' to get_post_type() == 'portfolio'.

One problem is that this adds the class 'special-class' to every nav item. I don't know how to apply it to only a specific nav item.

Another thing that I don't understand is that making this an anonymous function does not work.

At any rate, I can use this 'special-class' combined with the specific 'menu-item-#' to style with. However, I'm not very pleased with the solution as it's a bit of a hack job.

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher

Okay, let's take a slightly different approach. There are some plugins that address this. Try testing one or two of theme out and see if that can help?

Did anyone find a solution to this problem? I went to the links suggested by Zac and found this recommendation for the problem. He suggests adding this to the functions.php file but it gives me an error. Any thoughts?

// Add class of current-page-ancestor to Custom Post Types function remove_parent($var) { if ($var == ‘current_page_parent’ || $var == ‘current-menu-item’ || $var == ‘current-page-ancestor’) { return false; } return true; }

function tg_add_class_to_menu($classes) { // Add custom post type name if (is_singular(‘cakes’)) { $classes = array_filter($classes, “remove_parent”);

// Need to add menu item number if (in_array(‘menu-item-56?, $classes)) $classes[] = ‘current-page-ancestor’; }

return $classes; }

if (!is_admin()) { add_filter(‘nav_menu_css_class’, ‘tg_add_class_to_menu’); }