Changing the color of the address bar in mobile chrome browser for your WordPress Blog

A neat way of adding eye candy to your WordPress powered blog is by changing the color of the address bar in mobile chrome browser. The color can be made to specifically match the theme color of your blog. While viewing it on your Android smart phone, even the notification space on the top changes color.

On the left is the blog with the effect. As one can notice, the notification bar on the top also takes the same color. On the right is the blog without the effect.

How to change color of the address bar

First find out the hex code of the color which you want to use. Use your theme customisation to check the exact color. Next, insert this code in the header.php file in the </head> tag.

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

The hex code, #26CE61 is light green. You need to change it as per your theme color or any other color you want.

If you do not have access to the header file, you can use the plugin Insert Headers and Footers. This plugin allows easy insertion of any code int he header or footer.

Also note that this effect is only visible for mobile browsers like Google Chrome.