0

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!

  • 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 Feb 5 at 14:20
  • 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 Feb 5 at 15:09
  • You beat me to it. I just posted that below. Thanks – klewis Feb 5 at 15:14
1

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 am now seeing, based on background research and now your thoughts on this very specific topic. this is the way to go. Thanks! – klewis Feb 5 at 14:47
  • Note that there's a missing echo statement in the href attribute for the permalink – Tom J Nowell Feb 5 at 15:10
  • Fixed above. :) – WebElaine Feb 5 at 15:45
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.