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!
Share Improve this question asked Feb 5, 2019 at 14:09 klewisklewis 8991 gold badge14 silver badges32 bronze badges 3 |2 Answers
Reset to default 2Some 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.
the_something()functions output the results immediately. You need aget_the_something()function so it can be processed byesc_html__()andprint_f(). – WebElaine Commented Feb 5, 2019 at 14:20the_title_attribute, there's a parameter on whether to return or echo the result – Tom J Nowell ♦ Commented Feb 5, 2019 at 15:09