How to change the colour of address bar in mobile browser to match your WordPress website

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

How to change the colour of address bar in mobile browser to match your WordPress website

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.

How to change the colour of address bar in mobile browser to match your WordPress website

Once installed go to settings >> header and footer where you will see the following page

How to change the colour of address bar in mobile browser to match your WordPress website

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.

Spread the love
How to change the colour of address bar in mobile browser to match your WordPress website

Written by: John Cook

Author

About: As the founder of Swift Designs, WC Success Academy, Wiz Plugins and Learn Wp by Swift Designs, my goal is to empower website owners around the world to take full control of their WordPress powered websites. I've been developing websites for close to 10 years and have a deep understanding of WordPress and how it works. As an active plugin developer with several plugins in the WordPress plugin repository, this gives me a unique understanding of the inner workings of WordPress. My goal with Learn WP is to allow WordPress website owners the ability to discover the true potential WordPress has to offer in an uncomplicated and easy to understand way

Leave a Reply

Please Login to comment
  Subscribe  
Notify of