How to customize WordPress Tag Cloud Widget

A tag cloud is a list of all tags /categories on your site. Including a Tag cloud in your website helps your readers to discover and search content easily and quickly.  WordPress has a default Tag Cloud widget which you can add to your WordPress website. The default WordPress Tag Cloud block displays each tag with the font size based on the number of times that tag has been associated with posts. The bigger the size, the more posts are tagged with that tag. This helps your readers know your favorite subjects and the topics you write about more frequently.

The default WordPress Tag Cloud widget serves the purpose. However, the look is a bit boring. And you may want to display equal font size for all the tags instead of the default bigger font size and smaller font size depending on the frequency of posts associated with the tags. You may also want to add some colours, make it more vibrant. If so, you need to customize WordPress Tag Cloud Widget.

In this post we will see how to customize WordPress Tag Cloud Widget.

How to add the WordPress Tag Cloud Widget to your WordPress website

If you want to include a tag cloud widget to your WordPress website then follow the steps below.

• Log into your WordPress website and navigate to appearance and click on widgets.
• In the widgets available on the left hand side, you should be able to see the WordPress tag cloud widget.
• Click on the tag cloud widget and select a region where you want to insert the tag cloud widget, and click on Add Widget.
• The widget will be added to the region you selected. You can drag and move the widget above or below other widgets (if exists) within the region.
• You can further customize it such as add title to the widget, select tags or categories to show.
• Select “Show Tag Count” if you want to show count of posts next to the tags. Eg. WordPress (10), Computer Tips (17) etc.
• If you have installed Widget Options, then you can also further customize where to show or hide the tag cloud widget.
• Once you’re done click save.

After adding the widget, you can view your website and confirm that the tag cloud widget has been added to the area you intended.

The Tag Cloud widget you added will look something like this depending on your theme .

If you are happy with the Tag Cloud widget look, that you can settle it here. Otherwise, you can customize it further using some CSS.

How to customize WordPress Tag Cloud Widget manually using CSS

There are plugins available for a custom WordPress Tag Cloud (see next section). But if you do not wish to install a plugin just for this purpose, then you can definitely customize the Tag Cloud manually using CSS styling. Now, there could be various ways to customize the WordPress Tech Cloud Widget but in this case we will see some basic customization only to change the look and feel of the tag cloud widget in WordPress using CSS.

If you are familiar with using INSPECT tool in your browser, then you can actually select the Tag Cloud element’s ID or Class and add some CSS code in the INSPECT window and see live changes. To do that in FireFox browser, right-click on a particular tag, and then click on INSPECT from the context menu. The Inspect tool will open at the bottom of the screen. Here you can see the HTML element, the class or the ID and the CSS code associated with it.

As we can see in the screenshot below, the tags have <a> element and the class is “.tag-cloud-link”. And the parent HTML element right above it is a DIV with class “.tagcloud”. You can click on the + sign and add some CSS code to see live changes on your website. However, the work you do in the browser’s INSPECT tool does not really make any changes to the website. So,once you are satisfied with the changes, you can copy  the code and put it in your website to take effect.

For example, to get the look like the one displayed below, you can add the following CSS code to your WordPress website.

If you want you can change the values for the attributes such as increase or decrease the font size, change the colors, padding, border etc.

Where to place the CSS code?

You can place the CSS code in the Advanced CSS under Theme’s Customizer or  Theme’s style.css file .

Advanced CSS under Theme’s Customizer:

• Copy the above code
• Navigate to Appearance > Customize > Additional CSS
• Paste the code at the end or anywhere you like after } if there are other code in it.
• Click Publish

Alternatively, you can also place the CSS code in the Theme’s style.css file.

• Copy the above code
• Navigate to Appearance > Theme File Editor > Select the Theme or Child Theme*
  (Always use Child theme as changes done in main theme may be lost if the Theme is updated. If you don’t know how to create a Child Theme for a WordPress Theme, see How to create a WordPress Child Theme.
• Click on the style.css from the right side menu.
• Paste the code at the end or anywhere you like after } if there are other code in it.
• Click Update File

You can now refresh your website and see the tag cloud widget changes done.

You can do more customization to the tag cloud by adding more CSS styling.

Plugins for customize WordPress Tag Cloud Widget

If you do not want to go through the hassle of customizing the WordPress Tag Cloud widget, then you can also use some plugins available for tag clouds such as “Cool Tag Cloud” WordPress Plugin. You can try  out and see if it fits your requirements.

The plugin renders a tag cloud using a professionally designed tag image as a background. It is responsive and you can also use shortcode [cool_tag_cloud] to display the tag cloud anywhere where shortcodes are supported.

Cool Tag Cloud

 

If this plugin does not meet your needs, then there are more plugins for Tag Cloud. You can click on PLUGINS > ADD NEW > Search for “Tag Cloud” to find more such plugins. Try them out and see if the plugins meet your requirements.

 

 

# WordPress Tag Cloud Widget
# WordPress Tag Cloud Plugin
# Customize WordPress Tag Cloud widget