You might be doing the_title() wrong.
If you have much experience with WordPress, you’ll be familiar with the_title(). This template tag is simply used to generate the title of whatever page or post you’re working with at the current point in The Loop.
Basic Usage of the_title()
//Inside the Loop //Common usage <h2><?php the_title() ?></h2> //or better yet... <?php the_title( '<h2>', '</h2>' ) ?>
Another Common Use of the_title()
Usually a post’s title is wrapped in a link (usually rendered by the template tag the_permalink), and it makes sense to use the post title as the link’s title attribute. So, this is what’s commonly done to generate the link’s title attribute:
//Inside the Loop //Common Post Title Linkage <h2><a href="<?php the_permalink(); ?>" title="<?php the_title() ?>" ><?php the_title() ?></a></h2> //Just for clarity, this will output the following markup <h2><a href="http://mywebsite.com/my-post" title="My Post">My Post</a></h2>
The HTML Spec restricts the characters that can be used in HTML attributes (
title="" is an example of an attribute). For instance, ampersands (&) are not allowed to be used in attribute values, so you can’t do something like this:
<h2><a href="#" title="Dog & Pony Show">Dog & Pony Show</a></h2>
(It’s important to note that only the first ampersand in this statement is a problem. The second one is just part of the text as far as the browser’s concerned.)
So what can you do if your post title has one of the illegal characters (less than, greater than, ampersand, double quote and single quote) in it?
Savvy WordPress devs know to use esc_attr() when outputting a string into a HTML attribute, which is what we just did above: We output the string “Dog & Pony Show” as the value of the attribute ‘title’. esc_attr() converts illegal characters into their HTML Entities, meaning “&” would be encoded to
&, then rendered as the correct character by the browser.
This is where the_title_attribute() comes in.
the_title_attribute() basically does two things with your post title: it runs the title string through PHP’s stripslashes() (a common security procedure), then it gets sent through esc_attr() to encode illegal characters. The effective line in WordPress Core literally looks like this:
// From wp-includes/post-template.php $title = esc_attr(strip_tags($title));
In the end, your post title is all cleaned up and rendered as valid HTML.
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute() ?>" ><?php the_title() ?></a></h2> //Which will render <h2><a href="http://my-website.com/dog-pony-show" title="Dog $amp; Pony Show" >Dog & Pony Show</a></h2>
the_title_attribute() is a little-known tool in the developer’s toolbox, but it sure is handy. Be sure to include it in your next Plugin/Theme files.
What other little-known helper functions do you know? Share them in the comments!