Today I received an e-mail from Richard of Comparitech (thank you Richard, by the way!) telling me that there was an odd issue with our blog's social sharing feature.
I made a quick check and it turned out that he was absolutely right:
The outlined text clearly shows a bunch of badly stripped HTML tags. It took to me a while to understand why there were HTML tags within the Post Title: the reason was due to the Subtitles Worpdress Plugin, which we recently installed to allow our contributors to write subtitles to their posts.
The next thing I did was checking the plugin documentation, which led me to an extremely detailed and well-written FAQ page on GitHub. A quick look was enough to find exactly what I was looking for:
There's Weird HTML Showing Up On My Site!
I can almost guarantee that the reason this is happening is because your theme developer is using either
the_titleorget_the_titlein places where they should not be used. This is a theme bug, not a plugin bug.
When titles are used as attributes, the appropriate template tag to use is
the_title_attribute, neverthe_title.Please see these long threads as examples of what happens when themes conflict with Subtitles.
The original text can be found here, and is a good proof that the plugin author - Philip Arthur Moore from We Cobble - is a competent developer, which definitely knows what he's talking about. The issue, just as he says, was related to our Hitmag Pro WordPress Theme, or - to better say that - to the implementation of its Social Sharing built-in feature.
Here's what I found in the theme source code - more precisely, within the /inc/template-tags.php file:
|
1 2 3 4 5 6 7 8 9 |
function hitmag_pro_social_sharing_buttons() { // .. cut ... // Get current page title $hm_post_title = str_replace( ' ', '%20', get_the_title() ); // .. cut ... } |
As we can see, they used the get_the_title() function to retrieve the post entry title, thus causing the badly striped HTML tags issue. Replacing it with the the_title_attribute('echo=0') function was more than enough to fix the problem for good:
|
1 2 3 4 5 6 7 8 9 |
function hitmag_pro_social_sharing_buttons() { // .. cut ... // Get current page title $hm_post_title = str_replace( ' ', '%20', the_title_attribute('echo=0') ); // Ryadel fix to strip HTML tags // .. cut ... } |
Unfortunately, WordPress core doesn't provide a get_the_title_attribute() wrapper function yet... Although there are some TRAC tickets asking for it (such as this one). Luckily enough, we can use the above syntax to achieve that same result: it might be a bit ugly, yet it works!
I suggested such workaround to the Hitmag Pro theme developers with a post on their theme's official support forum: it should definitely be the proper fix for such issue, as the the_title_attribute('echo=0') WP function correctly escapes the title and also strips all the HTML tags, which is definitely a good practice for a social sharing feature (for the post title, at least).
For additional info regarding these WordPress functions, I strongly suggest to take a look at the aforementioned Subtitles plugin FAQ page and also to this relevant article from the pippingplugins.com website.
That's it for now: I sincerely hope that this post will help other developers like me who will stumble upon this issue.
Happy posting... and social sharing!
