How to Add HTML to WordPress Widget Title

I was looking for a way to add Font Awesome icons before the titles of the widgets from my footer’s website. After checking some plugins, I still couldn’t achieve a proper way to add HTML code in the WordPress Widget Titles as the CMS strips these tags on updating the widget. Some solutions work, but I also needed to have the quotes (either single or double ones) not stripped.

What are WordPress Widgets?

WordPress Widgets add content and features to your Sidebars and other Widget Areas. Examples are the default widgets that come with WordPress; for post categories, tag clouds, navigation, search, etc. Plugins will often add their own widgets.

I ended up writing my own function that takes some shortcode-like codes and transforms them into HTML code. Basically, code between [h] and [/h2] will be parsed into HTML by replacing [, ] and @ with <, > and "

Examples:

• [h][em][/h]Latest Posts[h][em][/h] becomes <em>Latest posts</em>
• [h] [i class=@fa fa-info-circle@][/i] [/h] About becomes <i class="fa fa-info-circle"></i> About

The solution I’m using strips @, [ and ] only if they are between [h2] and [/h2] so you can use these characters if you want in the title. In the unlikely situation that you will want to use something else besides [h] (no one ever knows, as developers we often think of everything), then you can use another way to surround the HTML such as [uniquedel] and [/uniquedel] etc. I’ve chosen mine because it’s really short and it’s better for readability if the title gets bigger.

Here’s the code that should be added to functions.php that is located within your active theme’s root folder (we’ll go through it below so you can understand how it works):

/*
Purpose: Add HTML to Widget Title
Source: http://www.bitrepository.com/add-html-to-wordpress-widget-title.html
*/
function bit_widget_title($title) {
    // Replace [ ] @ with < > " - only if they are between [h] and [/h]
    $start = '[h]';
    $end = '[/h]';
        
    return preg_replace_callback(
        '#('.preg_quote($start).')(.*?)('.preg_quote($end).')#si',
        function ($matches) {
            return str_replace(array('[',']','@'), array('<', '>', '"'), $matches[2]);
        },
        $title
    );
}

add_filter('widget_title', 'bit_widget_title', 10);

How is this code working?

We’re hooking the function ‘bit_widget_title’ to the ‘widget_title’ filter action, thus the value of title will be parsed and shown in the front-end.

The 1st parameter is the filter action, the 2nd represents the callback function that is hooked while the 3rd is the priority stands for the order in which the functions associated with this action are executed (lower numbers correspond to earlier execution). You can modify it to your needs in case you have other functions attached to this filter. For more information about this WordPress function, check add_filter Codex documentation page.

The variables $start and $end are the delimiters that are used to parse the code within. Everything between [h] and [/h] will be processed to our needs.

Let’s use the powerful regular expressions to accomplish our goal. We’re using preg_replace_callback() that as its name suggests will use a callback function to do the replacement.

Anything between $start and $end (note the use of preg_quote() – this means [ and ] do not have any special meaning to the regular expression, it’s just taken as a string) will be parsed in the callback function which replaces [ ] and @ with <> and ” accordingly. $matches contains an array with everything the regular expression found. We’re only returning the value between $start and $end (these are stripped obviously).

I hope this snipper helped you in accomplishing your goal of adding basic HTML to WordPress Widget Title. I believe it’s much better than installing a plugin for this purpose which might not even work the way you want.