Steps to Add Custom Title Tags for WordPress Using Custom Fields (2021 Version)

WordPress auto generates title tags for your posts from the post heading.

For the most part, this should be more than enough, but sometimes you might want to add a custom title tag that is different from the post heading.

You can easily achieve this using 'custom fields' feature in wordpress.

Before proceeding, it is important to note that in older WordPress versions, the title tags were being generated using the wp_title() function.

But since version 4.1, wordpress added title tag as a theme feature. In order to enable this theme feature, theme authors have to add the following code to their functions.php page:

add_theme_support( 'title-tag' );

Depending on if or not your theme supports this, you will have to use a different code to use custom title tags.

How to check if your theme uses the 'title' tag theme feature?

You can check this using the following two methods:

Method 1: Open your theme's functions.php file and see if the below code is present:

add_theme_support( 'title-tag' );

If this code is present, then your theme supports this feature.

Note: You can easily check this using your WordPress dashboard. Simply go to 'Appearance > Editor' and then select 'Functions.php' link from the right panel. You can generally find the code in the top half of the page.

Method 2: Another way is to open your theme's 'header.php' file and see if a call to the 'wp_title' function is present. It should generally look as follows:

<title><?php wp_title() ?></title>

If this function is present, then your theme does not support the 'title tag' theme feature.

Here's how to add custom title tags depending on if or not your theme supports the 'title tag' theme feature.

1.) Your themes supports 'title tag' theme feature

If your theme uses the 'title tag' theme feature, you need to use this method to add custom title tags.

Here are the steps involved:

1. Create a custom field named 'title'.
2. Add a function that checks if this custom field is present and returns the custom title tag, or in its absence returns the regular title tag.

Let's look at these steps in detail:

a.) Creating the 'title' custom field

The first step is to create the custom field in your wordpress admin panel.

Here are the steps to do this:

Step 1: Login to your wordpress dashboard and open the post you want to add a custom title tag for.

Step 2: Make sure that 'Custom Fields' is checked on. You can do that by clicking on 'Screen Options' (Located top right corner of your dashboard) and enable 'custom fields' by ticking on the checkbox. Refer image below:

Step 3: Scroll to the end of the post and you should see the Add a New Custom Field section.

Step 4: In the custom fields section click on Enter new and in the Name field, enter the word title (all lower caps) and in the Value field, enter your custom title tag. (Refer image below).

Step 5: Click the 'Add Custom Field' button, to add your custom field.

The function that we are about to add next will check if this custom value is present and output this as the title tag. If this value is not present, it will output the article heading as the title tag (as usual).

b.) Custom title tag function

Simply copy the following code and paste it to your functions.php file. The code can be pasted right below the "add_theme_support( 'title-tag' )" line.

/* OrbitingWeb custom title tag function */
add_filter( 'document_title_parts', 'orweb_custom_title');
function orweb_custom_title( $title ) {
if ( ! is_singular() ) return $title;
$custom_title = trim(get_post_meta( get_the_id(), 'title', true ));
if( ! empty( $custom_title ) ){
	$custom_title = esc_html( $custom_title );
	$title['title'] = $custom_title;
	}
return $title;
}

2.) Your themes does not support title tag theme feature

If you theme does not support 'title tag' feature, follow these steps:

Step 1: First set is to create the 'title' custom field. Refer the previous point to see how to do this.

Step 2: Add the following code to your theme's functions.php file:

function orweb_custom_title_old($title){
if ( ! is_singular() ) return $title;
$custom_title = trim(get_post_meta( get_the_id(), 'title', true));
if( ! empty( $custom_title )  ){
	$custom_title = esc_html( $custom_title );
	$title = $custom_title;
	}
return $title;
}
add_filter('wp_title', 'orweb_custom_title_old', 10, 2);

Note: If you want to add custom meta description tag, refer this tutorial: Function to add custom meta description tag to wordpress.

3.) Monitoring Your Blog's Title Tags

A simple way to monitor your title tags is using Google Webmaster Tools. Here's how:

Step 1: Login to your Google Webmaster Tools.

Step 2: Select your website to monitor.

Step 3: From the 'Site Dashboard' menu in the left panel select, 'Search Appearance' > 'HTML Improvements'.

Step 4: See if you have any issues listed there under the 'Title Tag' section. If not you are good to go.

Generally the kind of issues you might find listed in the title tag section are, title tags are too short, there are duplicates and pages with title tags missing and these can be easily rectified by making changes to the respective post's title.

Sources:
https://developer.wordpress.org/reference/hooks/wp_title/
https://developer.wordpress.org/reference/hooks/document_title_parts/

Note: If you want to do this using a plugin, check out my plugin - Quick and Easy SEO that allows you to add custom title as well as meta description tags easily.