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.
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.
Custom WordPress Widget Title – Method 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.
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
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
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.
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
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.
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.