0

Currently by default (I believe) when you're on single.php, Wordpress doesn't add a "Active" class to the blog category you're viewing the single post in like it would for pages or if you're on the category archive. Archive also doesn't have this (if you list them). Is there a way to add an "Active" class to posts parent categories after you list them?

I'm listing my Categories and Archives the standard way:

<div class="menu-item">
        <h4 class="title"><a href="<?php echo get_permalink(15); ?>">Categories</a></h4>
        <ul>
            <?php
                wp_list_categories(array(
                    'title_li'  =>  '',
                    'echo'      =>  1
                ));

            ?>
        </ul>
    </div>
    <div class="menu-item">
        <h4 class="title"><a href="<?php echo get_permalink(15); ?>">Archives</a></h4>
        <ul>
            <?php wp_get_archives('type=monthly&limit=12'); ?>
        </ul>
    </div>

Just to clarify; When you're on the category it will add the class current-cat to the list item, but when you're on one of the single posts it doesn't add any kind of class to the category to signify that the post belongs to it.

This is the permalink structure I'm using (if it matters):

/blog/%year%/%monthnum%/%day%/%postname%/
1
  • Posts can belong to multiple categories, so no particular single one is active.
    – vancoder
    Aug 23, 2013 at 17:13

1 Answer 1

1
+50

As vancoder notes, a post can have multiple categories and the following code highlights each category, as well as the current month for the post. Add to your theme's functions.php.

  // Generate active class for categories when viewing single posts
  // Props to Sam Nabi http://samnabi.com/blog/highlight-the-current-category-for-single-posts-in-wordpress
  function singlePostActiveCat ($CatText) {
     global $post;
     if (is_singular()) {
       $categories = wp_get_post_categories($post->ID);
       foreach ($categories as $category_id) {
        $category = get_category($category_id);
        $CatText = preg_replace(
           "/class=\"(.*)\"><a ([^<>]*)>$category->name<\/a>/",
           ' class="$1 active"><a $2>' . $category->name . '</a>',
        $CatText);
        }
     }
  return $CatText;
  }
  add_filter('wp_list_categories', 'singlePostActiveCat');

  // Generate active class for archives when viewing single posts
  // Props to Joshua Abenazer http://wordpress.stackexchange.com/questions/62509/wp-get-archives-get-css-selector-for-current-month
  function singlePostActiveMonth( $ArchiveText ) {
     if (is_singular()){
        $current_month = get_the_date("F Y");
        if ( preg_match('/'.$current_month.'/i', $ArchiveText ) )
           $ArchiveText = preg_replace('/<li>/i', '<li class="active">', $ArchiveText );
     }
     return $ArchiveText;
  }
  add_filter( 'get_archives_link', 'singlePostActiveMonth' );

Tested on my local dev copy of WP and seems to work.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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