Steps to Add Custom Title Tags for WordPress Using Custom Fields (2017 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:

Switch on custom field in Screen Options

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).

Title Tag Custom Field

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

Important Note: you need not keep creating the 'title' custom field for all posts that require a custom title tag. Once you do this for one post, the 'title' custom field is automatically saved.

For other articles, you can select the 'title' custom field from the drop down menu and simply enter your custom title tag in the 'value' section.

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.


add_filter( 'document_title_parts', 'orweb_custom_title');
function orweb_custom_title( $title ) {
if ( ! is_single()) return $title;
	$custom_title = get_post_meta( get_the_id(), 'title', true);
if( ! empty( $custom_title )  ){
	$custom_title = strip_tags( $custom_title );
	$custom_title = esc_html( $custom_title );
	$title[title] = $custom_title;
	}
return $title;
}
code explanation: We simply check if a custom field named 'title' is present. If it is present, we replace the existing title with the custom title and return it. If the custom field is absent, we return the title as it is.

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_single()) return;
	$custom_title = get_post_meta( get_the_id(), 'title', true);
if( ! empty( $custom_title )  ){
	$custom_title = strip_tags( $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/

 
 
 
 

Comments

  1. Julie says:

    Clearly written & well constructed article!

    How do I achieve this when my theme has declared add_theme_support for title tags?

Leave a Reply

Your email address will not be published. Required fields are marked *