Lego2012
12/13/2016 - 10:40 AM

Display a Tag Cloud

Display a Tag Cloud

<?php wp_tag_cloud( array(

    'smallest' => 8,          // font size for the least used tag
    'largest'  => 22,         // font size for the most used tag
    'unit'     => 'px',       // font sizing choice (pt, em, px, etc)
    'number'   => 45,         // maximum number of tags to show
    'format'   => 'flat',     // flat, list, or array. flat = spaces between; list = in li tags; array = does not echo results, returns array
    'orderby'  => 'name',     // name = alphabetical by name; count = by popularity
    'order'    => 'ASC',      // starting from A, or starting from highest count
    'exclude'  => 12,         // ID's of tags to exclude, displays all except these
    'include'  => 13,         // ID's of tags to include, displays none except these
    'link'     => 'view',     // view = links to tag view; edit = link to edit tag
    'taxonomy' => 'post_tag', // post_tag, link_category, category - create tag clouds of any of these things
    'echo'     => true        // set to false to return an array, not echo it

) ); ?>

<!-- The default sizing, if none supplied, for this function is "pt" which is a bit unusual and often unreliable so make sure you change that parameter to how you size fonts normally on your site. -->
Less Weird Font Sizing

<!-- Tag clouds accomplish their varied font sizes by applying inline styling to each tag. The resulting font sizes can be really weird like style='font-size:29.3947354754px;'. Mike Summers proposes this solution: -->

<div id="tagCloud">
  <ul>
    <?php
      $arr = wp_tag_cloud(array(
        'smallest'             => 8,                      // font size for the least used tag
        'largest'                => 40,                    // font size for the most used tag
        'unit'                      => 'px',                 // font sizing choice (pt, em, px, etc)
        'number'              => 200,                 // maximum number of tags to show
        'format'                => 'array',            // flat, list, or array. flat = spaces between; list = in li tags; array = does not echo results, returns array
        'separator'          => '',                      //
        'orderby'              => 'name',           // name = alphabetical by name; count = by popularity
        'order'                   => 'RAND',          // starting from A, or starting from highest count
        'exclude'              => '',                      // ID's of tags to exclude, displays all except these
        'include'               => '',                      // ID's of tags to include, displays none except these
        'link'                       => 'view',             // view = links to tag view; edit = link to edit tag
        'taxonomy'         => 'post_tag',    // post_tag, link_category, category - create tag clouds of any of these things
        'echo'                    => true                 // set to false to return an array, not echo it
      ));
      foreach ($arr as $value) {
        $ptr1 = strpos($value,'font-size:');
        $ptr2 = strpos($value,'px');
        $px = round(substr($value,$ptr1+10,$ptr2-$ptr1-10));
        $value = substr($value, 0, $ptr1+10) . $px . substr($value, $ptr2);
        $ptr1 = strpos($value, "class=");
        $value = substr($value, 0, $ptr1+7) . 'color-' . $px . ' ' . substr($value, $ptr1+7);
        echo '<li>' . $value . '</li> ';
      }
    ?>
  </ul>
</div>

<!-- The result turns this: -->

<a href='url' class='tag-link-66' title='6 topics' style='font-size:29.3947354754px;'>Tag Name</a>

<!-- into this: -->

<a href='url' class='color-29 tag-link-66' title='6 topics' style='font-size:29px;'>Tag Name</a>

<!-- Notice the added bonus that the links has a class name of "color-29" now that it didn't before. Now you have a hook to colorize tag names based on their size. -->