WordPress.org

1. sgies
   Member
   Posted 1 year ago #

   I want to make my cateogries colorful and display the given color everywhere. Let's say we have a post and we normally get: Posted by Admin on 02 November on "Social Media" I want to give a color to social media category so whenever these things will come it get color accordingly! Can anyone help?

2. alchymyth
   The Sweeper
   Posted 1 year ago #

   not straight forward, as the individual items in the category list don't have individual css classes to style them with.

   try to add a filter function to functions.php of your theme; for instance:

   add_filter('the_category','the_category_css_class');
   function the_category_css_class($output) {
     $list = explode('" title',$output); $output = '';
     $len = count($list)-1; $i=0;
       foreach( $list as $list_item ) {
       $cat_slug = explode( '/', $list_item);
       $cat_slug = array_reverse($cat_slug);
       $output .= $list_item;
         if($i < $len) $output .= '" class="cat-' . $cat_slug[0] . '" title';
   	$i++;
       }
     return $output;
   }

   this would add a css class, such as .cat-term-slug to each list item;

   example:
   say your category is 'Social Media' - then the term slug is 'social-media' - the filter would add the css class '.cat-social-media'

   style with:
   a.cat-social-media { color: green; }

   for further category dependant styleing, you could try and use post_class() in the post div; and body_class() in the body tag:

   http://codex.wordpress.org/Template_Tags/post_class
   http://codex.wordpress.org/Template_Tags/body_class

3. sgies
   Member
   Posted 1 year ago #

   I have inserted this code in functions.php and this a.cat-social-media { color: green; } in style.css but it doesnt made any effect to any cat

4. alchymyth
   The Sweeper
   Posted 1 year ago #

   link to your site?

   did you check the html code of your page in the browser ('ctrl u') to see if the css class is actually added to the link?

   have you reloaded the page, or refreshed the browser cache by pressing 'ctrl f5' to get the css changes to show?

Topic Closed

This topic has been closed to new replies.