highlight parent page menu item when in custom post type

in a website that I am building I have a portfolio custom post types (called: "project") to show my portfolio items. The page that holds the loop of the custom post type is a custom page called "Portfolio" this page has only thumbnails and each thumbnail is linking to a custom post type: http://www.tipoos.com/new/?page_id=43

notice when inside the portfolio page above the upper menu is highlighting the current page like other pages in the site.

when entering a post type (clicking on one of the portfolio items) I would like the upper menu "portfolio" to stay highlighted as we are still in the portfolio section but it doesn't work: http://www.tipoos.com/new/?project=my-babys-beat

I understand why it doesn't work but I can't find a solution how to keep it highlighted when inside a custom post type.

would love to have a solution

Thanks Gil

Topic syntax-highlighting menus custom-post-types Wordpress

Category Web

1
answered at

For a more general approach, please use the code in the gist below. It will highlight all CPT Archives and their parents (if used in a submenu) in the navigation menu when viewing the single detail of the CPT item.

Just copy the code to your theme's or child theme's functions.php file.

And do not forget to use the "CPT Archive" type and not a "Custom Link" when adding the "page" to the Navigation Menu in WordPress Administration under "Appearance > Menus". When picking from your Portfolio CPT click on "View All" and select "All Portfolios".

https://gist.github.com/VlooMan/e9f49bea6cb3d32c054d7ea05b4845f1

1
answered at

I agree on avoiding the .menu-item-45 format.

I came up with a dynamic solution that I like so I just thought I'd add it.

Add the following style to your body class 

.menu li a[title='title you specify']

You can specify the menu item titles in the wordpress backend.

This solution allows you to not worry about changes to your menu structure in the future as long as you keep the same titles.

1
answered at

You should be able to use a body class to style your menu item :

.single-project .menu-item-45 a

In "Appearance > Menu", you could also add custom CSS classes to menu items. You could give your Portfolio menu item a class of "portfolio" and do this :

.single-project .menu .portfolio a

I do this mainly because I don't like .menu-item-[number], it's more readable with a plain text name, but the first solution should work anyway.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.