wp_tag_cloud inline CSS

Question

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

Answer 1

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

Answer 2

Thank you everyone for the answers, I actually found the solution. I used wp_list_categories and declared as taxonomy the tags. I wanted a simple ul list with no inline css involved..