How to add theme support for the Title tag

WordPress ships with a ton of theme features and these theme features save a lot of time for the theme developers. 

Just like any other application software, WordPress doesn’t enable all the theme features because that could affect the performance of our WordPress website. This is because a WordPress theme decides what should get displayed on each webpage of our website. So, It is totally in our control as the theme developers to enable and support these features by utilizing them in our themes to make it easy for us and the client.

Also, the theme features we need to utilize varies from project to project. 

For example, ‘custom-logo’ is a theme feature we might want to support. This feature allows the client to upload a custom logo with ease and as theme developers, we can easily pull the URL of the client uploaded logo inside our theme’s template file and display it to the frontend users via the <img> tag.

But a recent client of mine did not want to utilize an image logo at all. Since SVG is the new trend, He wanted to use an SVG logo instead of a png version. But WordPress doesn’t allow us to upload the SVG file because of security concerns. So I did not enable ‘custom-logo’ theme feature at all. Instead, I manually put the SVG inline inside the header.php file.

The <title> Tag is a theme feature too

WordPress site is not a Static HTML/CSS site. We cannot manually put the <title> tag for every webpage. 

Although WordPress is capable of generating the <title> tag automatically from a page/post title, it prefers not to do it. And it leaves the <title> tag generation to us as the theme developers.

Previously, we used to call wp_title() function inside the <head> element of the header.php file, for example:



<title><?php wp_title( '|', true, 'right' ); ?></title>


This function dynamically generates the <title> tag based on the page/post title. I really love this WordPress function.

But since WordPress version 4.1, WordPress made it a theme feature. And there got to be a big reason for this change but I never really bothered to know why. Probably because of the conflict between the plugins and the themes.

Anyway, the document title is a keystone for the site’s SEO success. And no client never ever said to ignore SEO. Also, If you notice the browser tab, there is this ugly URL instead of the site name followed by the page name.

So, let’s fix this by enabling the ‘title-tag’ theme feature.

Introducing the add_theme_support() WordPress function

The add_theme_support() function allows you to enable the use of a theme-feature inside your theme. 

It accepts two parameters.


add_theme_support( $feature, $arguments );

The $feature parameter

With this parameter, you are telling the WordPress that “Hey! I want my theme to support this particular feature”


add_theme_support( 'title-tag', $arguments );

The $arguments parameter

This parameter allows us to fine-tune the feature to our project needs. For example, let’s just say that you want to support the ‘custom-logo’ feature but you also want to restrict the client to upload a logo with 100x50px dimensions. The parameter will let you achieve just that. 

We will put this example to use when we add theme support to the ‘custom-logo’ feature.

after_theme_setup action hook allows you to add theme support for any feature 

WordPress allows us to support a theme feature only when WordPress is done setting up the theme internally. To give us the green signal, WordPress triggers the  after_theme_setup action hook as soon as it is done with the theme setup. 

So, to support a theme feature all we have to do is hook into this action hook.

Let’s add theme support to the <title> tag 

Open up the functions.php file and put the following code at the end of it.


function nd_dosth_theme_setup() {

        // Adds <title> tag support
        add_theme_support( 'title-tag' );  

}
add_action( 'after_setup_theme', 'nd_dosth_theme_setup');

Let’s break it down.

Nothing special going on in here. 

We defined a custom action called nd_dosth_theme_setup and hooked it to the after_theme_setup action hook. And inside our custom action, we are just calling the add_theme_support('title-tag') function. That’s all.

Now if we switch back to the Homepage in the Browser, we can indeed see a title on the tab instead of a URL.

And if you notice, WordPress by default uses the site name and tagline of our WordPress website for the <title> tag of the home page. For the internal pages and posts, WordPress uses the title of blog post / page. We will see this when we build our internal pages.

WordPress also allows us to modify the <title> tag dynamically for just about any page or post. We will learn how to do this in a future lesson.

Here is the final functions.php file for this lesson:


<?php
function nd_dosth_enqueue_styles() {
    wp_enqueue_style( 		
        'normalize',	
        get_stylesheet_directory_uri() . '/assets/css/normalize.css', 	
        array(), 		
        false, 		
        'all' 
    );
    wp_enqueue_style( 		
        'bootstrap',	
        get_stylesheet_directory_uri() . '/assets/css/bootstrap.min.css', 	
        array(), 		
        false, 		
        'all' 
    );
    wp_enqueue_style( 		
        'main-stylesheet',	
        get_stylesheet_uri(), 	
        array('normalize', 'bootstrap'), 		
        "1.0", 		
        'all' 
    );
}
add_action( 'wp_enqueue_scripts', 'nd_dosth_enqueue_styles' );

function nd_dosth_enqueue_scripts() {
    wp_enqueue_script( 
        'main-js', 
        get_stylesheet_directory_uri() . '/assets/js/main.js', 
        array('jquery'), 
        '1.0.0', 
        true 
    );
}
add_action( 'wp_enqueue_scripts', 'nd_dosth_enqueue_scripts' );

    
function nd_dosth_theme_setup() {

    // Adds <title> tag support
    add_theme_support( 'title-tag' );  

}
add_action( 'after_setup_theme', 'nd_dosth_theme_setup');

Alright, For now, we are done with the <head> element. In the next lesson, we will continue to build the Header portion of our site by focusing the <body> tag.