I am sure you have observed a few websites use their own WordPress theme color in mobile Chrome browser. The URL bar gets matched according to the WordPress theme.
Looks quite cool, Isn’t it?
So, how do they do change the color of the WordPress site in chrome which 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 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 walkthorugh.
Why Change Address bar Color in Mobile Browser: Key Reasons
Generally, the website owner does it for branding. And 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 well 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!
Method 1 – Change Mobile Address bar color in WordPress
So here we are about to add the code directly in the theme itself.
All you need to do is to get into your WordPress Admin area,
Step 1. Navigate to Appearance – Editor, and look for header.php on the right and click on it.
Step 2. Now, find the </head> tag in the header.php script 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 gets applied for your mobile users.
You can customize the color code according to your theme. Just need to change the Content hex color code. As you can see above (In featured image) that Question Cage theme code applied is #FF5722.The hex code can be changed according to your requirement.
The hex code can be changed according to your requirement.
You can get the color code online available in many websites like Color-Hex.
In case you are not that familiar with this entire process and don’t want to make any changes in 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 Address bar color in 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.
That’s it, now you and your visitors will be able to see the changes in the chrome mobile browser. It looks great and takes one step ahead on branding. Visitors will love this instead of that boring light gray background.
Isn’t it simple and quick,
I would love to hear your thoughts via the comment box below. Happy Blogging!