Add color to the search bar based on your site

Lately you might have seen that the search bar on your mobile browser changes color, based on the site your on. Here is a short guide, showing how you can apply this to your own website:

mobile browser search bar color
Three websites, each with its own search bar color.

It’s pretty easy to apply this to your own site. All you have to do is add these three meta-tags to your header.php file:

Firefox OS and Opera:
<meta name="theme-color" content="#4285f4">

Windows Phone:
<meta name="msapplication-navbutton-color" content="#4285f4">

iOS Safari:
<meta name="apple-mobile-web-app-status-bar-style" content="#4285f4">
  • Using a FTP client, like FileZilla or Cyberduck, find your header.php file under WordPress –> wp-content –> Themes –> Your theme.
  • Copy the header.php to your desktop and insert the meta-tags in the head section of your document. Insert your own color code, save, upload and replace the old header.php file.
  • And thats is! Now all you have to do is visit your site on your phone and check that your color is up! Wooho!