How to use alternating colors on tag cloud links? (2 posts)

  1. iwriteblogs
    Posted 1 year ago #

    I have a tag cloud in my sidebar. While some links appear larger and some smaller, many are the same size. This looks awkward. Is there a way to use alternating colors?

    If two tags are next to each other like "zombie" and "cats" it might make readers think I have one tag called "zombie cats." What I want is "zombie" to be green and "cats" to be blue, so the different colors make them easily recognizable as separate tags.

    Thanks for your suggestions!

  2. vtxyzzy
    Posted 1 year ago #

    One way to do this is to use a widget that can contain PHP and insert this code:

       // Style tag cloud links with 'odd' and 'even'
       $tags = wp_tag_cloud( 'format=array' );
       $switch = 0;
       foreach ($tags as $tag) {
          if (preg_match("/class=\'([^\']+)\'/",$tag,$matches) ) {
             $tag_class = (++$switch % 2) ? 'tag_link_odd' : 'tag_link_even';
             $tag = preg_replace("/$matches[1]/","$matches[1] $tag_class",$tag);
          echo $tag . ' ';

    Then add CSS styles for 'tag_link_odd' and 'tag_link_even'.

Topic Closed

This topic has been closed to new replies.

About this Topic