Modifying the HTML <title> tag in a WordPress Site

As default, WordPress automaticaly generates quite good HTML <title> tags for the different pages of a website. These HTML <title> tags usually fit well with the content of the page and for us, the human beings, these tags are more than enough for understanding. On the other hand, these HTML <title> tags (hereinafter simply, titles) are also interpreted for the programmes: the browsers just show these titles but web crawlers engines use titles for understanding the global meaning of the content and, depending on them, the pages are classified and included (or not) in the results of a search and this last it’s very important if we are talking about SEO. Good title, good SEO. Poor title… well, you know. So the most probably is that you want to improve a litle bit your HTML <title> Tag. Do you want?

Modifying the html ‘title’ tag

Time ago, for modifying the titles WordPress only offers one posibility, to filter the output of the function wp_title however, since version 4.1, WordPress also offers another possibility, a new module called title-tag of Theme Features so our modification of the titles has to take into account both possibilities. Well, of course there are also another posibility, you have already installed a fantastic SEO plugin and therefore you don’t need to modify anything. If this is your case, congratulations, but for the rest, let’s go with the function.

Firstly we should find out what is the WordPress version and, secondly, if we have a version equal or superior to 4.1, we should find out if the title-tag feature is on but in this case, it is simplier just to check if the current theme supports the title-tag feature because in all other cases the theme always uses the function wp_title. To do this, we’ll use the function current_theme_supports( string $feature ). (See the complete documentation of the function current_theme_supports in WordPress documentation).

<?php
if ( current_theme_supports('title-tag') ) {
  // code when the theme supports and uses the title-tag feature
} else {
  // all other cases
}
?>

In addtion, the difference between title-tag and wp_title is also important because, whereas title-tag outputs the string of the name of the page in the middle of <title></title>, the function wp_title just outputs the string without the HTML tags.

The method used for introducing the modification of titles in both cases is via WordPress filters taking into account however, that the number of parameters is also different in both cases: in the title-tag module, the filter just receives a string, the title, but in the function wp_title there are two more parameters. Of course this is only an example, in a production installation, it would be better to write two different functions, one for each filter.

<?php
if ( current_theme_supports('title-tag') ) {
    add_filters( 'pre_get_document_title', 'our_function_for_filter', 10, 1 );
} else {
    add_filters( 'wp_title',               'our_function_for_filter', 10, 3 );
}
?>

And at this point, we need only write the filter function and additionally we can introduce the check point (the ‘if’ clause) inside so that, the final code, for example, could be something so simple like this:

<?php
function our_function_for_filter ( $title = NULL, $sep = NULL, $seplocation = NULL ) {

      $title = $title . ". These are the voyages...";

      if ( current_theme_supports('title-tag') ) 
         return sprintf( '<title>%s</title>', $title );
      else
         return $title;

}
add_filters( 'pre_get_document_title', 'our_function_for_filter', 10, 1 );
add_filters( 'wp_title',               'our_function_for_filter', 10, 3 );
?>

Now, we can add these lines to the functions.php file of the current theme and all titles become more trekkie.

Well, this is just a short example for introducing the difference between the old and the new WordPress methods for constructing the titles (so that, better if you do not introduce this example in your functions.php file). In next articles we develop the filter function our_function_for_filter for adapting the output more accurately, of course.

Have a nice WordPressing!

2 Comments on Modifying the HTML <title> tag in a WordPress Site

Leave a Comment

   Mandatory field
You can use these HTML tags inside the commment.
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>