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.
The following is the target style I expect to modify:
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
- https://www.byperth.com/2015/11/29/wordpress-tag-cloud-widget/
- https://wordpress.org/support/topic/tag-cloud-style-2/
- https://stackoverflow.com/questions/40811909/change-the-font-size-in-tag-cloud