wp_tag_cloud inline CSS

I am using wp_tag_cloud but my problem is the inline CSS (for the font-size). I am doing RWD so I need full control of my markup/css.

As I saw there is no property that will make it go away, so I guess I need to use another function, or the format=array. I tried using the array format but I couldn’t make the tags appear. (not a php guy).

Also please note tags need to be enclosed in elements, so no plaintext..

What are my solutions? Can I use wp_list_categories somehow?

Thank you

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;
}