With the latest Android update now it allows the mobile web browsers to change the colors of the address bar. For an instant when you visit Facebook you may notice that it changes tab colors in chrome and the notification area accordingly. This will give some attractive and new look to your web pages. By default WordPress not provide such browser tab color change option.
In order to use this feature, your WordPress theme should compatible with the mobile browser. If there’s no separate mobile them, you should have a responsive theme. Mainly we can do this Browser tab color in two ways. Changing the child theme “header.php” file or by installing a WordPress plugin. Most of the premium themes come with a framework and child theme. If you wish to follow the second step, you have to edit your child theme. Both of theme methods are really simple, but if you edit the child theme, when you’re updating it you will lose these mobile web page color tabs changes. But if you installed a plugin to change mobile browser tab colors, then it will not affect theme update.
Right now this color browser effect works with Google Chrome, Samsung Internet browser. The easiest method is installing a plugin, therefore, first I’m going to show how to use this plugin.
Change the Color of Address Bar in Mobile Browser WordPress.
Install the “WP Color Browser”. To do that navigate to the WordPress admin area “Plugin>Add New”. Type “WP Color Browser”. Then click “Install”.
Once installed the plugin, navigate to “Appearance>Color Browser”.
Under the choose color, select a desired color that match with your theme. To apply the changes, click “Save”.
Now clear the cache of your site and web browser. If you are using Cloudflare purge it cache too. Then open your WordPress site using a smart phone and view the address Bar color changes.
Change the WordPress Mobile web browser tab colors.
This second method we have to edit the child them “header.php” file. If you don’t have a child them, then you have to edit the main them file “header.php” file.
- Using an FTP client, such as FileZilla navigates your web host WordPress site “/WP-Content/Theme” directory. Then navigate to the theme folder and file the “header.php” file.
- Search for the </head> tag and paste the following code just before that tag.
<meta name=”theme-color” content=”#66d617″ />
- If you need to use your own color change the “#66d617” HTML color code as you want. You can find more HTML color code on this web site. Now save the changes.
To view the browser tab color changes, clear your WordPress site cache and your web browser cache.
