WordPress Custom Post Types and current_page_item and current_menu_item

So you’ve set up your custom wordpress post-type pages and everythings working fine, until you realise your CSS you’ve setup for .current_page_item doesnt work on the single-[posttype].php page so your precious users dont know whether they have just moved onto a different section of the site. Of course, this is a problem, right?

 

I recently had this problem and did a quick lookup whether there was a simple way via wordpress that I hadn’t come yet seen The easiest way and most understandable way is to extended wordpress’ own idea of adding CSS hooks all other your navigation by adding a hook to the page <body>  tag. So your PHP/HTML on your single-[post-type-name-here].php change the body tag to resemble the following

 

<body class="<?php if(!$_GET['s'])echo get_post_type()?>">

 

I added the $_GET condition so that when you’re actually using the search function it wont name the body tag whatever the first result is. Once this is done your body tag will then look like

 


<body class="post-type-name">

 

Then in your CSS you will simple target your individual navigation list id

[php snippet=2]

Leave a Reply

Your email address will not be published. Required fields are marked *