WordPress.org

Ready to get started?Download WordPress

Forums

Missing current_page_parent css class for custom post types (17 posts)

  1. rofflox
    Member
    Posted 4 years ago #

    Hi folks

    I've searched the wordpress trac for this issue, but I find only related posts to the new wp_nav menu feature.

    I'm currently working on a plugin to manage my portfolio with a custom post type, taxonomies for elements and so on. I love the new features, and it works pretty well.

    But one thing doesn't seem to work properly or I'm to much brain afk at the moment to find the solution. Same old story as for regular posts in version <2.9 I think.

    I've created a custom post type "portfolio". In a separate page-template "portfolio.php", I return all elements with a link to a single-portfolio.php template. The redirection is made with the following function in my plugin file.

    function template_redirect() {
    		global $wp;
    
    		if (in_array('post_type', $wp->query_vars) && $wp->query_vars['post_type'] == "portfolio") {
    			include(TEMPLATEPATH . "/single-portfolio.php");
    			die();
    		}
    	}

    The redirection works, but the css class "current_page_parent" isn't applied to the Portfolio Menu button, when I'm browsing the single-portfolio.php page.

    Is there a way to define a parent page for a custom post type? Or in other words: How can I tell wordpress that the single-portfolio template is a child of portfolio.php? How does this work for the default post type "post"?

    PS: And sorry for my bad english, I'm swiss.

    - rofflox

  2. Christine
    Member
    Posted 4 years ago #

    Under Function Reference/register post type
    there is mention of a parameter
    hierarchical
    (boolean) (optional) Whether the post type is hierarchical. Allows Parent to be specified.
    Default: false

    Might this be the root of your problem? (I'm fairly new at this but I know I've been iritated before when I didn't realize a parameter was defaulting to something I didn't want.)

  3. rofflox
    Member
    Posted 4 years ago #

    Hi Christine

    Thanks for the hint.

    I've played around with this setting, without any change. Maybe I'm doing it the wrong way. The css selector "current_page_parent" is still applied to the default blog site "Blog".

  4. pasiphilo
    Member
    Posted 4 years ago #

    Hi rofflox. Did you manage to find a solution to this problem? I've been struggling with the exact same scenario myself and have not found any solution yet. This post is dealing with the same issue.

  5. lsparks
    Member
    Posted 3 years ago #

    I'm having the same problem as well, and have spent quite a while searching for a solution with no luck. Having no way to define a parent of a custom post type really limits their usefulness.

  6. Brig01
    Member
    Posted 3 years ago #

    I have the same problem. This issue seems to be in the trac but its status is set to fixed. http://core.trac.wordpress.org/ticket/13543

    I've been trying to find out more about this issue but can't get anywhere.

    The only workaround I've found so far is to add children to the custom post type as subpages in the custom menu. The css class current-menu-ancestor is then added to the custom post type item in the menu.

    It's not very practical though and isn't always suitable.

    Any help on this from the developers would be great.

  7. paolo.valier
    Member
    Posted 3 years ago #

    Hi Brig01
    Your solution works but the button "blog" in the menu still have the css class "current_page_parent" so it remains highlighted..
    Does anyone know how to solve it? Thank

  8. Brig01
    Member
    Posted 3 years ago #

    Here's my CSS for highlighting the menu item:
    ul.menu li a:hover, ul.menu li.current_page_item a, ul.menu li.current-menu-item a, ul.menu li.current-menu-ancestor a

    So I've not included current_page_parent in my css at all.

    That will solve it for you but unfortunately only works if you use a custom menu.

    I'm thinking this must either be a bug in WordPress or we're missing something in the code.

  9. Brig01
    Member
    Posted 3 years ago #

    I might have found a solution. It works but have not tested it in a real world scenario yet so please do your own testing first. It involves conditional stylesheets.

    In header.php put a new conditional tag:

    <?php if (is_singular('CPT-NAME')) { ?>
        	<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('template_url'); ?>/path/to/stylesheet.css" />
        <?php } ?>

    CPT-NAME is your custom post type name, like newsletters or offers.
    Also reference the stylesheet you create in the next step.

    The separate stylesheet then got this in it which is my menu highlight css. Adjust to your own styles. Change menu-item-220 to your -menu-item-#. Use firebug or Google Chrome to find this number.

    #menu-item-220 a
    {
    	background: #000;
    	color: #a0a0a0;
    	margin: 5px 0;
    	padding: 5px;
    	-moz-border-radius: 5px;
    	-webkit-border-radius: 5px;
    	border-radius: 5px;
    	border-left: 1px solid #000;
    	border-top: 1px solid #000;
    	border-right: 1px solid #222;
    	border-bottom: 1px solid #222;
    }

    Now this stylesheet will only be picked up when a page from your custom post type in the conditional tag above is true.

    So far this works ok as a workaround. But as I said there might be scenarios where this doesn't work.

  10. paolo.valier
    Member
    Posted 3 years ago #

    thanks Brig01
    I've fixed that using is_singular('CPT-NAME') and is_tax('CT-NAME') to highlight the menu when in the custom post type and custom taxonomy pages

  11. acafourek
    Member
    Posted 3 years ago #

    I'm also using this pretty successfully on a few sites, though I've cut out the individual css files. I have my main style.css file for my theme which has all my nav css in it and the only thing I need to edit on a per-post-type basis is the menu highlighting, so I thought a whole new file was a bit bulky for what I need.

    So- I used your condition code in the header, but expanded it to cover 4 custom types I have and added <style> HTML tags around it.

    <!--  This adds support for current page highlighting with custom posts -->
    	<style>
    
    	<?php if (is_singular('issue')) { ?>
        	#menu-item-500 a {
    
    	<?php } elseif (is_singular('news')) { ?>
    		#menu-item-300 a {
    
    	<?php } elseif (is_singular('videos')) { ?>
    		#menu-item-250 a {
    
    	<?php } elseif (is_singular('testimonial')) { ?>
    		#menu-item-254 a {
    
    	<?php } ?>
    	color: #ff8608;
    			}
    	</style>
    	<!-- end nav styling -->

    Hopefully this is useful for some others as well!

  12. bmwboarder
    Member
    Posted 3 years ago #

    Acafourek, thanks for posting this. It has helped me get the custom posts highlighted, and I like that it doesn't add another http request.

    Do you know how I can get a parent page of all the custom post types to also have the styling? I have a portfolio index (mostly controlled by a plugin) and then individual projects, which I've gotten to work with the is_singular(). I'm almost there, but I can't figure out how to determine when it is loading the project index. Thanks for any help, and for posting what you already have.

    Brandon

  13. Rev. Voodoo
    Volunteer Moderator
    Posted 3 years ago #

    Just an FYI, WP 3.1 adds the archive feature for CPTs. Which negates needed to create your own template to display your CPTs.

    When I tested thsi on my dev install, it worked perfectly and also assigned the proper class in the css.

    Before that I had the same problem with my CPT pages

  14. elektronicat
    Member
    Posted 3 years ago #

    thnx acafourek, nice fix!
    I extended your code with an extra line of CSS to style the menu item that is (unfortunately) lit up by default and given it an 'inactive' color. I hope that future releases will make this fix obsolete..

  15. joncalex
    Member
    Posted 3 years ago #

    If you are using twentyten as a base theme/parent theme then all you need to do is use the body class it prints out as a hook. So looking at acafourek's example above my comment: 'single-issue' would be one of the body classes. So the css rule you place in your stylesheet for the issue post content type is:

    .single-issue #menu-item-500 a {
    /*css properties here*/
    }
  16. jonny_williams
    Member
    Posted 3 years ago #

    Hey guys a nice neat way I do this is to add a filter to either "wp_page_menu" or "nav_menu_css_class" depending on if you are using old or new style menus (or both if you want to support both) like so.

    function change_page_menu_classes($menu){
    	global $post;
    	if (get_post_type($post) == 'post-type-name')
    	{
    		$menu = str_replace( 'current_page_parent', '', $menu ); // remove all current_page_parent classes
    		$menu = str_replace( 'page-item-366', 'page-item-366 current_page_parent', $menu ); // add the current_page_parent class to the page you want
    	}
    	return $menu;
    }
    add_filter( 'wp_page_menu', 'change_page_menu_classes', 0 );
  17. paolo.valier
    Member
    Posted 3 years ago #

    great!
    thanks jonny williams

Topic Closed

This topic has been closed to new replies.

About this Topic