Add Class While on Current Post; wp_list_categories

0 Views

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.

Read More

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.

Post Views: 0

Related posts

3 comments

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

  2. 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'));

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

Comments are closed.