Tutorials

Enable HTML code in WordPress Widget Titles

by 5 Responses

WordPress widgets don’t allow HTML code by default. With the snippet below, you’ll be able to use basic HTML styling tags (even span tags) in WordPress widget titles. Put it in your functions.php file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

function html_widget_title( $title ) {
//HTML tag opening/closing brackets
$title = str_replace( '[', '<', $title );
$title = str_replace( '[/', '</', $title );
// bold -- changed from 's' to 'strong' because of strikethrough code
$title = str_replace( 'strong]', 'strong>', $title );
$title = str_replace( 'b]', 'b>', $title );
// italic
$title = str_replace( 'em]', 'em>', $title );
$title = str_replace( 'i]', 'i>', $title );
// underline
// $title = str_replace( 'u]', 'u>', $title ); // could use this, but it is deprecated so use the following instead
$title = str_replace( '<u]', '<span style="text-decoration:underline;">', $title );
$title = str_replace( '</u]', '</span>', $title );
// superscript
$title = str_replace( 'sup]', 'sup>', $title );
// subscript
$title = str_replace( 'sub]', 'sub>', $title );
// del
$title = str_replace( 'del]', 'del>', $title ); // del is like strike except it is not deprecated, but strike has wider browser support -- you might want to replace the following 'strike' section to replace all with 'del' instead
// strikethrough or <s></s>
$title = str_replace( 'strike]', 'strike>', $title );
$title = str_replace( 's]', 'strike>', $title ); // <s></s> was deprecated earlier than so we will convert it
$title = str_replace( 'strikethrough]', 'strike>', $title ); // just in case you forget that it is 'strike', not 'strikethrough'
// tt
$title = str_replace( 'tt]', 'tt>', $title ); // Will not look different in some themes, like Twenty Eleven -- FYI: http://reference.sitepoint.com/html/tt
// marquee
$title = str_replace( 'marquee]', 'marquee>', $title );
// blink
$title = str_replace( 'blink]', 'blink>', $title ); // only Firefox and Opera support this tag
// wtitle1 (to be styled in style.css using .wtitle1 class)
$title = str_replace( '<wtitle1]', '<span class="wtitle1">', $title );
$title = str_replace( '</wtitle1]', '</span>', $title );
// wtitle2 (to be styled in style.css using .wtitle2 class)
$title = str_replace( '<wtitle2]', '<span class="wtitle2">', $title );
$title = str_replace( '</wtitle2]', '</span>', $title );

return $title;
}
add_filter( 'widget_title', 'html_widget_title' );

My snippet above is a modified and expanded version of the one I found on WP-Snippets.com. Notice the option for span tags (last 2 in the snippet), which you could wrangle with your theme’s style.css.

Featured Plugin - WordPress Q&A Site Plugin

It's now incredibly easy to start your own Q&A site using nothing more than WordPress - The Q&A plugin simply and brilliantly transforms any site, or page, into a perfect support or Q&A environment.
Find out more
A screenshot showing all the options on Twenty Eleven theme

The title text I used for each widget shown above can be viewed here: http://pastie.org/4763435

Here’s the CSS code used in the screenshot for the colored span widget titles (in Twenty Eleven’s style.css):

1
2

.wtitle1 {color:blue;}
.wtitle2 {font-family:"Times New Roman", Times, serif; color:green;}

Best practice is to use a child theme for your theme customizations, including functions.php and style.css.

In case you weren’t sure, you can use full HTML (no snippet needed) in a WordPress text widget, just not in any widget titles.

Featured Plugin - WordPress Appointments Plugin

Take, set and manage appointments and client bookings without having to leave WordPress. Appointments+ makes it easy.
Find out more

Credit: Widget U image by Kurt Thomas Hunt

Tags , , , ,

Comments (5)

  2. Nice, but it’d be helpful you gave examples of what is actually typed into the title field for a widget in order to make use of the span/wtitle1 code. Also, I think you have stray closing span tags in the PHP code example that will throw errors in a compiler. :)

    • Rone, you’re right. There was a nasty copy/paste bug or something, and great idea for showing what I actually put in each widget’s title. I’ve corrected the post’s code section and added another section of what I used for each widget title’s title. Let me know if this is what you were looking for. Thanks!

  3. This is just what I need. I am starting out a new site and I have brief experience with wordpress and its plugins. What puzzles is that for those times I cannot change how the titles of my post look. I tried placing html but it does not work. Thank goodness I cam across with this post. Great post! Informative one.

Participate