the_title() vs the_title_attribute()

Standard

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 Problem

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?

The Solution

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 &amp;, 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.

Proper Usage

<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>

Conclusion

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!

2 thoughts on “the_title() vs the_title_attribute()

  1. One that bugs me is when you see PHP exporting data to JavaScript, for example:

    var the_title = "<?php echo $post->post_title ?>";

    This will result JS syntax errors or unexpected behavior if backslashes or double-quotes are in the title. PHP has a built-in function specifically designed for turning PHP into JS, json_encode, and we should be using it in such cases:

    var the_title = <?php echo json_encode( $post->post_title ) ?>;

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s