Enable HTML code in WordPress Widget Titles

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 Facebook Plugin

Would you like to add Facebook comments, registration, 'Like' buttons and autoposting to your WP site? Well, The Ultimate Facebook plugin has got that all covered!
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 Infinite SEO Plugin

Fully integrated with the SEOMoz API, complete with automatic links, sitemaps and SEO optimization of your WordPress setup - this is the only plugin you need to help you rank your site number 1 on Google - nothing else compares.
Find out more

Credit: Widget U image by Kurt Thomas Hunt

Comments (12)

  1. 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!

  2. 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.

  3. Simple and much more flexible version that lets you use standard html tags except you use [ ] instead of .

    function html_widget_title( $title ) {
    //HTML tag opening/closing brackets
    $title = str_replace( ‘[', '', $title );
    $title = str_replace( '"','"', $title);
    $title = str_replace( ''',"'", $title);
    return $title;
    }
    add_filter( 'widget_title', 'html_widget_title' );

    Example:

    [br /]
    [span]Test[/span]
    [span class="red"]Test[/span]

  4. Add single quotes:

    function html_widget_title( $title ) {
    //HTML tag opening/closing brackets
    $title = str_replace( ‘[', '', $title );
    $title = str_replace( '"','"', $title);
    $title = str_replace( ''',"'", $title);
    return $title;
    }
    add_filter( 'widget_title', 'html_widget_title' );

    Example:
    [SPAN style="font-size:10px;font-weight:700" CLASS='darkred']HTML[br /]Test[/span]

  5. Add single quotes for real:

    function html_widget_title( $title ) {
    //HTML tag opening/closing brackets
    $title = str_replace( ‘[', '', $title );
    $title = str_replace( '"','"', $title);
    $title = str_replace( ''',"'", $title);
    return $title;
    }
    add_filter( 'widget_title', 'html_widget_title' );

    Example:
    [SPAN style="font-size:10px;font-weight:700" CLASS='darkred']HTML[br /]Test[/span]

  6. One more try. Single Quotes:
    function html_widget_title( $title ) {
    //HTML tag opening/closing brackets
    $title = str_replace( ‘[‘, ”, $title );
    $title = str_replace( ‘"’,’”‘, $title);
    $title = str_replace( ‘'’,”‘”, $title);
    return $title;
    }
    add_filter( ‘widget_title’, ‘html_widget_title’ );

  7. Sorry for the repetitive post. It seems that you have to trick the post tool also.

    Substitute below:

    function html_widget_title( $title ) {
    $title = str_replace( ‘[‘, ”, $title );
    $title = str_replace( ‘&quot;’,’”‘, $title);
    $title = str_replace( ‘'’,”‘”, $title);
    return $title;
    }
    add_filter( ‘widget_title’, ‘html_widget_title’ );

  8. This posting tool seems to have a confused mind.

    Basically it strips and removes tags as well even if they are not html. Here it is.

    function html_widget_title( $title ) {
    //HTML tag opening/closing brackets
    $title = str_replace( ‘[', '<', $title );
    $title = str_replace( ']‘, ‘>’, $title );
    $title = str_replace( ‘&quot;’,’”‘, $title);
    $title = str_replace( ‘&#039;’,”‘”, $title);
    return $title;
    }
    add_filter( ‘widget_title’, ‘html_widget_title’ );

  9. I was able to change the title of the post loop, but does not change the title of plugin Masonry Widget.

    Both are with Masonry Widget widget-title, but does not change.

    Can you help me?

Participate