How to fix repeating site title issue in WordPress 4.3?

After upgrading your WordPress blog, are your browser’s titles are looking ugly repeating unnecessarily? This means your theme is not fully compatible with the latest WordPress version. So now question arises that what to do to fix this repeating title issue. First of all, check if your theme has pushed any update, and if yes then update it with the latest version. In case no update is pushed from your theme or even after updating the theme to its latest version, the problem still persists, then that means your theme is not compatible with WordPress 4.1 and above versions. So what to do in this situation is the aim to discuss in this quick tutorial.

So, before fixing the issue, let us know the reason first causing this weird issue to your blog. The reason is so simple- WordPress has introduced a new function since it’s version 4.1, eliminating the title tag in the header file. Previously, the title for your blog was handled by the html <title </title> tag inside the <header></header> tag. So, formatting browser header was a little bit tricky, especially when you are using a plugin to do that. So from the version 4.1 onwards WordPress is handling these browser titles introducing a new function called title-tag, eliminating <title> from header.php. So when your theme uses the typical way to show title, like this: <title><?php wp_title('|', true, 'right'); ?></title> , inside the <head> tag in header.php, it results duplicate browser title.

So, how to resolve this? Resolution is also very simple. The steps to resolve this duplicate title issue for wordpress 4.3 or 4.1+ are as follows-

  1. First login to your server’s (hosting) control panel (cPanel), which is usually located at http://cpanel.example.com or http://example.com:2082 using your cPanel username and password.
  2. Now open File Manager.
  3. In the file manager, go to the public_html or htdocs folder where your WordPress blog’s files are present.
  4. Thus go to this location- public_html >> wp-content >> themes >> your-theme
  5. There you’ll get these files usually–  header.php, footer.php, function.php, index.php, .., etc. These all are your theme file controlling your blog’s look and theme managed features.
  6. Now right click on the header.php file and click on ‘Code Edit’ or simply ‘Edit’.
  7. On the edit screen locate this line <title><?php wp_title('|', true, 'right'); ?></title> and delete it. Thus you are removing theme’s control on the blog’s browser titles. After you’re done click on ‘Save Changes’ and save all your resent changes to the file permanently.
  8. Now, since you have deleted your theme controlled browser titles, you’ll have to add it with theme functions. To do this, edit the functions.php file following the previously mentioned method. Now follow the bellow mentioned instructions to add support for title-tag.

Adding support for title-tag in functions.php:

Somewhere inside the functions.php file, you’ll get codes like this-

function neozee_setup() {
    load_theme_textdomain( 'neo-zee', get_template_directory() . '/language' );
    add_theme_support( 'automatic-feed-links' );
    add_theme_support('custom-background');
    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 125, 125, true );
    register_nav_menus( array(
        'neozee-menu-header' => __( 'Header', 'neo-zee' ),
    ) );
    add_theme_support( 'html5', array(
        'search-form',
        'comment-form',
        'comment-list',
        'gallery',
        'caption',
    ) );
    add_theme_support( 'menus' );
    add_editor_style( 'editor-style.css' );
    add_theme_support( 'custom-background', apply_filters( 'neozee_custom_background_args', array(
        'default-color'    => 'ffffff',
        'default-attachment' => 'fixed',
        'default-image' => '',
    ) ) );
}
endif;
add_action( 'after_setup_theme', 'neozee_setup' );

Here, neozee is our theme’s slug. So in your theme it’ll be like this

function your_theme_slug_setup() {
    ….
}
endif;
add_action('after_setup_theme', 'your_theme_slug_setup' );

So, anywhere between second bracket, i.e. {} in the above code, add the below line-

add_theme_support( 'title-tag' );

..and Save the file. Now you are done. From now onwards your blog will not generate browser titles with duplication.

For theme developers:

In case you are a theme developer, you’ll need to add a backward compatibility too to your theme, because WordPress versions below 4.1 won’t work with this title-tag method in fuctions.php file. So to add a backward compatibility, add the bellow codes after after_setup_theme hook in functions.php file:

//Adding backwards compatibility for title-tag less than WordPress version 4.1
    if ( ! function_exists( '_wp_render_title_tag' ) ) :
    function neozee_render_title() {
?>
<title><?php wp_title( '|', true, 'right' ); ?></title>
<?php
    }
    add_action( 'wp_head', 'neozee_render_title' );
endif;  

Change our theme slug neozee with your own theme’s slug.

Conclusion:

If you follow the above instructions correctly, then your blog/theme will no longer generate duplicate browser titles and you’ll able to handle title expressions with plugins too, without any any errors or issues. Happy blogging or developing!!

Posted in Tutorials and tagged , .

Sultan

Sultan Mustafijul Hoque is a web professional who is the founder of Domain Registration and Web Hosting service at HostSlicer. He is also a co-founder at Indilens News and Lead Editor at India's No. 1 Educational Portal IndiaStudyChannel. Sultan holds the technical responsibilities of this site. He is the sole developer of the theme Neo Zee Pro which giving this awesome look of the site. You can get a copy of the theme from the official theme page here. If you have any comments on the design or anything else you are welcome to post as a response in the official theme page.

Leave a Reply

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

Resolve it-- *