we ran into a problem when putting together the new website for our Saskatoon based company… aka the one you are currently on. The problem was that we had new custom post types that we created and they weren’t being associated with a parent menu item when viewing those pages.
What Was Happening
we have regular pages created called Services and Portfolio. For each of these, there is a custom post type by the same name. What we wanted to happen was when we’re viewing any of the portfolio items (custom post type of portfolio), was for the Portfolio menu item to be marked as active or current. We also wanted this same thing to happen for Services but with the custom post type called services.
What Needs To Be Done?
There’s not a whole lot involved to get this done.
First, open up the function.php file within your theme. If there isn’t one, you will have to create it. It should be located right a the base of your theme. The same place you find header.php, index.php, etc.
For this to work for you, you will have to replace the lowercase portfolio with the custom post type you have created. Then, you will have to replace the proper case Portfolio with the menu item you want to associate this post type with. You can add as many elseif statements as you need. One for each of the custom post types.
Also note, the css in our stylesheet that styled the current menu item is called current-menu-item.
For some reason our blog posts weren’t being associated with the Blog menu item as well so we added the last elseif to cover that as well. Post type of post is now associated with the Blog menu item.
We are a proud supporter of FreshBooks Cloud Accounting. We invite you to give it a try! If you click their logo below you can start the free trial using our invite. From there, if you end up joining and upgrading to a paid plan, both of us get a free month out of the deal!
Associate Custom WordPress Post Types With Menu Items
we ran into a problem when putting together the new website for our Saskatoon based company… aka the one you are currently on. The problem was that we had new custom post types that we created and they weren’t being associated with a parent menu item when viewing those pages.
What Was Happening
we have regular pages created called Services and Portfolio. For each of these, there is a custom post type by the same name. What we wanted to happen was when we’re viewing any of the portfolio items (custom post type of portfolio), was for the Portfolio menu item to be marked as active or current. We also wanted this same thing to happen for Services but with the custom post type called services.
What Needs To Be Done?
There’s not a whole lot involved to get this done.
First, open up the function.php file within your theme. If there isn’t one, you will have to create it. It should be located right a the base of your theme. The same place you find header.php, index.php, etc.
Next, enter the following code:
if ( get_post_type() == ‘portfolio’ && $item->title == ‘Portfolio’ ) {
$classes[] = ‘current-menu-item’;
}
elseif ( get_post_type() == ‘services’ && $item->title == ‘Services’ ) {
$classes[] = ‘current-menu-item’;
}
elseif ( get_post_type() == ‘post’ && $item->title == ‘Blog’ ) {
$classes[] = ‘current-menu-item’;
}
return $classes;
}
add_filter( ‘nav_menu_css_class’, ‘custom_nav_class’, 10, 2 );
For this to work for you, you will have to replace the lowercase portfolio with the custom post type you have created. Then, you will have to replace the proper case Portfolio with the menu item you want to associate this post type with. You can add as many elseif statements as you need. One for each of the custom post types.
Also note, the css in our stylesheet that styled the current menu item is called current-menu-item.
For some reason our blog posts weren’t being associated with the Blog menu item as well so we added the last elseif to cover that as well. Post type of post is now associated with the Blog menu item.
For more information on nav_menu_css_class being used, take a look at the following link: http://codex.wordpress.org/Plugin_API/Filter_Reference/nav_menu_css_class.
Facebook
Advertisement
Recent Posts
Freshbooks
We are a proud supporter of FreshBooks Cloud Accounting. We invite you to give it a try! If you click their logo below you can start the free trial using our invite. From there, if you end up joining and upgrading to a paid plan, both of us get a free month out of the deal!