Thought I would share this with the world I know a few people have the same question I had “How do I add dynamic image/HTML content to a widget title”, it took me a little while to figure out, most likely if I was thinking straight I could have figured it out a lot quicker. Also please note that I am not a PHP expert or claim to know the “best” ways of doing things, this worked for me but there may be other ways to do it.

You may notice that when you try to add HTML in your widget titles that it automatically scrubs it out and leaves you with plain text, nice and intelligent but not very friendly to advanced users. To add some custom HTML or in my case an image that changes based on the widget you have to open up your theme’s functions.php file or if your theme doesn’t have one the widgets.php wich resides in wp-includes.

Now all you have to do is find the right code, do a search for “before_widget” and you should see an array like this:

/** widgets */
$options = get_option(‘blocks_options’);

if(function_exists(‘register_sidebar’) && $options[‘sidebar’] == 1) {
register_sidebar(array(
‘name’ => ‘Sidebar_single’,
‘before_widget’ => ‘<div id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘ <h2 class=”widgettitle”>’,
‘after_title’ => ‘</h2>’,
));

}

It may look a little different to this for you but the main thing you’re looking at is what’s in the before_widget and before_title fields, “%2$s” is used by WordPress to insert the class type for the widget div, this is unique and will be different for each widget, this will be our dynamic code allowing us to insert a different image into each of the widgets. Sadly we cannot insert “%2$s” straight into the before_title field because it will not work there however all we have to do is truncate what’s inside the before_title field into the before_widget field like so:

‘before_widget’ => ‘<div id=”%1$s” class=”widget %2$s”><h2>’,
‘before_title’ => ‘  ‘,

Now all we have to do is add our dynamic image like so:

‘before_widget’ => ‘<div id=”%1$s” class=”widget %2$s”><h2><img src=”/%2$s.png”>’,

That’s basically it for the code editing, you can close and upload the file. Note that this is just a simple image tag, if you want the image to be aligned or a certain size just add those declarations as normal.

Now comes the “clever” part, we have to make sure there is an image for the tag to load, the image name is now the same as the widget class, you need to find out what each widget will be called. I did this by looking at the HTML source of my homepage url and seeing what was output in the class= portion of the code. For example I searched the source code for “Tag Cloud” and in the <div> that preceded the title of the Tag Cloud widget the class read class=”widget widget_tag_cloud”, so we can see that %2$s is translated into “widget_tag_cloud”

So now I know what to call my image: “widget_tag_cloud.png”. I did this for every widget I had displayed and uploaded my images and voilà each of my widgets had a nice little icon before each. If you have any questions please don’t hesitate to comment below.