Use the_title() and the_title_attribute() Correctly

WordPress provides a nice little function for displaying the title of the current post: the_title(). This function gets used all over the place: in the site header, at the top of single posts and pages, in the loop, in the footer, etc. It is probably one of the most commonly used functions by theme developers, and sometimes plugin developers, depending on the plugin. What many developers don’t realize, however, is that there is actually a time that this function should not be used for retrieving and showing a post title, and that is in attributes.
I run into snippets like this a lot:

In general this is fine and displays perfectly fine most of the time. The problem is simple: when outputting the title of a post in an attribute, you should always use the_title_attribute(). The reason comes down to escaping.

/**
* Sanitize the current title when retrieving or displaying.
*
* Works like {@link the_title()}, except the parameters can be in a string or
* an array. See the function for what can be override in the $args parameter.
*
* The title before it is displayed will have the tags stripped and {@link
* esc_attr()} before it is passed to the user or displayed. The default
* as with {@link the_title()}, is to display the title.
*
* @since 2.3.0
*
* @param string|array $args Optional. Override the defaults.
* @return string|null Null on failure or display. String when echo is false.
*/function the_title_attribute($args=''){$title= get_the_title();if(strlen($title)==0)return;$defaults=array('before'=>'','after'=>'','echo'=>true);$r= wp_parse_args($args,$defaults);extract($r, EXTR_SKIP );$title=$before.$title.$after;$title= esc_attr(strip_tags($title));if($echo)echo$title;elsereturn$title;}

This function also uses get_the_title() to retrieve the title of the post, but the final data that is returned is different from the_title(), primarily in that it is escaped. What does this mean? It means that it is safe to use inside of element attributes. It also strips all tags.

Let’s look at an example.

Assume your $post->post_title is this:

<spanclass="title">This is a title with span tags</span>

When outputted with the_title(), this will remain completely unchanged and will display as:

<spanclass="title">This is a title with span tags</span>

But when you output this title through the_title_attribute(), you get this:

This is a title with span tags

Notice that the span tags have been removed.

What if your title had quotation marks in it? Such as:

This is a title with "quotation" marks

With the_title(), the title will be outputted as:

This is a title with "quotation" marks

With the_title_attribute(), the title will be outputted as:

This is a title with &quot;quotation&quot; marks

Notice how the quotation marks have been converted to entities?. This is called escaping and it ensures that attributes, such as title=”the title here”, don’t end up getting closed too early.

If we use the_title() inside of an attribute and the title has quotation marks, we will end up with broken markup.

<span title="<?php the_title();?>"><?php the_title();?></span>

Results in:

<spantitle="This is a title with "quotation" marks">This is a title with "quotation" marks</span>

Notice that the title attribute gets closed with the first ” around the word quotation. This results in completely broken markup that might look something like this:

In order to not break the markup, you should always use the_title_attribute() when showing the title of a post inside of an attribute. It’s a very appropriately named function.

The usage of the_title() in attribute tags has actually caused my huge headaches with Easy Digital Downloads. We use the the_title filter to add Schema.org micro data to products, which is excellent because the data is used by search engines to enhance search result entries with product data (price, rating, etc). The problem is that we get at least one support ticket every week from a user that has broken HTML markup (like that pictured above). The problem is prevalent enough that we are being forced to add an option to disable our schema.org micro data.

If you care about better compatibility with plugins, and simply doing the right thing, you should update any theme or plugin that uses the_title() incorrectly. Note, WordPress core itself has a similar problem as well, so it’s not just themes and plugins.

Drew, I’m not advocating for or against the usage of title attributes, I’m only advocating for the correct usage of `the_title_attribute()` inside of attributes, title or otherwise. For example, if you have an HTML element that has `data-name=”The title”`, you need to use `the_title_attribute()`, not `the_title()`.

I was trying to read this post in Feedly and it looks like something in the translation from this site to Feedly messed w/ the code blocks, showing all the underlying HTML tags. It looks like a L soup 🙂

I bought a premium theme and the author made this exact mistake which is disappointing. Even more so because he only did it in the link code for the main post title. The post thumbnail he uses the_title_attribute so it seems like lazy coding or maybe misunderstanding. Have been trying to resolve an issue it’s causing for a while. Now I know. Thank you!