How to Match WordPress theme color with Address Bar Color in Mobile Browser?

If you present your WordPress theme beautifully with match color combination in mobile browser then it will help to create a brand color on smart device. I am not sure that have you noticed about BBC, The Gurdian, Facebook all of them are displaying with brand color on mobile browser. Every website has its own brand color and visitors can recognize known website easily by exploring color combination.

There are many branded color using for website such as Green, Blue, Red, Orange, purple and the colors helps to recognize the site easily. And it creates a color brand on visitor’s mind.

Why should we match the address bar color on Mobile browser?

Recently over 60% readers using Smartphone for visiting websites. Even in case of BloggerSpice I am receiving 70% readers from mobile devices. But when readers visit blog or website from Smartphone then they feel this is not a part of Smartphone. For example when we open an App in Android device then you will see same color on whole screen. And if you match color for your WordPress theme then visitors will fell like native app. As a result, it will improve user experience, and for e-commerce site it will help to increase conversion rates.

I know you are feeling excited and want to add this on your WordPress theme. Don’t worry in this tutorial I will show you how to do it? But note that it will only work on Google chrome web browser on Androind devices. I have checked on Android Kitkat but it works better on Android Lollipop and on updated version.

Applying the Trick on WordPress Them?

To make it works we will use a simple HTML META tag and this is very easy to add. This META tag use to change address bar color in Google Chrome mobile browser on Android OS. However you can use any hex color for matching the browser color. For matching the color just use our color picker and select hex color code and proceed to the below steps-

Step 1 Log in to your WordPress account and go to Dashboard 

Step 2 From Dashboard click on ->Appearance->Editor

Step 3 Now locate header.php or Child Theme’s header.php file from the right column and instantly header.php file will open in Editor

Step 4 Now add the following line just above the closing </head>

<meta name="theme-color" content="#0090FF"/>
<meta name="msapplication-navbutton-color" content="#0090FF"/>
<meta name="apple-mobile-web-app-status-bar-style" content="#0090FF"/>

Customization

• Please alter #0090FF with your theme’s color code.

Step 5 Finally click Update File button from the bottom or Editor.

Everything is done. And to see it live please open your WordPress site on Android device and see the result.

I hope it is working perfectly. And if you like this tutorial please subscribe to our VIP Mail list to get the latest content notification. Thank you.