Customize WordPress Widget Titles

Recently, several readers have asked me how to customize their WordPress widget titles. The questions we’ll answer today include:

  • How can I add an image to my widget title?
  • How can I make my widget title two different colors?
  • How can I to add link in a widget title?
  • Can I make text widget header a link?
  • Is there a way to make a widget title clickable?

To answer the questions above, we’ll demonstrate 4 ways to customize your WordPress widget title that range from a simple CSS solution to an advanced method that involves overriding the text widget class in order to make your widget title clickable.

Background Info

By default, WordPress does not allow you to enter HTML into your widget titles. Let me back up to be a little more clear. You can enter HTML into your widget titles, but by default, WordPress will strip out all of your HTML code when you go to save your widget settings.

Take a look at the image below to see four variations of the widget title to give you an idea as to what customizations are possible using the four methods we’re about to cover.

WordPress Widget Titles

Custom WordPress Widget Title – Method 1

WordPress Widget Title Example 1

The first customization (shown above) is the easiest of all four methods. By simply using CSS, you can make numerous design tweaks to your widget title.

CSS Code

The CSS code below is what was used on an older website of ours running WordPress and the Genesis Framework. Your specific class name and/or selector might be different.

Unfortunately, this particular method will not allow you to make a widget title a hyperlink or make it clickable. You need to skip down to method 4 if you want to learn how to make your widget title clickable.

Custom WordPress Widget Title – Method 2

widget titles

The technique shown below is what I’m currently using on this website. For users of the Genesis Framework, simply copy the code below and paste it into your theme’s functions.php file or a functionality plugin.

This customization is really easy and quick to implement. Take note however that it encompasses everything (every word in the H4 tag) into the “SPAN” tag.

Some people have asked how to put only the first word into a <SPAN> tag. Well, that’s easy too and it’s our third tutorial on how to customize the WordPress widget title.

Custom WordPress Widget Title – Method 3

custom wordpress widget title

As seen in the image above, our third method demonstrates how to wrap the first word of a WordPress widget title into a <SPAN> tag.

To accomplish this customization, you need to add a filter and a custom function into your theme’s functions.php file or functionality plugin. This can be used for all users of WordPress and those using the Genesis Framework.

Source Code

Now go to your widget of choice and simply enter two or more words and the first word will be wrapped in a <SPAN> tag using your style defined in the CSS.

This method gives you a little more control over the styling of your widget title by allowing you to customize the first word. But what if you want to put any HTML you wanted into the widget title? Keep reading as method #4 does just that!

Custom WordPress Widget Title – Method 4

custom wordpress widget title

This is by far the most difficult yet robust method in order to customize your WordPress widget title. Using this technique, you can enter HTML directly into the title of your widget. You can make your text widget header a link which will of course make it clickable.

WordPress core is using the Php function strip_tags() before saving the widget title contents into the database. This causes your HTML or any Php code to be stripped away from the widget title.

Since I haven’t been able to locate a filter to use in the functions.php file that would allow us to save HTML into the widget title, the method we’ll use involves overriding the standard text widget plugin. This method is going to be upgrade safe and called from our theme’s functions.php file. We’re only covering the “text widget” for our example but these steps can be duplicated for any other widget you want to override.

STOP! The example below should only be performed by WordPress developers with advanced programming knowledge. Proceed at your own risk.

UPDATE: March 4, 2014 – I’ve removed step #4. As mentioned above it’s an advanced feature that should only be done by developers with advanced knowledge of Php and WordPress. The code I used to have was inspired by a post by Michael Tracey. Clicking that link will take you to Michael’s tutorial that demonstrates using HTML in your widget titles.

If you want to go the plugin route, try the plugin named Linkable Title Html and Php Widget. It’s a WordPress plugin that allows Text, HTML, Javascript, Flash and/or Php as content with linkable/clickable widget title. I have not used the plugin, therefore cannot speak to its reliability.

Comments

    • Rick R. Duncan says

      Hi Тит,

      Take a look at Method 2 again and give it a try. I’ve changed the code and it’s what I’m using on my website so it should be working fine. Let me know.

      -rick

  1. Belén says

    Hello Rick,

    I’ve been doing exactly what you explained above, and I got this error when trying to edit one old post I already posted (and actually I got it when trying to modify whatever from posts):

    “Cannot modify header information – headers already sent by …(my-routes)…/post.php and …(my-routes)…/pluggable.php”

    I tried to fix that error, but no success at all and I gave up installing one WP plugin… baaaad, haha.

    Have you ever faced this type of error?

  2. Tim S. says

    Hey,

    thanks for your tutorial. I tried method 4 today.

    Because there was no specific instruction where to put our self created file “custom_widgets.php”, I placed it into /wp-includes folder. And of course changed the functions.php. Unfortunately I still cannot use images in my widget headers. Did i place the file into the wrong folder?

    Tim

    • Rick R. Duncan says

      Hey Tim,

      Place the file custom_widgets.php into your child theme directory. I’ll update the tutorial to mention it.

      -rd

      • Tim S. says

        Hey Rick,

        thanks for your quick answer. I put the file now in the right place. And it seems to work most of the time. Some widgets still don’t accept HTML in their title. But that’s okay, I just put an empty widget with my desired title above the ones that are not working.

        • Rick R. Duncan says

          Hey Tim,

          The sample code should work 100% of the time on text widgets but no other widget. The example code only covered text widgets and if you wanted to use it on say a ‘Recent Posts’ widget then you would need to override that class too. It would be a lot of work to override all of the included widgets. Let me know if for some reason it’s not working 100% of the time on your standard ‘text widget’ in WordPress.

          Thanks,
          -rd

        • Tim S. says

          Thanks for your help, Rick.
          It’s working fine on the text widget! And if not I will let you know ;-)

          -Tim

  3. Tim says

    I’m trying method #4 (I’m always wanting br and span tags in titles), but am not seeing the Step 2 snippet to add to the functions.php file. What am I missing?

    Thanks for this tutorial!

  4. Tim says

    I attempted to call the custom_widgets.php with a require_once call in functions.php, but that’s not working….

    Note that I’m using the manual method of replacing lines, rather than the whole big file you provided, because I wasn’t sure what you were doing with the recent_posts section in the latter.

    • Tim says

      I’ve now tried it with your full script too. Can’t get it to work either way. I’m assuming the include call isn’t working….

      • Rick R. Duncan says

        Hey Tim,

        I’ve removed step 4 from the tutorial. It’s a very difficult task to accomplish. I’ve made reference in the tutorial to the original creator of the code I tweaked to add HTML into the widget title. Maybe his tutorial will help you accomplish your goal. I also referenced a plugin that allows HTML, links and more into a widget title. Good luck!

        -rick

  5. Tim says

    Thanks, Rick. I had already tried that widget. So far as I can tell, it doesn’t work for adding span tags; they still get stripped out. I’ll take a look at Michael Tracey’s article.

    I may end up just making the title blank and putting my HTML code for the heading in the body, since that doesn’t get stripped out. But I wanted something a bit more user friendly for end users.

  6. Tim says

    Well, I ended up playing around with Michael Tracey’s code, then incorporating his changes into a mod of Boston Dell-Vandenberg’s Enhanced Text Widget. I did have to do some cheating for the tags to function as such rather than as unencoded characters, though. But as of now, I have a working plugin/widget that allows br and span tags in the title. Thanks for pointing in the right direction!

    • Rick R. Duncan says

      Hey Tim,

      Happy to hear that you got a working solution. It’s definitely a tough nut to crack in getting HTML code into a widget title. Not sure why core doesn’t make it easier to allow HTML tags.

      -rd

  7. says

    Hi Rick
    How can I add different icons to my (3 different ) widgets? I need 3 icons: a clock, a man, a map…
    I can see on your website http://www.rickrduncan.com/about you have Recent Articles, WordPress Tutorial, Site Search but you have the same icons.
    .widgettitle span { give me the same icon 3 times.

    I used this:
    function widget_title_as_class($title) {
    return ” . $title . ”;
    }
    add_filter(‘widget_title’, ‘widget_title_as_class’);

    but I have got 2 times h4

    ÅBNINGSTIDER

    thanks

    • Rick R. Duncan says

      The easiest way is to simply target the widget using CSS. It’s a hard-coded solution but it will work. Simply find the specific element (look at my search widget) and notice that your could target #search-3.widgettitle in CSS and simply add a background image to that.

      -rd

Leave a Reply

Your email address will not be published. Required fields are marked *