PressTigers

Displaying Tag Cloud via Shortcode in WordPress

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:

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

  1. smallest: It shows the minimum font size of the tag
  2. largest: It shows the maximum font size of the tag
  3. unit: It defines the point(pt) of the font size of the tag
  4. 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”
  5. format: It shows the style in either “list”, “flat” or “array” form
  6. 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:

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

Here is an example of a Tag Cloud:

Displaying Tag Cloud via Shortcode in WordPress-2

User Comments

6 thoughts on “Displaying Tag Cloud via Shortcode in WordPress

    Booboo says:

    The code in the tutorial is cut-off; incomplete. Cannot select-all.

      Azeem Afzal says:

      Hi,

      Kindly double click on the code block or click on the tip right copy button on the code block windows and it will select the whole code for you.

      Regards,

    Pierre says:

    The code’s incomplete, and it can’t be copied even with your instructions.

      Abdul Wahab says:

      Kindly double click on the code block or click on the tip right copy button on the code block windows and it will select the whole code for you.

      Best Regards

    Albert says:

    The code’s incomplete, there’s no way to select it all. Could you provide it in full?

      Abdul Wahab says:

      Hi,

      Kindly double click on the code block or click on the tip right copy button on the code block windows and it will select the whole code for you.

      Regards

Leave a Reply

Your email address will not be published. Required fields are marked *

Get in Touch