HomeTechnologyChange Mobile Browser Address Bar Tab Color in 1 Min WordPress

Change Mobile Browser Address Bar Tab Color in 1 Min WordPress

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:

wordpressaddressbarcolorchanger2

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.

  1. Manually placing the code inside “header.php”
  2. 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.

- Advertisement -

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.

wordpressaddressbarcolorchanger1

  • 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.

Keep exploring...

WhatsApp Introduces 1-Min Long Voice Status Updates

WhatsApp has added a new feature that allows users to share longer voice messages in status updates. The feature was added to both the...

Best Will Smith Movies and TV shows Ranked

Will Smith Movies and TV Shows: Are you looking for the best Will Smith movies and tv shows to watch this weekend? Willard Carroll...

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Related Articles

Apple’s Source Code for Internal Tools Allegedly Stolen

Apple was allegedly targeted in a data breach that resulted in a hacker acquiring...

YouTube Music May Get an AI-Powered ‘Ask for Music’ Feature

According to a new report, YouTube Music may soon include a new artificial intelligence...

iOS 18 Lets Users Hide App, Widget Names From Home Screen

Apple's upcoming iPhone operating system update, iOS 18, is expected to include a number...

Apple Vision Pro 2 Development Reportedly Halted Amidst Poor Sales

According to a report, Apple Vision Pro 2, the rumored successor to the Cupertino-based...