We all know that tags are a vital part of WordPress taxonomies, which are a way of grouping things together. Tags are created on the fly while creating posts and help us to locate similar posts linked by particular tags. Generally in a WordPress blog, different tags are grouped inside a tag cloud, and the size of each tag determines the frequency of its assignments to posts. Here we shall look into the correct usage of the wp_tag_cloud() function, which is responsible for all these tag clouds.
Introduction
This is the main built-in function to display the tags associated with your recent posts, within the tag cloud.
<?php $args = array( 'smallest' => 8, 'largest' => 22, 'unit' => 'pt', 'number' => 45, 'format' => 'flat', 'separator' => "\n", 'orderby' => 'name', 'order' => 'ASC', 'exclude' => null, 'include' => null, 'topic_count_text_callback' => default_topic_count_text, 'link' => 'view', 'taxonomy' => 'post_tag', 'echo' => true ); ?>
The WordPress Codex wp_tag_cloud() page has a clear explanation of all the parameters of this function, but still let's quickly discuss the important ones.
-
'smallest'– This parameter is of type integer and specifies the minimum text size of the tag in the cloud -
'largest'– This parameter is of type integer and specifies the maximum text size of the tag in the cloud -
'number'– This parameter specifies the total number of tags to be displayed in the cloud. You can specify it as '0' if you want all of them to be displayed -
'format'– This parameter specifies the format of the cloud display. It can be any of 'flat', 'list', or 'array' -
'separator'– This parameter specifies the separator within the tags in the cloud -
'topic_count_text_callback'– This parameter shows the number of posts associated with each Tag through a tooltip -
'taxonomy'– This parameter specifies the type of WordPress taxonomy which can be used within the tag cloud. Here the default is the 'post_tags' but you can use a custom taxonomy as well
These parameters play a key role in customizing the tag cloud.
Usage
WordPress has a default Tag Cloud widget which can be placed in the appropriate area of the page. But without using a widget you can use the wp_tag_cloud() function to display and customize the tag cloud in your blog. You can specify the parameters in a number of ways.
Parameters separated by '&' in one simple inline string.
<?php
wp_tag_cloud('smallest=10&largest=50&unit=px&number=45&separator=:: &orderby=count&order=RAND');
?>
Parameter specification in array format.
<?php wp_tag_cloud( array( 'smallest' => '10' ,'largest' => '50', 'unit' => 'px', 'number' => '45', 'separator' => ':: ', 'orderby' => 'count', 'order' => 'RAND') ); ?>
Specifying only selected parameters, the rest are kept as default.
<?php
wp_tag_cloud('smallest=12&largest=30');
?>
Return the tag cloud as an array without displaying it in the blog. This result can be used later within the PHP code.
<?php
$tag = wp_tag_cloud('format=array' );
?>
Practical Examples
Example 1 Display the Tag Cloud in Your Theme's Sidebar or Footer
Create a function in your functions.php file and return the wp_tag_cloud() function. Once it is defined, you can call the function anywhere within your blog.
function my_cloud($echo = false) {
if (function_exists('wp_tag_cloud'))
return wp_tag_cloud();
}
Now let us open our sidebar.php and call the function to display the tag cloud.
<div class="mycloud"> <?php echo '<h3>Popular Tags</h3>'; my_cloud(); ?> </div>
Let's add some CSS styling in our style.css file to make the tag cloud look more professional.
.mycloud a {
background: #FFC414;
color: #0000FF;
display: inline-block;
margin: 0 4px 8px 0;
padding: 2px 10px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
font-size: 10px;
}
.mycloud h3 {
font-style: italic;
font-weight: bold;
font-size: 30px;
color: #FF00FF;
font-family: Comic Sans;
}
Now it looks like this:
Similarly using the same in the footer.php of our theme.
You can make it more beautiful by adding your custom CSS styles.
By adding different parameters within the wp_tag_cloud() function in the functions.php file we can customize our tag cloud. For example, if you like to include both your tags and categories into the tag cloud or rather the taxonomy cloud then the function can be written as:
wp_tag_cloud(array('taxonomy' => array('post_tag','category')));
Example 2 Create a Tag Cloud Page for Your Blog
Sometimes you do not like to keep the tag cloud in your sidebar or footer and creating a separate page for it keeps your blog clean. You can do so using the following method.
At first create a custom page template in your theme folder with the wp_tag_cloud() function. Here we have named the file tagcloud.php.
<?php /* Template Name: Tag Cloud */ ?> <?php get_header(); ?> <div id="content" class="narrowcolumn"> <div class="mycloud"> <?php wp_tag_cloud( ); ?> </div> </div> <?php get_sidebar(); ?> <?php get_footer(); ?>
Now log in to your WordPress admin and go to Pages -> Add New. Put a good title for the page and then under the Page Attributes section choose the Template as Tag Cloud and then click on Update. That's it; your tag cloud page is ready. You can style the page with your own CSS styles.
Example 3 Create a Tag Cloud Scroll Box for Your Sidebar
Sometimes we want our users to select tags from a scrollable box in our sidebar. To accomplish this we have to create a function in our functions.php file.
function cloudbox () {
if (function_exists('wp_tag_cloud')) {
$tags = wp_tag_cloud( array('smallest'=>10, 'largest'=>10, 'orderby'=>'name', 'order'=>'ASC', 'format' => 'array') );
foreach($tags as $tag) {
echo $tag.'<br>';
}
}
}
In the above function we have considered the array format of the wp_tag_cloud() function, along with that the font size has been kept the same and the list has been ordered by name in ascending order.
Now open your sidebar.php and call this function.
<h3 id='text'>Please select the Tag</h3> <div id="cloud"> <?php cloudbox(); ?> </div>
Let us style it with some CSS.
#cloud {
background: #FFFFCC;
height: 200px;
width: 200px;
margin: 0 auto;
overflow: scroll;
border: 4px solid #000000;
padding: 2px;
text-align: justify;
}
#cloud a {
background: #400000;
color: #FFFF00;
display: inline-block;
margin: 0 4px 8px 0;
padding: 2px 10px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
font-size: 15px;
}
#text {
font-style: italic;
font-weight: bold;
font-size: 20px;
color: #FF9900;
font-family: Comic Sans;
}
Finally it looks like:
Thanks for reading and please feel free to suggest some more uses of this very useful wp_tag_cloud() function.
Comments