For this tutorial I am going to show you how to change the browser tab title when the user clicks away from your site.

Let’s begin.

To make it easy for everyone to follow without having to go inside the theme files and enqueueing scripts we are going to use another plugin to assist with this tutorial.

The plugin you need to install is called Simple Custom CSS & JS .

After you have it installed and activated go to Custom CSS & JS and select Add JS Code.

A new window will open and you should give it a descriptive title and paste in this bit of JS below the commented portion.

jQuery(document).ready(function( $ ){
	
  	var pageTitle = $("title").text();

	
	$(window).blur(function() {
  $("title").text("Don't forget to read this..." + pageTitle);
});

	$(window).focus(function() {
	  $("title").text(pageTitle);
	});
});

Before you save your script be sure to tell the plugin where to put the script. It gives you two options choose footer and save it.

And that’s it go to your front end and see the magic.

Thanks for reading.