Community Forums › Forums › Archived Forums › General Discussion › category menu highlighting for single posts in Eleven40 Pro
Tagged: active class, category menu, Eleven40-Pro
- This topic has 6 replies, 2 voices, and was last updated 9 years, 11 months ago by Brad Dalton.
-
AuthorPosts
-
May 21, 2014 at 3:01 am #106134Jim ColellaMember
Hi all,
My request relates to a category-based menu which is in the primary navigation bar, which in Eleven40 Pro sits right below the header. When you select that category from the menu you, of course, have all the relevant posts appearing below and that menu item appears highlighted (in my case, background set to white, when default is grey). All when and good, but when you select a single post, that relevant menu item is not highlighted. I've shopped around the 'Net, and the only piece of coding I've come across that isn't eons old (this one's from 2010) is here: Dynamic category menu highlighting for single posts
I've followed the instructons to the letter -- that is, placed the following in my functions.php:
//* Highlight single Posts in category menu
function sgr_show_current_cat_on_single($output) {global $post;
if( is_single() ) {
$categories = wp_get_post_categories($post->ID);
foreach( $categories as $catid ) {
$cat = get_category($catid);
// Find cat-item-ID in the string
if(preg_match('#cat-item-' . $cat->cat_ID . '#', $output)) {
$output = str_replace('cat-item-'.$cat->cat_ID, 'cat-item-'.$cat->cat_ID . ' current-cat', $output);
}
}}
return $output;
}//* Filter for single Posts in category menu
add_filter('wp_list_categories', 'sgr_show_current_cat_on_single');But then those instructions go on to mention finding the right css selector and adjusting the style relevant to your theme. And yet -- using Firebug -- I've tried every configuration I can think of, none of which work. Can anyone help me out? For starters, this seems like a catch-22, because until I know the right selector, I don't even know if the code I've added to the functions.php is even working.
FYI, the css code I've used for highlighting the menu when the user merely clicks on the menu item is this (ie, not for single posts):
.genesis-nav-menu a:hover, .eleven40-pro-red .genesis-nav-menu .current-menu-item > a {
color: #222 !important;
background: #FFF !important;
}But what is it for the single post item? Presumably it includes ".current-cat" somehow, but I'm stumped!
Any help is very much appreciated. My site can be viewed at: http://www.turkafile.com
And, on a final note, by the very nature of the content, I really do need to have a category-based menu. Thanks in advance for any tips, code, or pointers.
http://www.turkafile.comMay 21, 2014 at 1:52 pm #106212Brad DaltonParticipantI think you need to redo your question as its confusing and keep it short and specific to what you actually want.
The code you pasted is broken as it has been embedded incorrectly and therefore will not be tested.
Happy to help when i understand what you want.
May 21, 2014 at 2:33 pm #106217Jim ColellaMemberThanks for the feedback Brad.
I'll try again: I have a category-based menu in the primary navigation bar in Eleven40 Pro. When each menu item is selected it is highlighted, or perhaps I should say "active". But when single posts are selected, they do not "activate" the corresponding menu item. In other words, the category-based URL doesn't highlight in the menu.
For example, click on "Hot Topic" in the primary navigation bar, and it's active/highlighted, like so:
But when a URL within that category is selected (as a single post), the corresponding menu item is not active/highlighted:
The functions code I used above was copied straight in from the above-mentioned article (Dynamic category menu highlighting for single posts). According tho the comments below it, it seems to work fine for others-- although, maybe I accidentally messed with it.
In any case, if that code isn't working/is wrong, what do I need to add to my functions.php? And also, what should I put in my child theme css?
Sorry for the dumbass qu's. I'm fine with using css -- but functions.php is all new to me.
I hope that makes better sense. And wasn't too long.
May 21, 2014 at 10:31 pm #106256Brad DaltonParticipantIts not official code from StudioPress and has been modified from another snippet which is 5 years old.
Its also not code which is specific to Genesis or StudioPress.
What i suggest you do is post the exact code you used on the WordPress Developers site and include the steps you have taken to research and try and fix the code yourself.
This method will enable you to get the most exposure and help from WordPress Developers.
If it where SP or Genesis code, then here is the right place but its a PHP question relating to a WordPress function.
May 22, 2014 at 1:23 am #106279Jim ColellaMemberThanks Brad. Everything I've read on this issue is 5 (or even more) years old. I had a feeling I'd stumbled on a long-known-but-as-yet-unsolved WordPress problem. To echo comments seen elsewhere (others sites), it would seem perfectly logical to want a category-based URL to activate a category-based menu. I was just hoping someone here might have found a way within the Genesis framework. I'll try as you've suggested (with fingers crossed for a solution from any passers-by here!). By the way, the site I grabbed the code from is using a Genesis theme -- so with the "G" favicon appearing in the browser tab, I (oops) mistook it to be a site providing tips for Genesis. Lesson learned! I'll certainly post back here if I ever solve this. Thanks again.
May 22, 2014 at 7:53 am #106314Jim ColellaMemberSolved! I found a far more recent piece of code here (dated Feb. 2014).
For anyone struggling with the same issue, add this to your functions.php:
function wpse_134409_current_category_class($classes, $item) {
if (
is_single()
&& 'category' === $item->object
&& in_array($item->object_id, wp_get_post_categories($GLOBALS['post']->ID))
)
$classes[] = 'current-category';return $classes;
} // function wpse_134409_current_category_classadd_filter('nav_menu_css_class', 'wpse_134409_current_category_class', 10, 2);
And the necessary css selector in Eleven40 Pro:
.nav-primary .current-category a {
//*your styling here
}...which wasn't from the site linked to above, but after some fumbling around, I found it. Hope that helps any others lost down this path.
May 22, 2014 at 8:03 am #106318Brad DaltonParticipantThanks for sharing the code and linking back to the source Jim.
What i do is paste the code into a Github Gist and embed it so that way it doesn't break the code when copied and i can also make changes if needed. Cheers
-
AuthorPosts
- The topic ‘category menu highlighting for single posts in Eleven40 Pro’ is closed to new replies.