How to show Post Categories in Different colors

default single post image

Showing post categories in different colors can enhance the CTR (click through rate ) of your website but it is not implemented in the same way as we used to see this.

post categories in different colors

Most WordPress themes use <?php the_category();?>   to display all the listed categories but all of them appear in the same color scheme as we define in  its parent class /id .

You are requested to open your single.php file and replace <?php the_category();?>  tag with the following code.



$categories = get_the_category();

$separator = ‘ ‘;

$output = ”;



foreach($categories as $category) {

$output .= ‘<span class="colorcode-‘. $i%4 . ‘"><a  href="’.get_category_link( $category->term_id ).’" title="’ . esc_attr( sprintf( __( "View all posts in %s Category" ), $category->name ) ) . ‘">’.$category->cat_name.'</a></span>’.$separator; $i++;


echo trim($output, $separator);




NOTE : if you will see the above code properly then you will come to know that, I have divided my variable $i by 4 and the same number of color codes added in my style.css, if you want more color codes in your theme then just increase this number.

Now the main hack in this case is its  CSS( cascade style sheet). Open your style.css file and add as many as colors you want to use in your theme. I have divided all my colors in 4 so I am going to define four color for my site.


.colorcode-1 { background : teal; color: white;}

.colorcode-2 { background : red; color: white;}

.colorcode-3 { background : blue; color: white;}

.colorcode-4 { background : green; color: white;}


That’s all. Thanks Rahul kashyap for asking this wonderful question.

Related Posts

9 thoughts on “How to show Post Categories in Different colors”

  1. Hi Rakesh,
    It looks very interesting idea to show categories in different colours…You have explained the method to do this in very simple way…

  2. Hi Rakesh,

    I was seeking for this stuff from long time. I want to change the color of categories. As it doesn’t seem that much effective. I want to add different color of each category. I hope this will work. We all know that appearance of a website is really important in every aspect. Bloggers should concentrate at the design of their blog. I had searched for many themes and finally got one but as I said I want to redesign it’s categories view.
    Thanks for sharing this post.


    1. Besides blog design they should also concentrate on the SEO issues of any designed theme. Most of the time developers are not designers and designers are not developers thus if you are able to use another programmers code inside your program then it is always a win-win situation for you. Thanks Ravi for adding your voice here. Keep in touch for such wonderful ideas. ;) ~rakesh kumar

  3. hello sir ji,

    thanks you have solved my problem. it is Awesome tutorial for me and now i will use this technique in my next theme :)

    1. You are most welcome rahul. Keep asking such a wonderful questions to grow rapidly.

  4. Again Rakesh ji, bad at coding. Any WordPress plugin to do so? Seems pretty good idea to give a visual tweak.

    1. NO issue Anchit, If you want this hack in any of your WordPress theme, let me know i can do this for you. But as per my knowledge this is not available on the net as a standalone plugin, so till then we have to do it manually.

Leave a Reply

Your email address will not be published.