wp_tag_cloud inline CSS

Add a filter for the tag cloud in your functions.php:

add_filter( 'wp_tag_cloud', 'wpse_50242_unstyled_tag_cloud' );

/**
 * Change tag cloud inline style to CSS classes.
 *
 * @param  string $tags
 * @return string
 */
function wpse_50242_unstyled_tag_cloud( $tags )
{
    return preg_replace(
        "~ style="font-size: (\d+)pt;"~",
        ' class="tag-cloud-size-\1"',
        $tags
    );
}

In your template you call the tag cloud like this:

wp_tag_cloud(
    array (
        'format' => 'list'
    )
);

Now all inline styles are converted to CSS classes.

Before:

<li><a href="http://wp.dev/tag/doolie" class="tag-link-22" title="1 topic" style="font-size: 8pt;">doolie</a></li>

After:

<li><a href="http://wp.dev/tag/doolie" class="tag-link-22" title="1 topic" class="tag-cloud-size-8">doolie</a></li>

In your style sheet you format the tags with:

.tag-cloud-size-8
{
    font-size: .8em;
}
.tag-cloud-size-10
{
    font-size: 1em;
}
.tag-cloud-size-12
{
    font-size: 1.2em;
}

Leave a Comment