I really like the Metro theme from StudioPress. Recently I was working on the third WordPress site I’ve built with Metro and ran into a small problem. Widget titles for the widgets provided by a certain plugin were printing (displaying) HTML span tags wrapped around the widget title text, as you can see in the screenshot below.
Why is this happening?
Obviously this isn’t a good thing, so I went digging into the code to see why this is happening.
The Metro theme does something kind of cool with its widget titles. Normally they have a diagonal background pattern with some white space behind the widget title text so you can read the title more easily. This is accomplished with a filter found in the theme’s
functions.php file, which you can see in the Gist below.
What that code does is get the widget title, if there is one, filter it to add the span tags along with the
widget-headline class, and then return it to WordPress to be displayed on the website. Then that class is styled in
style.css to achieve the desired effect.
As you probably know, some plugins include widgets to be used on your website. Some of those plugins include code that manipulates their widget titles, and in the process they sanitize the data by escaping any HTML included in the widget titles, including both harmless and potentially harmful code. This is a good thing from a security perspective, and not something you want to change.
The problem is that this happens after the theme’s
functions.php code is run, and so the span tags included by the theme are escaped and then rendered as plain text on the front end of your website. That doesn’t look good, and it also prevents the CSS from doing what it needs to do for those particular widget titles.
I was wondering if anyone else using the Metro theme had run into this issue so I searched the StudioPress forum and found that this is more common than you might expect, but no one had posted a solution yet.
I tried a few different ways to fix this, and then I found a post by Travis Smith called How to Filter the Genesis Sidebar Defaults. In that post he explains why trying to fix this in
functions.php won’t work, and that this needs to be handled by a plugin.
I use a core functionality plugin in the mu-plugins directory on all my websites, and so, inspired by Travis’s post, I worked up and added some code to that plugin that solved the problem, after removing the filter from
Then I wondered if there was a way to write a plugin that would fix this issue just by installing and activating the plugin, without needing to edit the code in
functions.php. So I wrote a plugin called Metro Theme Widget Titles, submitted the plugin to WordPress, and you can now download it from the WordPress Plugin Directory or install it directly from within your Plugins menu in your website admin.
If you’re interested in seeing how this works, here’s a Gist that displays the code for the plugin.
Let me know if you found this to be helpful, and if you have any suggestions for improving this plugin/code, I’d like to hear that too.