Change separators in HTML <title></title> tags

I'm using WP 4.7.3 and a custom template set (mh-magazine).

By default, WP sets a title tag like "Page title" - "Blog title".

Now all I want to achieve is to replace "-" into a pipe symbol for layout reasons. So the processed HTMl should look like:

My page title | My blog title

I thought that this is easy to achieve, but I see I need some help since I'm not an expert in PHP or WP.

Topic title customization Wordpress

Category Web


Before changing your title separator, you should consider how screen readers will read your page title. While vertical pipe looks good it will now read "vertical pipe" . This can provide an undesired experience for assistive users.

See this article for a better understanding of this: https://www.standards-schmandards.com/2004/title-text-separators/


Possibility-1:

If your theme has:

  1. add_theme_support( 'title-tag' ); somewhere in your functions.php file, and

  2. wp_head() function call in header.php file

then using document_title_separator filter will work as @Paul's answer suggested.

If the filter doesn't work even after meeting those conditions above, then perhaps a plugin is overriding it. Try increasing the priority of the filter so that it runs last, like so:

function wpse262196_document_title_separator( $sep ) {
    return '|';
}
add_filter( 'document_title_separator', 'wpse262196_document_title_separator', PHP_INT_MAX );

or if the document_title_separator filter already exists in your theme's functions.php file, then change it there.


Possibility-2:

May be your theme doesn't include add_theme_support( 'title-tag' ); and instead uses the old <title><?php wp_title(); ?></title> in header.php file.

In this case, you may change it like: <title><?php wp_title( '|' ); ?></title> to change the separator.

Note: it's strongly advised to change it back to add_theme_support( 'title-tag' );, as wp_title() is likely to be deprecated.

Also, if it doesn't work, then may be your a plugin is replacing it using wp_title filter. In that case, use the filter below in your themes functions.php file to change the behaviour:

function wpse262196_wp_title( $title, $sep, $seplocation ) {
    return str_replace( " $sep ", " | ", $title );
}
add_filter( 'wp_title', 'wpse262196_wp_title', PHP_INT_MAX );

or if the wp_title filter already exists in your theme's functions.php file, then change it there.

Hopefully one the solutions will work for you.


If you would like to go a plugin route, you can use the Yoast SEO plugin which is a free and powerful SEO tool.

Note: Yoast SEO is a full featured SEO plugin. So if you're not going to make use of the other SEO features of Yoast and changing the title separator is all you need, then this plugin will be overkill and the other answers given would be both much lighter weight and more appropriate for your needs.

  1. Install it from the WordPress repo (within your WordPress installation is easiest) as you would any other plugin. Then activate it.
  2. Head to Yoast > Dashboard > Features and make sure to turn on the "Advanced Settings Pages" and hit save. Yoast - turn on Advanced Settings
  3. Click the "Titles & Metas" option page. The very first tab ("General") will give you the ability to globally specify your title separators. Title Separators

It all depends on how your theme's header.php is structured, but the most likely way is via the document_title_separator filter, as in

add_filter ('document_title_separator', 'wpse_set_document_title_separator') ;

function
wpse_set_document_title_separator ($sep)
{
    return ('|') ;
}

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.