0

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

3 Answers 3

1

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.

2
  • Hi Tried to add the first one and it didn't work. the second option didn't work too since it's using the same method just with plain text. any suggestion? thanks!
    – gil hamer
    Commented Sep 19, 2012 at 8:25
  • From what I see in the source, you added nav ul li .single-project .menu-item-45 a instead of .single-project .menu-item-45 a
    – mike23
    Commented Sep 19, 2012 at 8:35
0

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
  • This will fail with translations, or you have to add a separate selector for each language.
    – fuxia
    Commented Sep 23, 2013 at 13:07
0

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

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.