WordPress.org

Ready to get started?Download WordPress

Forums

current_page_item class not applied to "custom links" menu items (18 posts)

  1. Hesadanza
    Member
    Posted 3 years ago #

    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?

  2. jaquers
    Member
    Posted 3 years ago #

    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.

  3. 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?

  4. Hesadanza
    Member
    Posted 3 years ago #

    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.

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

  6. Hesadanza
    Member
    Posted 3 years ago #

    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.

  7. 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.

  8. Hesadanza
    Member
    Posted 3 years ago #

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

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

  10. Hesadanza
    Member
    Posted 3 years ago #

    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.

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

  12. Hesadanza
    Member
    Posted 3 years ago #

    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.

  13. Jay August
    Member
    Posted 3 years ago #

    Any fix on this?

  14. Hesadanza
    Member
    Posted 3 years ago #

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

  15. ampt
    Member
    Posted 2 years ago #

    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;
    	}
  16. worldofharry
    Member
    Posted 2 years ago #

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

    Hope that helps.

  17. serenitty
    Member
    Posted 2 years ago #

    ampt. I love you! you are so clever!!!! yes! yes! yes! it works perfectly now.

    but still I am like.. not pleased! because it should work with any class name. and it doesnt. I dont know. Meanwhile I love your solution!

    THANX

  18. Gytis
    Member
    Posted 2 years ago #

    I got the same problem....
    I am not understand why doesn’t work the “current” menu class for 3 levels menus (on custom menu)
    I have created all pages correctly (parent – child – child child :) )
    can somebody help me please!? what is the problem…
    thanks!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.