Dynamic page titles in WordPress

If you are developing a custom theme in WordPress and want custom page titles to display in your header or at the top of the page using the wp_title filter, you will have noticed that WordPress by default adds the site title to the page title. If you have the Yoast SEO plugin installed, you may have noticed that the site title is appended to your custom page titles regardless of what you have put in the wp_title filter. Let’s look at the wp_title filter first for both title tags and on-page titles, and then we’ll take a look at how to change the Yoast SEO settings to show your custom title.

As outlined on WordPress.org, wp_title takes the following parameters:

wp_title( string $sep = '»', bool $display = true, string $seplocation = '' )

So to remove the site description and the separator, we would write:

wp_title('', true)

The first parameter removes the separator, true allows the page title to show, and we don’t need to specify whether the page title is to the left or right of the site title as we only want to output the page title.

Customising dynamic titles

This works great, until we want custom page titles for custom page templates. Within the head tag in our header we’d need to add a title tag with conditionals for specific pages. The get_bloginfo() function allows us to pull the information we need (site description or name in this case) and place it in the order we want to show it, along with any custom text.

<title>
            <?php
		    if (is_front_page() ) {
				echo get_bloginfo( 'name' );
				?>
				-
				<?php
				echo get_bloginfo( 'description' );
		}
		
			elseif (is_404()) {
				echo "404";
				?>
				|
				<?php
				echo get_bloginfo( 'name' );
				?>
				-
				<?php
				echo get_bloginfo( 'description' );
			}
			
			else {
                wp_title('|', true, 'right'); ?> 
                | 
                <?php 
                echo get_bloginfo( 'name' ); 
                ?>
                - 
                <?php 
                echo get_bloginfo( 'description' ); 
             } 
             ?> 
</title>

Customising dynamic titles on-page

Within your header.php file or whichever file you are planning on adding custom, dynamic on-page titles, you again need some custom code for the different page templates. For example, let’s say you’ve added a 404.php template. You’ll now most likely have a generic title added to your site title, to create one long title. Not great. A solution is to echo the page name if the page is a custom template, within your page title h tag:

<div class="page-title">
			
	<h1> 
		<?php
                if (is_404()) {
                   echo "404"; // or any title of your choice
                }
                else {
                   wp_title('', true);
                }
                ?>
	</h1>
</div>

You may have then found that if you install Yoast SEO, the site title gets added back on to the page title, or a different title takes its place. To change this, navigate to the Yoast SEO dashboard in your WordPress dashboard and click on the features tab in the top menu. Make sure ‘advanced settings pages’ is enabled. This will add new menu items in the SEO navigation menu on the left of your WordPress dashboard. From these new options, open up the ‘Titles and Metas’ section and make sure ‘Force rewrite titles’ is disabled from the ‘General’ tab.

Navigate to the ‘Post Types’ tab, and in here you need to change the title template for posts, pages and media if relevant. I found that the default title template for posts was %%sep%% %%sitename%%, and the result was a title on my blog pages showing just the separator and my site name. I found that deleting the content in this box wasn’t enough to return the title back to my custom title (showing just the article name), but by adding %%title%% to this box the title showed as expected.

If you find that removing the text inputted automatically by Yoast SEO does not change the page title, then you can follow their coding styles to recreate your custom page/post titles. Yoast SEO have compiled a list of all the variables that can be used in the Titles and Meta section of their dashboard.

Yoast SEO will allow you to set custom title templates for category pages, tag pages, archive pages, and ‘special’ pages (which only includes 404 pages and search pages).

Note: If you have added support in your theme for the new title_tag (which you will need to do if you intend to distribute your themes in the WordPress theme repository), you won’t be able to use wp_title within the theme. It will also be deprecated at some stage in the future, but is currently still included. Find out how to create custom page titles with the title_tag in the next article.