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.

The article Customize WordPress Widget Titles was published and first appeared on RickRDuncan.com. It was last updated .
Need Help?
If you couldn't quite manage this yourself, find it too intimidating, or simply don't have the time to do it, you can hire me to get the job done. Please contact me so that we can discuss your needs.