1

The code below produces a sub-menu of child categories of the currently active parent category. This code also produces the child categories of the top parent category while viewing child categories and posts in those categories. The .current-cat CSS class is applied to the active child categories.

This is the most nimble code I have been able to find to address this general issue.

I am curious if anybody has a solution to fix the one problem this code does not address - adding the class to the current child category when viewing a post in that category.

<?php
$categories = get_the_category();
    echo '<ul>';
foreach($categories as $category){
    $parent = $category->parent;
    if($category->parent == 0){
    }
    else{
        wp_list_categories("child_of=$parent&title_li");
    }
}
    echo '</ul>';
?>

To further describe what I'm looking for:

Let's say the parent category is Boats and the child category is Skooners. I wrote an article titled "How to Buy a Skooner" and filed it under Boats > Skooners. When I navigate to the Boats category, this code does display skooners as a child category and assigns a CSS class which allows us to indicate via design that this is the category we are viewing. However, when I navigate to the "How to Buy a Skooner" article (filed under Boats > Skooners) the appropriate child categories are still displayed but are missing the CSS class of .current-cat.

To see this in action visit http://themeforward.com/demo2/category/category/ and navigate with the sub-menu on the right to the "Link" category. Then, click the "Link" article and you will notice it loses its purple styling applied via .current-cat.

  • So in summary. The .current-cat is applied in the archive/category page, but not in the actual post page... correct? – gdaniel May 2 '13 at 19:14
  • Exactly, but your description just makes it all too easy :-P – AndrettiMilas May 2 '13 at 19:15
2

very similar approach to the answer by @AndrettiMilas:

add_filter('wp_list_categories','style_current_cat_single_post');
// filter to add the .current-cat class to categories list in single post
function style_current_cat_single_post($output) {
    if( is_single() ) :
        global $post;
        foreach ( get_the_category($post->ID) as $cat ) {
            $cats[] = $cat->term_id;
        }
        foreach($cats as $value) {
            if(preg_match('#item-' . $value . '">#', $output)) {
            $output = str_replace('item-' . $value . '">', 'item-' . $value . ' current-cat">', $output);
            }
        }
    endif;
return $output;
}

adapted from one of my articles.

  • Hey Michael, out of curiosity - do you think one of these answers is superior to the other? – AndrettiMilas May 2 '13 at 22:09
  • 1
    I can't tell - both posssibities are very similar - not using wp_get_post_categories() saves one query, while your loop for adding the .current-cat seems to be more efficient to me ... I am tempted to combine both codes and run a few tests. – Michael May 3 '13 at 9:19
1

I think there has to be a less code intensive answer here so I will leave this question open for a while longer, however, I have found that adding this code to functions.php while still utilizing the code I have provided in my original question is one possible solution.

// Generate the current-cat class when viewing single posts 
class singlePostCurrentCat { 
  function wp_list_categories ($text) { 
    global $post; 
      if (is_singular()) { 
        $categories = wp_get_post_categories($post->ID); 
        foreach ($categories as $category_id) { 
          $category = get_category($category_id); 
          $text = preg_replace( 
            "/class=\"(.*)\"><a ([^<>]*)>$category->name<\/a>/", 
            ' class="$1 current-cat"><a $2>' . $category->name . '</a>', 
          $text); 
        } 
      } 
    return $text; 
  } 
} 
add_filter('wp_list_categories', array('singlePostCurrentCat','wp_list_categories'));
0

From wordpress Codex:

current_category (integer) Allows you to force the "current-cat" to appear on uses of wp_list_categories that are not on category archive pages. Normally, the current-cat is set only on category archive pages. If you have another use for it, or want to force it to highlight a different category, this overrides what the function thinks the "current" category is. This parameter added at Version 2.6

http://codex.wordpress.org/Template_Tags/wp_list_categories

  • Andretti it looks like you can force the function to show the class.

Update: Try this. I tried and it worked for me.

Change your code from:

wp_list_categories("child_of=$parent&title_li");

to:

wp_list_categories("child_of=$parent&title_li&current_category=1");

I tried it here:

http://wptest.defaria.me/uncategorized/hello-world/

Please bear with me, that this is a WP page for testing only.. so you won't see the category highlighted but if you look at the source code you will see that the current-cat class is present in a post page. I added the category loop at the bottom of the page after comments.

  • 1
    Right, but that doesn't really address how to do it - any link you could provide that may be a bit more detailed? – AndrettiMilas May 2 '13 at 19:24
  • See update above. – gdaniel May 2 '13 at 19:30
  • That didn't work, unfortunately. :-( – AndrettiMilas May 2 '13 at 20:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.