Want to add color to suite your WordPress theme to your mobile browser address bar and look professional?
Here is the simple step to add colors to your mobile browser address bar:
- Goto Appearance then Editor.
- Select your Theme Header file (usually header.php).
- Add the following to the header section after .
- <!– Chrome, Firefox OS and Opera –>
- <meta name=”theme-color” content=”#4db2ec” />
- <!– Windows Phone –>
- <meta name=”msapplication-navbutton-color” content=”#4db2ec” />
- <!– iOS Safari –>
- <meta name=”apple-mobile-web-app-capable” content=”yes”>
- <meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent”>
- Change the content “#” as shown above to your color. If you are unsure the color code in HEX, you can use photoshop or any other paint application to check the color. As you can see, mine is set to #4db2ec.
- Save and update the header file.
- Test from your mobile phone browser. Remember to use Chrome or Firefox or Opera browser.
I have tested mine on Android Chrome browser and have yet to test in other browsers. You may test yours and leave a comment below.
Updated 17-06-2017: Careful of the “” symbol and Hex color # symbol.
