I am sure you have observed a few websites use their own WordPress theme color in the mobile Chrome browser. The URL bar gets matched according to the WordPress theme.
It looks quite cool, isn’t it?
So, how do they change the color of the WordPress site in Chrome so that it blends with their theme? How is it possible to make your blog look customized in a third-party browser?
Fortunately, this is possible with the new versions of Android and Google Chrome. Precisely after the release of the Google Chrome 39.0 version. That means whoever is using version 39.0 and above will be able to see the customized look of your blog.
And, believe me, you can achieve the same look for your website by adding a simple piece of code. Let’s take a walkthrough.
Why Change Address Bar Color in Mobile Browser: Key Reasons
Generally, the website owner does it for branding. Changing the Chrome address bar color gives a soothing look to the website and probably gives a feeling of a mobile app as well.
And dramatically compliments the look and design of the theme in the Chrome mobile browser.
So, how about applying the same to your own website? Let’s get into it!
Method 1: Change the Address bar color in WordPress
So here we are about to add the code directly to the theme itself.
All you need to do is get into your WordPress Admin area.
- Step 1. Navigate to
"Appearance>header"look forheader.phpon the right and click on it.
- Step 2. Now, find the
</head>tag in theheader.phpscript and paste the below code just above it. Check the above image for better insights.
<meta name=”theme-color” content=”#ff5722″>Performing the above action you will be able to see the changes applied for your mobile users.
You can customize the color code according to your theme. Just need to change the Content hex color code. You can get the color code online available on many websites like Color-Hex.
In case you don’t want to do it manually touching all the code snippets, don’t want to make any changes to your WordPress theme.
Not to worry at all, we have an alternate method to change the Chrome mobile browser color according to your WP theme.
Method 2: Change the Address bar color in the Mobile Browser
So, in this process, I will be using a plugin to do the same. This plugin is very simple and easy to use.
- Step 1. From your WordPress dashboard install and Activate the Mobile Address Bar Changer plugin.
Once installed and activated, it can be located in settings from your WP dashboard.
- Step 2. Settings – Mobile Address Bar Changer. Click on it.
You will be able to see a color palette, choose any color or you can input any hex code which goes according to your theme.
- Step 3. Finally hit the Save Changes button.
Now your visitors will be able to see the changes in the Chrome mobile browser. I am sure, your visitor will love that.