How to use alternating colors on tag cloud links?

  • iwriteblogs

    (@iwriteblogs)


    10 years, 2 months 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!

Viewing 1 replies (of 1 total)
  • vtxyzzy

    (@vtxyzzy)

    10 years, 2 months ago

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

    <?php
   // 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’.

Viewing 1 replies (of 1 total)
  • The topic ‘How to use alternating colors on tag cloud links?’ is closed to new replies.