How to Change Address bar color of Mobile Browser in WordPress

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,

add code in theme editor

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.

mobile address bar changer

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!

What others are reading!
Authored by Navin Rao

A blogger and with a go-getter attitude Navin is a web geek and loves to write about WordPress. Able to guide even a non-techie to maintain a WordPress website through his walkthrough tutorials on WordPress.

Enough right? Let's join hands on Facebook and Twitter

11 thoughts on “How to Change Address bar color of Mobile Browser in WordPress”

  1. Thanks for that interesting tip and changing the color of the address bar.

    I tend not to use the WordPress file editor so I would prefer the plugin method! But good you gave the choice for more technical bloggers than I.

    Joy Healey – Blogging After Dark

  2. Hey Navin,

    Thanks for this amazing post. I never knew that the address bar color can be changed with such simple coding.

    I have just started with some HTML and I think it would be a good idea to use it .

    • Hi Sumit, Glad you liked it and apply for your website too. It gives a pleasant look when the browser address bar matches with the theme.

      Thanks for going through the tutorial! Keep visiting

  3. There are lot of apps plugins to Change color of your address bar. I can recommend “Chrome Theme Color Changer” by installing this plugin you don’t need to modify theme files and you can use color picker for select address bar color by using this plugin.

    • Yes, certainly there are plugins, which also get it done. But, in case if one doesn’t want to install plugins for every small additional feature, for them, I guess this guide goes very handy.

  4. Please…..
    Why would anyone think a Visitor would welcome their browser’s colour being changed ?

    It’s a bit like inviting a salesman into your home and he / she pauses to repaint your door colour to match his Corporate colours.

    It’s an intrusion.

    Aside from the sheer rudeness, changing colour of the address and tab area to merge into the website amounts to sabotage of navigation ?

    Clearly, we need Browsers with an option to block such intrusive colour changing.


Leave a Comment