Displaying Tag Cloud via Shortcode in WordPress

PressTigers

Displaying Tag Cloud via Shortcode in WordPress

July 14, 2016
Leave a comment

Tags play an important role in WordPress Taxonomies, in which different things are required to group together. In WordPress, wp_tag_cloud() function is used to show a list of tags when it gets invoke. That’s the reason it is named as “Tag Cloud”. The size of every tag is dependent on the post in which it is being used. The more a single tag is used in different posts, the more it will become bigger.

By default, an array is passed to wp_tag_cloud() function in which it has some default values. The following is an array for default usage:

<?php 
$args = array(
	'smallest'                   => 8, 
	'largest'                    => 22,
	'unit'                       => 'pt', 
	'number'                     => 45,  
	'format'                     => 'flat',
	'separator'                  => "\n",
	'orderby'                    => 'name', 
	'order'                      => 'ASC',
	'exclude'                    => null, 
	'include'                    => null,

<?php

$args = array(

'smallest' => 8,

'largest' => 22,

'unit' => 'pt',

'number' => 45,

'format' => 'flat',

'separator' => "\n",

'orderby' => 'name',

'order' => 'ASC',

'exclude' => null,

'include' => null,

Let’s have a glance at the parameters mentioned in the above code:

smallest: It shows the minimum font size of the tag
largest: It shows the maximum font size of the tag
unit: It defines the point(pt) of the font size of the tag
number: It tells us the range of tags needed to be displayed in a Tag Cloud. If you want all your tags in a Tag Cloud, you have to set its value to “0”
format: It shows the style in either “list”, “flat” or “array” form
separator: It specifies the whitespaces in the tag

To create a simple shortcode for displaying a tag cloud, you need to add the following code:

function pt_tag_cloud() {
    ?>
    <style type="text/css">
    .pt-tag-cloud a {
    background: #50b6de;
    color: #f2f2f2;
    margin: 0 6px 10px 0;
    padding: 4px 12px;
    display: inline-block;
    -webkit-transform: translate(0px, 0px) skew(-20deg, 0deg);
    -o-transform:      translate(0px, 0px) skew(-20deg, 0deg);
    -ms-transform:     translate(0px, 0px) skew(-20deg, 0deg);
    }
    </style>
    <?php
    $args = array(
        'smallest' => '15',
        'largest' => '30',
        'unit' => 'px',
        'number' => '45',
        'format' => 'flat',
        'separator' => "\n",
        'orderby' => 'name',
        'order' => 'ASC',

function pt_tag_cloud() {

.pt-tag-cloud a {

background: #50b6de;

color: #f2f2f2;

margin: 0 6px 10px 0;

padding: 4px 12px;

display: inline-block;

-webkit-transform: translate(0px, 0px) skew(-20deg, 0deg);

-o-transform: translate(0px, 0px) skew(-20deg, 0deg);

-ms-transform: translate(0px, 0px) skew(-20deg, 0deg);

}

</style>

<?php

$args = array(

'smallest' => '15',

'largest' => '30',

'unit' => 'px',

'number' => '45',

'format' => 'flat',

'separator' => "\n",

'orderby' => 'name',

'order' => 'ASC',

To make the tag cloud a bit stylish, you can add styling in a separate CSS file to make code a bit cleaner. Also, you can change it according to your need. After that, place the above chunk of code in your Theme. The following shortcode is ready to be used now:

[tag_cloud]

You can display tag cloud at your front-end posts/pages or anywhere on your website. For instance, place it on any one page of your website like this:

Displaying Tag Cloud via Shortcode in WordPress-1