How to Change Address bar color of Mobile Browser in WordPress

I am sure you have observed 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 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 Google Chrome 39.0 version. That means whoever is using versions 39.0 and above, they 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!

Change Address bar color in Mobile Browser: Method 1

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,

How to Change Chrome Address bar color in your WordPress website

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.

Change Address bar color in Mobile Browser: Method 2

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 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.

How to Change Chrome Address bar color in your WordPress website

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!

Man Behind the Blog - Navin Rao

Blogger | WordPress Savvy

Navin Author
A WordPress Savvy, Content Strategist and creator of this blog.At QuestionCage we talk about Technology, SEO, WordPress to make your blogging venture much successful and eventually let the passive money to flow in.

Along with QC, I maintain my personal blog NavinRao.com as well, where I share my experiences and tips only on WordPress.

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

  1. 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.

  2. 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.

  3. 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

  4. 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


Leave a Comment

Affilaite Disclaimer - The post you are reading might contain few affiliate links, that states if you buy any product clicking on those links I may receive a small commission out of it, no additional cost to you at all. This way you are helping me running this site effectively. I share unbiased view-point from my personal experience. Full Disclaimer

QuestionCage Logo Main

Better Security for your WordPress Blog

Get rid of all the Malware injections and stay away from vulnerabilities. Spend a few minutes and sleep tight. Enter your email and get acess to the article.

You have Successfully Subscribed!