Blog

Did you know that it’s possible set the color of the address bar / status bar in mobile browsers to match you site colors? Well you can and its easier than you’d think.

All you have to do is add a <meta> tag (well, a few, if you want it to work on most mobile browsers) to your theme header file and you are done. And if you use our WordPress Hooks Generator, then you can do it even faster and easier!

Before we get started, here is how our site currently looks on a mobile device using Google Chrome:

And as an added bonus (on Android only) the color assignment follows all the way to the multi-task app switcher:

Getting Started

So lets get started by heading over to the Hooks Generator, then click the “Hook” tab:

• Set the Hook Type to “Action”
• Select wp_head as the desired hook
• Assign your Callback Function a name (I used address_mobile_address_bar, but you could obviously use anything you’d like)

Next, click the Code tab and paste in the following code:

View snippet Clone snippet Download snippet

Change the color’s HEX Code to match your desired color on line 1, then click the Update Code button — and you are done.

All that is left for you to do is simply copy the generated code snippet and paste it in you theme’s functions.php file. Once you do that, check out your site with Google Chrome on your mobile device.

The Final Code

View snippet Clone snippet Download snippet

Doing it Like a Pro: If you want to make this even simpler then use “Clone Snippet” button above, click the code tab, and just change the color and update the code, done once again (but this time like a pro).

A few Gotcha’s

• On Android, the color you set above is applied to Google Chrome address bar and darker 700 tint of same color is applied to Android navigation bar every time someone visits your website.
• msapplication-navbutton-color meta tag also works for desktop IE pinned tabs
• on Safari, you cannot specify the exact color, but instead you can use:
  • default – the status bar appears normal.
  • black – the status bar has a black background.
  • black-translucent – the status bar is black and translucent.

  And also if set to default or black, the web content is displayed below the status bar. If set to black-translucent, the web content is displayed on the entire screen, partially obscured by the status bar. The default value is default.

Wrapping Up

Other than the color of the address bar, you can customize many other things on different mobile device like allowing the site to work as a Web App in Full-screen mode, or enabling / disabling automatic detection of possible phone numbers in a webpage in Safari on iOS. There are way too many to list here, but you get the idea.

As always, your feedback is more than welcome. Enjoy!