In this guide, we will show you how to change the colour of address bar in mobile browser to match your WordPress website.
When browsing a website on your mobile you may have noticed that some websites use their own branding colours in the address bar. Examples of websites that do this are YouTube, Facebook and WooCommerce. Even our own site has it. Go ahead, check it on an Android browser. It’s an amazing way to make your website, your brand, stand out and remain memorable. However, it’s not available on all browsers and devices with Android Chrome being the only supported browser at the moment. With that in mind, why would you want to put the effort into such a small audience?
When creating your online presence it’s important to try and stay relevant and to stand out from the crowd. Any personalised branding is an advantage. Additionally, even though Google have provided this functionality since 2014, very few websites have utilised this feature. Even today, many popular themes don’t offer the support for it out of the box. Because so few websites are doing this, it’s the perfect way to make your website stand out.
How to change the colour of address bar in mobile browser to match your WordPress website
There are several ways in which you can apply different colours to the address bar on your website. Each one is extremely simple. In a matter of seconds you’ll find that you will have something unique and different.
Method 1. Use Color Mobile Browser Address Bar plugin
This method is perhaps the easiest. Simply install the plugin following our how to install a WordPress plugin guide. Once installed go to appearance >> Mobile Browser Address Bar Color. Select the colour and save. Once saved clear the cache and check the website on an Android device using the Chrome browser. You should see the set colour appear.
View the plugin at WordPress.org here
Method 2. Add a meta tag to the header using a plugin of theme
If you select this option you need to add a single line of code to the theme options page or a header injection plugin. Some themes allow for custom code to be inserted between teh <head></head> tags. This option is usually only available with premium themes. Examples of themes that offer this are Divi, Avada and Flatsome. If your theme doesn’t contain this option you can use a plugin like Head, Footer and Post Injections.
Once installed go to settings >> header and footer where you will see the following page
Copy and paste the following code into the <HEAD> PAGE SECTION INJECTION field and click save
<meta name="theme-color" content="#1a0a38">The content=”#1a0a38″ is the colour that you want your address bar to be. If you’re unsure how to find the hex value for the colour you want go to Google and search for hex color picker. Google will load an easy to use colour picker that will give you a hex value that you can use
Other easy ways to find the colour are to use other websites that have colour pickers. W3 Schools has a similar colour picker to the one available on Google
If you want to precisely match the colour used by your theme there are a few Chrome browser extensions that will make it very easy to find. The extension we use is Eye Dropper. It’s incredible easy to use. Simply click on the eyedropper in your browser extension list and click on any colour on the page to select the colour. Once selected you will notice the little colour square will change colours. Click it again and in the top right of the little window will be the hex code to use. this will guarantee that the colour matches the colour of your theme
Method 3. Add a meta tag to the head of your child theme
This method is the most difficult of the three and is recommended only if either of the above two doesn’t work. The reason being is that a mistake can cause your website to stop functioning, and if you are unsure how to fix it, solving it can be expensive, both in costs of downtime and repairs
Add the following code to the bottom of the functions.php file of your child theme. Ensure you add it before any closing ?> if it appears at the end of the file.
function learnwp_address_bar_color() {
echo '<meta name="theme-color" content="#1a0a38">';
}
add_action( 'wp_head', 'learnwp_address_bar_color' );Once again, the content=”#1a0a38″ is the colour that you want your address bar to be. Simply add the colour code to the field, not forgetting the # at the beginning and the changes will be applied
If the changes don’t appear straight away remember to clear your cache and refresh.
That’s how to change the colour of address bar in mobile browser to match your WordPress website. While it won’t be visible to all users, those who will see it will certainly notice it, and with such a small number of websites utilising this feature, you’ll be sure to stand out of the crowd.
