WordPress.org

Support

Support » How-To and Troubleshooting » current_page_item class not applied to "custom links" menu items

current_page_item class not applied to "custom links" menu items

  • The current_page_item class does not seem to be applying to the “custom links” menu items in my theme’s navigation header. It’s only applied to true navigation page links. Anyone know why?

Viewing 15 replies - 1 through 15 (of 17 total)
  • My guess is that WordPress isn’t associating a page in it’s database with the custom link that you’re defining. I am currently experiencing a problem with this and a custom taxonomy plugin that I’m using. Unfortunately, I’m not aware of a solution at the moment.

    Moderator Mark Ratledge

    @songdogtech

    Forum Moderator

    Has little to do with the database and everything to do with CSS. Does the custom menu item show a current class on that page when viewing the CSS with the developer’s menu in your browser or with Firebug and Firefox? Are you using the WP3 menu system and wp_nav_menu? or wp-list_pages?

    The custom menu item shows a class of “menu-item menu-item-type-custom menu-item-1059”. There is no “current” anything on the class of the custom link in the menu when viewing that page. Other pages that are not “custom” show the current-menu-item and current_page_item classes, and get styled accordingly.

    I’m using the WP3 menu system.

    Moderator Mark Ratledge

    @songdogtech

    Forum Moderator

    Post your site URL and which are the custom links? Switch to Twenty Ten and see if the custom links work right.

    The site URL is iFoneVan.com. The custom links are all the submenu links under “Services.” The submenu link “Buy iPhone Accessories” under “Buy an iPhone” works correctly, because it is a regular page. The other links under “Services” are custom links to blog posts, which don’t receive the “current_page_item” class when they are the active page.

    Twenty Ten doesn’t work because the CSS navigation is constructed slightly different in that theme.

    Moderator Mark Ratledge

    @songdogtech

    Forum Moderator

    Twenty Ten doesn’t work because the CSS navigation is constructed slightly different in that theme.

    Does your theme use wp_nav_menu or wp_list_pages? If wp_list_pages, you need to manually enter new CSS rules to trigger the active state on the top menu item. And your body class – that current_page_items depends on – isn’t working, etiher; both menu systems depend on that for current_page.

    It uses wp_nav_menu. Again, it works fine for true pages in the nav, but not for custom link items.

    Moderator Mark Ratledge

    @songdogtech

    Forum Moderator

    The body class is broken in your theme. View source on your theme, switch to Twenty Ten, see the difference.

    Ok, I think I fixed the body class with <?php body_class();?>, but it is still not applying the class to custom link items in the nav.

    Moderator Mark Ratledge

    @songdogtech

    Forum Moderator

    Now look at your theme CSS and how it handles current items and compare that to Twenty Ten as a baseline.

    There is not a problem with the CSS. Like I said, WordPress correctly applies the “current_page_item” class to page items in the navigation, but will not apply the class on custom link items. That has nothing to do with the CSS.

    Any fix on this?

    I don’t know. I think I gave up on the issue.

    Just had the same problem, what I did was match the post-id body class to the the nav menu item id.

    Below shows an example for the first item in the Services menu:
    http://www.ifonevan.com/best-iphone-plan-unlimited-voice-text-4g-data-for-65month/

    We match postid-846 body class to #menu-item-1196

    // Body class has .postid-846
    	<body class="single single-post postid-846 single-format-standard">
    	// HTML continues...
    
    	// Nav menu has #menu-item-1196
    	<li id="menu-item-1196" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1196">
    		<a href="/best-iphone-plan-unlimited-voice-text-4g-data-for-65month/">Unlimited iPhone plan $65/month!</a>
    	</li> 
    
    	// Nav CSS
    	ul.nav li.current_page_item > a,
    	body.postid-846 #menu-item-1196 a {
    		color:#ff6600;
    	}

    I had a similar problem and got this resolved by providing complete URL and not relative URL while defining menus.

    Hope that helps.

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘current_page_item class not applied to "custom links" menu items’ is closed to new replies.
Skip to toolbar