With the latest Android update, it supports browsers to change address bar color. This new feature gives rich look to a website and works best for those who specially designed their websites for mobile devices.
To view this, you can visit Facebook, Quora, and many others to view their color schemes applied to address bar which gives their website rich look.
You can view some samples below:
But many don’t aware of the fact that WordPress by default doesn’t provide this color changing option. So, to use this feature your WordPress theme should compatible with Mobile Browser. For this, your theme should either responsive or have a separate child theme for mobile devices.
There exist two ways to change the address bar color of mobile browsers.
- Manually placing the code inside “header.php”
- Using WordPress plugin
1. Manually placing the code inside “header.php”
If your theme contains any child theme, then got to child theme “header.php” or else you have to edit main theme “header.php”.
Note: Before making any changes to your header.php, make sure you should make a backup of it. Its always safe to backup your system files before making any changes to them.
Procedure:
- Use your FTP client or open file explorer on your hosting and navigate to “WP-Content/Theme” directory.
- Then open the theme folder which you have applied to your website
- Inside your theme folder search for “header.php” and open it
- Then search for <head> tag and paste following code before ending of head tag i:e; </head>
<meta-name=”theme-color” content=”#000000″>
- Above code will reflect black theme color on your website, if you want to change it then replace the HTML color code from “#000000” to your desire one.
- For selecting HTML color code you can visit this website.
- Now save your “header.php” file and check your website for the effect.
2. Using WordPress Plugin
If you don’t know how to edit backend files or looking for an easy option, then “Mobile Address Bar Changer” is the plugin you should implement. Its super easy to use and does the job with one click.
Procedure:
- Go to your WordPress Admin Panel and navigate to Plugins->Add new
- Then search for “Mobile Address Bar Changer“, install and activate it
- Now go to your Settings->Mobile Address Bar Changer, select color and press “Save Changes” button
- Now your website is configured with your selected color, visit your website through the mobile browser to see the effect
Note: Please clear your WordPress site and web browser cache to view desire changes.
