With the latest Android update, it supports browsers to change the address bar color. This new feature gives a 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 the address bar which gives their website a 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 be compatible with Mobile Browser. For this, your theme should either be 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 go to the child theme “header.php” or else you have to edit the main theme “header.php”.
Note: Before making any changes to your header.php, make sure you should make a backup of it. It’s always safe to back up your system files before making any changes to them.
Procedure:
- Use your FTP client or open file explorer on your hosting and navigate to the “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 the following code before ending of head tag i:e; </head>.
<meta-name=”theme-color” content=”#000000″>
- Above code will reflect the black theme color on your website, if you want to change it then replace the HTML color code from “#000000” with your desired one.
- For selecting HTML color code you can visit this website.
- Now save your “header.php” file and check your website for the effect.
Also Read:
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. It’s 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 a color, and press the “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 desired changes.
