Learn how to change browser tab title when tab not active. It’s quick and simple, but it helps your Divi site stand out from the crowd. One day I was browsing the web looking for WordPress tutorials. I always leave lots (20+) tabs open trying to find the answer I’m looking for. One website called my attention. Sadly, I don’t remember the website URL. When the page tab wasn’t active in my browser the title changed to something like “We miss you, come back“.

My first thought was “That’s Awesome”! And kind of approached me (reader) from the blog author.

How does it work

Switch between tabs in your browser and leave this page open. Check that the title changes from the name f this blog post to something like “Miss You ❤”.

If ever crossed your mind doing something like this in your blog or Divi project, this tutorial is for you. So, let’s start!

Change browser tab title when tab not active

I searched lots of tutorials on the internet and the solution was clear. I needed some jQuery to make this idea work. But, then I managed only to change the title on tab switch, but when switching back it didn’t return to the normal page title.

The answer wasn’t clear yet. So, I kept searching and found Luka from slicejack post about the subject.

How to apply it in Divi

Basically, you need to tell the page you want to change the title when the user is not active in this tab. And remove the title change when the user is back.

Let’s use a little bit of jQuery for this task. I always recommend installing a plugin to handle all the CSS and JS changes in your site. Not that the Divi Custom CSS isn’t good already. But, this plugin helps to organize and to display your code way better.

If you don’t yet use a plugin to handle CSS and JS in your Divi theme website, add the following code to Divi Theme Options > Integration > Add code to the <head> of your blog:

Don’t forget to add <script>Code here</script>

jQuery(document).ready(function( $ ){
// Get page title
var pageTitle = $("title").text();
// Change page title on blur
$(window).blur(function() {
$("title").text("Miss You ❤");
});
// Change page title back on focus
$(window).focus(function() {
$("title").text(pageTitle);
});
});

Conclusion

Hope this tutorial helped you figuring out how to change browser tab title when it’s not active.

Be creative! I’m sure you’ll find a nice title for your blog or Divi project when the user is not browsing your page. Make them curious to click again and stand out of the crowd.

See ya!