About design and nearby

How to Display a Tag Cloud

Posted: February 11th, 2014 | Author: | Filed under: Development, Tips and Tricks | Tags: , , | No Comments »

To display a tag cloud at the footer section of a WordPress powered website I use the wp_tag_cloud() function:

  1. <?php wp_tag_cloud( $args ); ?>

How to display WordPress tag cloud

As usual, I started with the HTML version of my tag cloud:

  1. <h4>Trends</h4>
  2. <ul class="tag-cloud">
  3.       <li><a href="#">All Categories</a></li>  
  4.       <li><a href="#">Category 1</a></li>
  5.       <li><a href="#">Tag 1</a></li>
  6.       <li><a href="#">Tag 2</a></li>
  7. </ul>

I decided to display not categories only, but tags also – using the array feature of the taxonomy argument:

  1. <?php
  2.   $args = array(
  3.     'taxonomy'  => array('post_tag','category'),
  4.    );
  5.    
  6.   wp_tag_cloud($args);
  7. ?>

The PHP code:

  1. <h4>Trends</h4>
  2. <div class="tag-cloud">                                      
  3.  <?php
  4.  $args = array(
  5.  'taxonomy'  => array('post_tag','category'),  //display a cloud of categories and tags
  6.        
  7.  'format'    => 'list',  // format of the cloud – 'ul' with a class of 'wp-tag-cloud'
  8.  'smallest'  => 16,  // the text size of the tag with the smallest count value
  9.  'largest'   => 16,  // the text size of the tag with the smallest count value, so in my case the font size is the same
  10.  'unit'      => 'px',  // unit of measure as pertains to the smallest and largest values
  11.  'number'    => 8,  // the number of actual tags to display in the cloud      
  12.  'orderby'   => 'name',  // order of the tags
  13.  'order'     => 'RAND',  // sort order
  14.  );        
  15.  wp_tag_cloud($args);
  16.  ?>
  17. </div>

And you can customize the look & feel with CSS according to your needs.

Related post: How to Display Latest Blog Posts at the Footer

Share Button

Check Related Posts:


Leave a Reply


  • 2 + = ten

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now