change the font size in tag cloud

Question

I would like to reduce the font size in tag cloud (at least for tags with more than one hits). I was looking in css file, but couldn't find anything about font size in tag cloud. Do you know where to change? (The link is www.veda-vit.de, just in case it's needed.)

Answer 1

WordPress defines the default arguments that configure the Tag Cloud. These arguments are defined here in codex. Notice that you can specify the smallest and largest font size. By default, it's set at 22 with a unit of pt.

To change this default behavior, you will want to register a callback to the filter provided in WordPress Core.

Code

In this example, I'm changing both the smallest and largest font sizes. You will need to adjust it for your specific implementation:

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'] = '10';
    $args['largest'] = '18';

    return $args;
}

Where to Put the Code

A lot of people will tell you to add it to the theme's functions.php file. I'm not one of those people. I teach and advocate modular theme and plugin development. That means the theme's functions.php file should not be a collection point for everything.

Theme's functions.php

With that said, you could add the above code to your functions.php file if you wish.

Do the following steps:

1. Open your theme's functions.php file.
2. Scroll down to the very bottom of the file.
3. If you find a closing PHP tag element, i.e. ?>, delete it. It's not necessary.
4. Copy and paste the above code into the file (at the bottom of the file).
5. Save the file.
6. If it's on a server, then transfer it either by SSH or SFTP.

Modular Approach

I advocate a modular approach, by splitting up functionality and theme configuration into separate, distinct files that support a single purpose.

Step 1: Find the Folder

In your theme, you should a folder called lib, includes, or src. This folder is where you put custom functionality files.

Step 2: Create a New File

Within one of those folders, create a new file and call it widgets.php. Within this file, add the following code at the first line:

<?php
/**
 * Widgets functionality
 *
 * @package     YourTheme
 * @since       1.0.0
 * @author      your name
 * @link        your URL
 * @license     GPL-2+
 */

Then add the above code below it.

Step 3: Load the File

Now you need to load that file. Open up the theme's functions.php file, navigate to the end of the file, and then add the following code:

include_once( __DIR__ . '/lib/widgets.php' );

Just replace the lib with the name of the folder you put the new file into.

NOTE

The font-size is set as an inline CSS by WordPress. You can override those using the above code. It's not recommended to force it via CSS with !important. Let WordPress do its thing and just set the min and max as shown above.