Ultimate magazine theme for WordPress.

How to Change the Color of Address Bar in Mobile Browser to Match Your WordPress Site Theme Color


Recently, we was asked by our clients, on how to add custom theme color to their browser to match with their WordPress Theme, when browsing on mobile platform, due to their theme don’t have this feature inbuilt, so we have to tell them to give us more time, to figure out how this feature can be added to their sites in a custom settings. 

Setting this color to your mobile browser, is not a bad SEO practices, rather it enhanced the beauty of your site in mobile views and also it speaks good about your site, telling your visitors that, your site colors are well arranged in terms of the designing. 

Now Have you ever noticed that many popular websites like BBC and Facebook use their own brand colors for the address bar in mobile browser. In this article, we will show you how to change the color of address bar in mobile browser to match your WordPress site.


Why Match Address Bar Color in Mobile Browser?

Yes, This is the question we asked most of our clients, in adding this feature to there sites, and they all gave us reasonable answers, that made us to go ahead in creating this article, Now here is the answer we got from one of our clients, that pushed our team spirit in putting it to work.

They Said that: Most of the popular WordPress themes, they knew before now, are all mobile responsive. This makes your site looks great on mobile devices. However, it still looks and feels like a website.

And also, Matching the color of address bar to your WordPress site, gives it a native app-like feel. This improves user experience, which ultimately boosts sales and conversions.

Note: However, please note or be reminded that currently, this feature is only supported or works for Google Chrome web Browser on Android devices using Lollipop or newer versions. Maybe in future updates of other mobile web browsers might support this feature to be added to their browsers.

Adding Match Address Bar Color on Mobile Browser to Your WordPress Theme

[sociallocker id=”3453″]

Simply add this code in your theme or child theme‘s header.php file just before the closing </head> tag.

<meta name="theme-color" content="#c75ea3" />

Note that, This line is a HTML meta tag used by Google Chrome on Android to change color of address bar in mobile browser. The content field has the hex code for the color you want to use as theme color.

Are you Not sure how to get the hex color code?

You can get the HEX value of a color using any image editing software like Adobe Photoshop, Gimp, Paint, etc. Also, you can search for color codes in Google Search Engine, to see the lists of color codes you want to your browser theme color.

Note: If you are Using Publisher, WordPress Theme, You can add this code to your Publisher Theme Settings page, in the section of Custom Code: e.g: Theme Options/ Analytics/Custom Code/Code before </head> Add the code in this box, and you are done in adding it.



That’s all, we hope this article helped you learn how to change the color of address bar in mobile browser to match your WordPress site. 

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: This page may contain external affiliate links that may result in us receiving
 a commission if you choose to purchase said product. The opinions on this page are our own.
 We do not receive payment for positive reviews.

Subscribe to our newsletter
Sign up here to get the latest news, updates and special offers delivered directly to your inbox.
You can unsubscribe at any time