This simple jQuery script adds images to individual tags in the WordPress tag cloud (wp_tag_cloud) and allows you to style the cloud without modifying WordPress core functions. The image sizes correspond to the font sizes assigned by the tag cloud function.
jQuery(function() {
var imagesize;
var alttxt;
var linkhref;
jQuery('a[class^="tag-link-"]').each(function() {
imagesize = jQuery(this).css('font-size');
alttxt = jQuery(this).text();
linkhref = jQuery(this).attr('href');
jQuery(this).before(
'<a title="tag: ' +alttxt+ '" href="' +linkhref+ '">
<img src="path/to/your/image" class="tagcloudimage"
style="width:'+imagesize+';height:'+imagesize+';"
alt="'+alttxt+' icon" /></a>'
);
});
});
The script starts by defining variables, then targets tag cloud links with class names beginning with tag-link- (followed by the tag ID). Using jQuery’s .each() method, it iterates over each matched element.
For each tag link, the script extracts the font size, visible link text, and URL from the href attribute. It then injects new HTML before the link—creating an image link populated with these values.
This function can be easily extended to customize the tag cloud’s appearance further—for example, by adjusting text color based on size. For best results, place the script at the footer of your page (after the tag cloud).
