By 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.
Gist – Add span class to widget headlines
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.
Plugin conflicts
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.
The solution
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 functions.php.
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.
The code
If you’re interested in seeing how this works, here’s a Gist that displays the code for the plugin.
Gist – Metro Theme Widget Titles 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.
Thank you for this! Trying to do a quick makeover for a friend–Metro seemed to suit, but this very issue was definitely causing me issues. Plugin works like a charm.
You’re welcome, Robin! Glad to hear that it’s working!
John
Thanks so much for making an *easy* solution to this! What I was reading to fix it was a little over my head!
You’re welcome Katie!
I think I am seeing the same issue with MetroPro that the plugin is meant to fix for Metro. Even when the plugin is activated some of the MetroPro widget titles are borked. Do you know, does the plugin work with MetroPro and Genesis 2.0?
Hey Marc, haven’t tested it yet on Metro Pro, though it does work with Genesis 2.0 and the old Metro. I did notice that they changed the style of the widget titles in the Pro version, and I thought that was meant to be a work-around to the previous issue.
Testing it with Metro Pro and making any necessary updates are on my short list of things to do, and this will push this task up to the top of that list.
I’ll post an update here when that happens.
John
Marc,
The updated Metro Theme Widget Titles plugin is now up on WordPress.org. If you’re running Metro Pro it should restore the widget titles to the original Metro look. If you try it I’d love to know whether it works for you or not…
John
Terrific piece of work! The plugin works very nicely, indeed!
Excellent! Glad to hear it!
Would you be willing to make this plugin for other Genesis child themes? I’m using Inspyr and the latest version of Jetpack has caused the span tags to appear on the subscription widget title. It’s so frustrating!
Hi Jill,
Can you post a link to your site where this is happening, and also send me a copy of your functions.php file? You can use the filedrop on this page to send that file over.
John
I just used the plugin with WP version 3.8.1. I noticed the plugin says it wasn’t tested with this version and I wanted you to know it worked just fine for me. 🙂
Thanks for the plugin.
Hi Colleen,
Thanks for letting me know. I haven’t gotten around to updating the version compatibility number yet, but the more feedback before I do that, the better.
And you’re welcome!
john
It seems to be working for everything except for the comments. There is no break and the lines go through the words. Any guidance?
Hi Chris,
What’s the address of your website where this is happening?
And are you using the plugin or the tutorial?
John
Thank you for the reply. I am using the plugin and the site is currently at brandeej.com.
You’re welcome. I’m guessing this is because you’ve changed “Leave a Reply” to “Join the Kurvy Conversation.” What happens if you change it back to “Leave a Reply”? Does it then work the way it should?
I changed it back to Leave a Reply and it is still displaying without the break. I am not sure why. I would appreciate any help you can give.
Also do you have any idea where I can get the background image from the demo?
Thank you for all of your help!
Chris,
I just tested my plugin on a test site running WP 3.8.1 and Metro Pro, and the comment title is displaying like the widget titles.
I’m not sure why it’s not working on your site, unless there’s a plugin conflict that I can’t see from the front end. For some reason the span tag isn’t being inserted inside the comment title h3 tag.
I did notice that you’re using WP Super Cache, so I’d try emptying your page cache, and even turning that off temporarily to see if anything changes.
And while WPSC is turned off, going through your other plugins one by one, deactivating and activating, might tell us where the conflict is, if there is one.
Let me know how that goes.
John