chaotic.signal
I'm now on tumblr, check out my random, v4nt0m.tumblr.com.
Adding HTML/Image to widget titles in WordPress Add to Facebook Share on Twitter

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.

Views 17,511
QR Code
  1. coreythepup
    Aug 22nd, 2011 at 02:39 | #1

    Hi!  Thank you so much for this tip.  I have managed to make it work except for one problem:  I get the same image in the title of all of my widgets and I’m hoping for different ones.  I’m not sure how to write the code so that I can have a new image in the next widget.  Can you advise?  Or post how the code should look for two different widget titles?  I really appreciate your help!

  2. May 8th, 2011 at 13:12 | #2

    Hi. great idea. But do i get this wrong or does it only work for images. If I want to add Html (I need to use language tags for a multilingual site) this would not work, since it applies all predefined html to all widgets, right? Thanks..

  3. Septima Studios
    Oct 18th, 2010 at 06:59 | #3

    i’m wondering if this is possible with multiple instances of the same widget. For instance, i’m using a standard text widget three times on the home page. However i want to use three different icons for each widget. like so:
     
    <div class=”home_widgets”>
    <div class=”widget widget_text”><h3>Recording</h3>

    Any ideas?

    exhaciendalapetaca.com/blog

  4. May 7th, 2010 at 15:58 | #4

    @Daniele

    In my example the images should be in the root directory of the website, if you want to change is just put something before the slash like this:

    /directory/%2$s.png

  5. Daniele
    May 7th, 2010 at 14:41 | #5

    Hi,
    you wrote a very interesting article.
    I don’t understand where I have to upload images for the logo. In which directory?
    Thanks a lot

  6. Mar 31st, 2010 at 02:44 | #6

    I’m not sure how to do it PHP wise, but in the same part of the functions.php file above just use the “before_title” and “after_title” tags to wrap the title in a span/div and use style=”display:none” to hide it.

    In the above example I would do this:

    ‘before_title’ => ‘ <h2 class=”widgettitle” style=”display:none”>’,

  7. Mar 30th, 2010 at 14:28 | #7

    Any thoughts on a process to hide widget titles on the frontend, but keep them on the backend? Why? See here please:
    http://wordpress.org/support/topic/381986?replies=1

  8. Mar 17th, 2010 at 16:00 | #8

    I might look into removing the code that scrubs the HTML, but for me there is no need as this works perfectly for my purposes :)

  9. Mar 17th, 2010 at 14:41 | #9

    This is a great idea and I am going to try it but it still seems to me the easiest solution would to be to just change the title field to accept html. I guess this must be more complicated though. I have been trying to figure that out and still haven’t found an answer.

Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Last modified: March 16, 2010 @ 9:37 pm