Skip to content

[WordPress] Customize The Size and Style of The Tag Cloud

Last Updated on 2021-10-18 by Clay

The websites built with WordPress such as blog-type, tag cloud is an often widget on the sidebar, and the styles are often base on the current website theme.

But in fact, we can edit the function.php in the WordPress backend, and customize the CSS stylesheet to change the appearance of tag cloud widget.

The following briefly describes how to operate.


Edit the tag cloud appearance

I changed the website theme recently, I like this theme very much. However, I don't like the tag cloud style.

This is the type I don’t like, it always feels messy


The following is the target style I expect to modify:

This is the type I like.

In order to complete the effect in the picture above, we need to change the following two places:

  • functions.php: Unify the text size of the tag cloud
  • additional CSS: Add border and color to the tag


Step 1: Edit functions.php

We need to find this file from WordPress backend. wp-content > themes > THEME_YOU_USED > functions.php.


Edit the file and add the following code at the bottom of the functions.php file:

// Fixed the tag cloud size
add_filter( 'widget_tag_cloud_args', 'change_tag_cloud_font_sizes');
/**
 * Change the Tag Cloud's Font Sizes.
 *
 * @since 1.0.0
 *
 * @param array $args
 *
 * @return array
 */
function change_tag_cloud_font_sizes( array $args ) {
    $args['smallest'] = '12';
    $args['largest'] = '12';

    return $args;
}


Save and close after adding code.

We set the minimum and maximum font size to 12.


Step 2: Add additional CSS

Go to the WordPress wp-admin backend, select Appearance > Customize.

find the additional CSS field, set the style to be used for the tag cloud:

/* tag cloud */
.tagcloud a { 
  display: inline-block;
  margin: 2px 2px;
  padding: 1px 8px;	

  color: black;

  border-color: black;
  border-width: 2.5px;
  border-style: solid;
  border-radius: 4px;
}


In this way, We should be able to customize the tag cloud style in the WordPress.


References


Read More

Leave a Reply