I’ve reviewed quite a few Themes, since joining the WordPress Theme Review Team a month ago. There are a few issues that keep popping up, like the wrong use of the the_title() template tag in link attributes. But I’m here to help, so let me show you how you can boost your code quality and make Theme Reviewer happy.

Suppose you’re coding your index.php file and you’re about to link the post title to the post’s single view. You want to add a title attribute to the anchor tag, so visitors have an added value. l If you do it like this, you’re _doing_it_wrong():

<a href="" title="<?php the_title(); ?>"><?php the_title(); ?></a>
<a href="" title="<?php echo esc_attr( the_title() ); ?>"><?php the_title(); ?></a>
<a href="" title="<?php echo esc_attr( get_the_title() ); ?>"><?php the_title(); ?></a>

The output of the_title()is not safe to use in an attribute. And trying to escape the output when the content is echoed, unfortunately does not work either. “But the last one looks good!”, I hear you say. Yes, but there is an even better way!

Enter the the_title_attribute() template tag:

the_title_attribute( $args );

You can pass an array (or query string) with the following optional parameters:

• ‘before’ (string)
• ‘after’ (string)
• ‘echo’ (bool)
  • true – echo
  • false – return

The function either echoes or returns the escaped title after it has stripped all tags. It gives you the post title completely ready to use in an attribute (hence the name of the function^^).

So this is, what it should look like, nice and clean:

<a href="" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>

Taking it to the next level

Let’s look at an code example from TwentyEleven:

title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ); ?>"

Doesn’t look too shabby, does it? Using the_title_attribute, returning the value, translating and escaping the prepended text, all good. But really? Look closely! What happens if there is not title? On hovering the link, vistors would get to see: ‘Permalink to ‘. the_title_attribute() checks to see if there is a title in the first place. If there is not, it returns nothing.

But this is, where the 'before' parameter comes in handy. Try something like this for example:

title="<?php the_title_attribute( array( 'before' => _x( 'Permalink to ', 'trailing whitespace', 'twentyeleven' ) ) ); ?>"

Now the title attribute remains empty if there is no title to display. A little downside would be the trailing whitespace in the before parameter, since the string just gets prepended to title.

One more thing

Best practice example for using the_title() with markup:

// Instead of doing this:
<h2 class="entry-title"><?php the_title(); ?></h2>

// You should be doing this:
<?php the_title( array(
    'before' => '<h2 class="entry-title">',
    'after' => '</h2>'
) ); ?>

This way, if there is no post title and you have margins and paddings on the markup there won’t be any weird empty spaces, since nothing gets displayed. It doesn’t get much better than that.