escaping - How to safely escape the title attribute

I'm going through some training on internationalization and escaping data. But I feel stuck with escaping the title attribute. I have the following code in a helper function...

   echo '<h2 class="m-title">';
    printf(
        esc_html__('%s','tn'),
            '<a href="'.esc_url(get_permalink()).'" title="'.the_title_attribute().'">
            '. esc_html(get_the_title()).'
            </a> 
        '
    );
    echo '</h2>';

Everything appears to be working fine with it, except the title attribute. The output looks like this....

Hello world! Hello world!

Because the DOM is loading the following:

<h2 class="m-title">
  Hello world!
  <a href="/mysite/?p=26" title="">
  Hello world!
  </a> 
</h2>

What I am doing wrong with calling the_title_attribute()? According to the docs, its already escaped.

Thanks for any tips!

I'm going through some training on internationalization and escaping data. But I feel stuck with escaping the title attribute. I have the following code in a helper function...

   echo '<h2 class="m-title">';
    printf(
        esc_html__('%s','tn'),
            '<a href="'.esc_url(get_permalink()).'" title="'.the_title_attribute().'">
            '. esc_html(get_the_title()).'
            </a> 
        '
    );
    echo '</h2>';

Everything appears to be working fine with it, except the title attribute. The output looks like this....

Hello world! Hello world!

Because the DOM is loading the following:

<h2 class="m-title">
  Hello world!
  <a href="http://local.dev.site/mysite/?p=26" title="">
  Hello world!
  </a> 
</h2>

What I am doing wrong with calling the_title_attribute()? According to the docs, its already escaped.

Thanks for any tips!

• escaping

Share Improve this question asked Feb 5, 2019 at 14:09 klewisklewis 89911 gold badge1414 silver badges3232 bronze badges 3

• 1 The title is showing up early because all the the_something() functions output the results immediately. You need a get_the_something() function so it can be processed by esc_html__() and print_f(). – WebElaine Commented Feb 5, 2019 at 14:20
• 1 Yes, there is, re-read the docs for the_title_attribute, there's a parameter on whether to return or echo the result – Tom J Nowell ♦ Commented Feb 5, 2019 at 15:09
• You beat me to it. I just posted that below. Thanks – klewis Commented Feb 5, 2019 at 15:14

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 2

Some screen readers read the title attribute plus the link text - so those visitors would hear "Hello world! Hello world!" - so unless your real title attribute is different than the link text and provides additional context to users of screen readers, you may wish to just not use the title attribute.

Or, you should be able to rewrite everything so that instead of echoing you have something like

<?php // your other code here ?>
<h2 class="m-title">
    <a href="<?php echo esc_url(get_permalink()); ?>" title="<?php the_title_attribute(); ?>">
        <?php the_title(); ?>
    </a>
</h2>

This way you're mixing HTML and PHP but it allows you to immediately output both, so that the_title_attribute() is outputting in the right spot and not before everything else is parsed. You can add the additional esc_html__() call wrapped within each set of PHP tags but it's not clear why those would be needed for fields like the_permalink().

I just wanted to also add something I overlooked on the use of the_title_attribute. There are $args that can be applied. So in the event of returning the title one could simply set echo to false like so...

    echo '<h2 class="m-title">';
    printf(
        esc_html__('%s','tn'),
            '<a href="'.esc_url(get_permalink()).'" title="'.the_title_attribute(['echo' => false]).'">
            '. esc_html(get_the_title()).'
            </a> 
            '
    );
    echo '</h2>';

This is what I was originally looking for, but sense I am not doing a good job in providing a translatable string through esc_html__(), it would make more sense to simply echo the title, as shown in the selected answer.