How to use HTML in WordPress’s widget’s title

So, you want to use HTML here, kid?

One solution is to use plugins for each standard widget you want to replace. You’ll end up with a replacement widget for each of the standard widgets, which includes the text widget, related posts widget, search widget, etc… Then you’ll have to either tell your less-technical user base, “Don’t use the standard widgets, use these special ones”, and hope they will remember, or find a spiffy way of hiding some of the standard WordPress widgets. And, if you find a replacement for each one, you’ll have to upgrade them all constantly.

In this article we will explain the other, better, solution, overriding the standard plugins with our own copy. We’ll keep our copy in the theme directory, next to the functions.php, so it’ll be upgrade safe, and call it from our functions.php. We’ll use the text widget as our example there, but this can be duplicated for each widget you want to override.

Step One: Create the custom_widgets.php file

Since we are going to be copying chunks of the default-widget.php file and editing, we’ll store this in a separate file instead of in the functions.php. Open your wp-includes/default-widgets.php and find the entire class, starting with:

[php] class WP_Widget_Text extends WP_Widget { [/php]

and copy it into your file.

Now rename the class, by changing the class declaration to:

[php]class WP_Widget_Text_Custom extends WP_Widget_Text {[/php]

Step Two: Link to your file

in your functions.php file, we are going to tell WordPress to use our code instead of the default widget code:
[php]
if (include(‘custom_widgets.php’)){
add_action("widgets_init", "load_custom_widgets");
}
function load_custom_widgets() {
unregister_widget("WP_Widget_Text");
register_widget("WP_Widget_Text_Custom");
}
[/php]

Ok, so if we find our special file and load it, we then can run our special function, which removes the text widget with unregister_widget(), and then loads our widget instead. Since we didn’t edit the internal class declarations, our code will replace the text widget in the admin.

Step Three: Edit the custom_widgets.php file to suit

Now, we’ve got a new version of the default widget, we can edit it to suit our needs. In our case, we want to allow HTML in the title. For the text widget, we’ll find the lines where they are stripping HTML. In the class’s update function, find this line:

[php]$instance[‘title’] = strip_tags($new_instance[‘title’]);[/php]

and remove the php call that strips the HTML. Your replacement line should look something like this:

[php]
if (current_user_can(‘unfiltered_html’)){
$instance[‘title’] = $new_instance[‘title’];
}
else {
strip_tags($new_instance[‘title’]);
}
[/php]

Notice I put a security check in to make sure that the user is actually allowed to post with unfiltered html.

Also, in the forms function of our widget class, you’ll see that, before echoing to the screen the text, the code also once again strips the HTML out of the item:

[php]$title = strip_tags($instance[‘title’]);[/php]

Change this one to:

[php]$title = $instance[‘title’][/php]

If you don’t do this you’ll find that while you’ll store the correct data in the WP database, the admin widget edit form will not show you the HTML that you entered in the widget after saving.

Summary

So, using the built-in text widget as an example, you see how we can override any of the wordpress core widgets to add features in your theme. These changes will be upgrade safe, unlike editing the wp-includes/default-widget.php file, and will not clutter your admin with many new types of widgets that may or may not provide the functionality you are after.

One caveat to mention, while your code will be upgrade safe, if the WordPress crew comes out with a security patch that changes the functions in the default-widget.php file, you’ll have to edit your version of the functions in your custom file, so that you get the benefits of the security patch. All the WP releases mention the files that are changed from the previous version in the changelog.