Hi all,
since I need to use wp_list_categories in a site's navigation, I have realized what I consider a bug in this function: it does not allow for highlighting the current category when I'm looking at a post.
I'm not fond of fiddling with core files, so is there any way I can write a plugin or a functions.php function to add this "current-cat" style to the category list?
Posted 4 years ago #
mores,
looks like "high noon" for dissolving the problems one can see over meanwhile 2 years or so while reading the "decoupling" and "consult hierarchy" comments in the php core.
the whole mess with the category-template is fermenting since the devolopment focuses on tags and widgets.
i have to find a solution for this within the next few days and will post this here. but smells like it will be a greasy hack. stay tuned!
Posted 4 years ago #
Perhaps the Codex does not display the parameter that the function wp_list_categories currently can handle.
I just stumbled about the parameter current_category.
You just have to set the current Category-Id for this.
Try this in your Category-Template in your Templatefolder:
<?php
$catsy = get_the_category();
$myCat = $catsy[0]->cat_ID;
wp_list_categories('hierarchical=1&use_desc_for_title=0&orderby=name&title_li=&depth=3¤t_category='.$myCat);
?>Hope this helps. For my purposes it is working, though there could be more Functionality with collapsing Flaps. May be in the future...
AWESOME !!
That's exactly what I needed, and it works like a charm. It's actually in my header.php.
Now, since I use a "home" before and a "wp_list_pages" after the wp_list_categories tag, I got weird results when I was on a page or on home.
Here's my addition to your code:
<?php
if (!is_page() && !is_home()){
$catsy = get_the_category();
$myCat = $catsy[0]->cat_ID;
$currentcategory = '¤t_category='.$myCat;
}
wp_list_categories('hierarchical=1&use_desc_for_title=0&exclude=12&depth=1&orderby=id&title_li='.$currentcategory);
?>It checks if the page we're on is NOT a Page and is also NOT home. In this case, it adds the current_category bit to the list_categories tag.
Thank you so much warmbeer!
Posted 4 years ago #
mores,
for now ;-) let's see what will happen with WP-Version 2.7.
Glad to help You!
Royal Bavarian Regards!
Posted 4 years ago #
This is exactly what I was looking for!
I have my categories appearing in the footer like this:
<?php if (is_home() || is_category() || is_single()) { ?>
<ul class="categories">
<?php wp_list_categories('title_li=&depth=1'); ?>
</ul>
<?php } ?>so my question is: where exactly do I put the code you have provided?
Posted 4 years ago #
never mind, got it
Posted 4 years ago #
2.7 is a great update, but it doesn’t seem to give more love to categories.
how would I have to alter warmbeer’s code to allow for a .current-cat-parent class?
Posted 4 years ago #
warmbeer you're awesome, cheers
Posted 4 years ago #
transalpin
I'd like to know this too. Had any luck?
Posted 4 years ago #
your solution doesn't work properly on deeper levels ;/ (I tried when [0] from array is on 3rd level deep). any ideas?
Posted 4 years ago #
I didn't get this the first time round.
Warmbeer... thank you so much!
Posted 4 years ago #
how do you fix the issue with tag cloud? When click to a tag cloud, both home item and others items are highlight.
Posted 4 years ago #
thank you so much!
Posted 4 years ago #
Looks like current_category is now listed as a parameter of wp_list_categories()
Btw thanks, Warmbeer, this is the solution I was looking for with a similar problem.
The problem I'm working out is that:
<?php
$catsy = get_the_category();
$myCat = $catsy[0]->cat_ID
?>$catsy[0] is not always what you're looking for. For example sometimes is a subcategory when I'm browsing a parent, and sometimes it doesn't really show up.
A partial solution is to replace $catsy[0] with $catsy
<?php
$catsy = get_the_category();
$myCat = $catsy->cat_ID
?>This works properly with child categories and if a parent category is clicked then the parent and all the children are highlighted (that is show class="current-cat".
In the end I may want the highlighting to only be on precisely what single_cat_title(] would display.... however having the parent and all the children highlighted when browsing a parent could actually be a feature......
(I do change the order of the categories and subcategories from the defualt, so maybe that's why $catsy[0] behaves badly for me.)
Posted 4 years ago #
I stumbled upon this and I just want to say thank you! What warmbeer posted worked perfectly!
Posted 4 years ago #
Maybe someone could help me here.
Please reference: http://www.imontvbitch.com
In the header navigation menu the first two (attention & breakdown are pages) and the rest are categories. The site highlights the current page but won't highlight the current category.
Can anyone help me do that?
The current stylesheet uses this code:
#menu-header li.current_page_item a { color: #FF3300; background-image: url('images/dotted-menu-hover.png'); background-repeat: repeat-x; }
Posted 4 years ago #
Thank you so much warmbeer !!
I've been looking for a solution like this for weeks ! I'm a novice ... so thank you very much, people like me need people like you :-)
Posted 4 years ago #
tvbitch,
You should use the "current-cat" style ! When you look at your Code with Firefox for example, you can see how it is displayed; for example, when I'm in the "Inspiration" Category, I see this:
(...)
<li class="cat-item cat-item-10 current-cat"></strong><a href="http://www.imontvbitch.com/?cat=10" title="View all posts filed under Inspiration">Inspiration</a>
</li>
<li class="cat-item cat-item-11"><a href="http://www.imontvbitch.com/?cat=11" title="View all posts filed under Instrument">Instrument</a>
</li>
(...)As you can see, the "current-cat" attribute has been added in the template for the "Inspiration" category: then you just have to add and customize it in your stylesheet :-)
Posted 4 years ago #
Chatougri thanks for responding. I'm more of a novice than you, so maybe you can help me more. So the "current-cat" is in the template. Where and how do I add and customize it in my stylesheet? For the menu header I tried:
#header #menu-header li.current_cat a { color: #FF3300; background-image: url('images/dotted-menu-hover.png'); background-repeat: repeat-x; }
I basically copied and edited what I saw in the stylesheet & assumed was responsible for highlighting the pages. The template uses two stylesheets. Here's what the first has:
/* HEADER */
#header { width: 1030px; height: 85px; border-bottom: 1px dotted #333333; clear: both; }
#header a, #header a:visited { text-decoration: none; color: #333333; }
#header a:hover { text-decoration:none; color: #000000; }
#header h1 { float: left; font-size: 80px; letter-spacing: -0.1em; font-weight: bold; margin: 0; padding-right: 10px; }
h2.description { color: #999999; font-size: 25px; margin: 0 0 46px 0; text-align: left; }
#menu-header { position: relative; top: 7px; list-style-type: none; float: left; font-size: 18px; font-weight: bold; margin: 0; padding: 0; }
#menu-header li { float: left; display: block; height: 32px; padding: 0; margin-right: 20px; }
#menu-header li a, #menu-header li a:visited { display: block; height: 32px; padding-bottom: 11px; color: #666666; }
#menu-header li a:hover, #menu-header li a:active { display: block; color: #FF3300; background-image: url('images/dotted-menu-hover.png'); background-repeat: repeat-x; }
#menu-header li.current_page_item a { color: #FF3300; background-image: url('images/dotted-menu-hover.png'); background-repeat: repeat-x; }
and the second has:
#menu-header { position: relative; top: 62px; list-style-type: none; float: right; font-size: 18px; font-weight: bold; margin: 0; padding: 0; }
#menu-header li { float: left; display: block; height: 32px; padding: 0; margin-left: 20px; }
#menu-header li a, #menu-header li a:visited { float: left; display: block; height: 32px; padding-bottom: 17px; color: #666666; }
#menu-header li a:hover, #menu-header li a:active { float: left; display: block; color: #FF3300; background-image: url('images/dotted-menu-hover.png'); background-repeat: repeat-x; }
#header #menu-header li.current_page_item a { color: #FF3300; background-image: url('images/dotted-menu-hover.png'); background-repeat: repeat-x; }
#footer #menu-footer li.current_page_item a { text-decoration: none; color: #FF3300; background-image: url('images/dotted-menu-hover.png'); background-repeat: repeat-x; }
Any idea what I need to do?
Posted 4 years ago #
Hello, sorry I took time to respond !
It seems that you put "current_cat", but in fact it's "current-cat", be careful ;)
Then you could make your code in a simpler way ! For example, to highlight the current category, you just need to set a color, without any link attribute, etc.
So you can add this in your stylesheet:
#menu-header .current-cat { color: #FF3300; }
That's simple, and that's all :-)
And if you want to have a dotted border, and get rid of the background image, you can replace (in your stylesheet):
background-image: url('images/dotted-menu-hover.png'); background-repeat: repeat-x;
with:
border: #FF3300 1px dotted
Always try to make your code the simplest you can ;-)
Posted 4 years ago #
Oh snap!
Thanks so much Chatougri!!
These forums are great!
Posted 3 years ago #
Awesome warmbeer, thanks a lot.
Posted 3 years ago #
Has anyone figured out how to tackle the grandchildren issue? i.e. 3 levels into the navigation, wp_list_categories stops adding category parent classes both on the category archive pages and on the individual post pages.
Posted 3 years ago #
pajtai ,
<?php
$catsy = get_the_category();
$myCat = $catsy->cat_ID
?>
this wont work if the post is archived in more than one cat.
so i just add some if & elsif statments and it worked , like :
if (!is_page() && !is_home() && !is_single()){
$catsy = get_the_category();
$myCat = $catsy->cat_ID;
$currentcategory = '¤t_category='.$myCat;
}
elseif (is_single()){
$catsy = get_the_category();
$myCat = $catsy[0]->cat_ID;
$currentcategory = '¤t_category='.$myCat;
}
Posted 3 years ago #
Really great stuff!
Though could someone help me out with this..?
I want to include it in an already complicated piece of coding:
<?php if ( get_option('biz_blog_navigation' ) == 'true' ) { ?><?php wp_list_categories('child_of=' . get_option( 'biz_blog_cat_id' ) . '&hide_empty=true&title_li=<a href="' . get_option('home') . get_option('biz_blog_permalink') .'" title="Nieuws"><span>Nieuws</span></a>'); ?><?php } ?>
Currently placing Warmbeers code only displays the parent category, if I could make it display the child categories too then it would be perfect.
Posted 3 years ago #
First, I assume most of you are using this code outside the loop in the global nav.
I just wanted to point something out... the title of this thread... "When viewing single post".. if you alter your global nav with this code, you BREAK the built-in working functionality of the category archives where current-cat and current-parent-cat class flagging works just fine for highlighting.
Romeo_sat: your first conditional is not really needed, you don't need to pass the current category param to wp_list_categories when you are on a category page.. if you do, you are passing it the param of THE FIRST POST.. that is what get_the_category does, it returns the categories for a single post.
This code should only be used with a is_single() conditional..
This topic has been closed to new replies.
