How to show Post Categories in Different colors


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.


<?php

$categories = get_the_category();

$separator = ' ';

$output = '';

if($categories){

$i=1;

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.




10 Brilliant Comments - Join Discussion Now!

  1. Anchit Shethia says:

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

    • rakesh says:

      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.

  2. 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 :)

  3. sonesh says:

    NIce trick thanks for sharing will apply on my blog

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

    ~Ravi

    • rakesh says:

      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

  5. 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…

  6. Pol says:

    Thank you, Rakesh!

    I would like to keep the same color for a specific category.
    For example, I would like to show “Astrology” always in teal – no matter if it’s the 1st, 2nd or third category shown.
    Is that possible? How could I do that?

    Thank you,

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>