You might be noticed; some websites have a colored address bar in the google chrome mobile browser.
It beautifies the website’s presentation and I am pretty sure you also want to add such a feature to your website also.
In this article, I explain how such a colored address bar worked and how easily you can apply this on your WordPress website.
Theme-color HTML meta tag
Meta tag adds details to a web page. Numbers of meta tags are available there.
Theme-color meta is the reason that shows colored address bar in Google Chrome mobile browser.
You just need to add this line in between the head tag. Replace color code with your color code.
<meta name=”theme-color” content=”#4285f4″>
Browser list that supports Theme-color tag
Although not all browsers support this tag till now, Google Chrome, Safari, and Samsung Browser fully support it.
In some mobile, MI browsers also support theme-color Html tags.
iOS Safari browser also supports this but in some different methods.
On Safari mobile browser, it changes the transparency of the bar in the following types.
- Default: Show default browser nature, which means bar opacity is full.
- Translucent: Show some level of transparency and website content is showing blur in the address bar.
- Dark Mode: It allows to show dark address bar. Same as in dark mode.
The below image shows how the browser supports this HTML tag.
Adding Colored Address bar to WordPress Website
This is just an HTML tag, which needs to add to the head tag. So, it can be easily added with some little code customization in header code and with header insert type option. Which are most of the themes provides.
One can also use the insert-header script plugin and add this to the website without any code customization.
Color Your Bar WordPress Plugin
As mentioned above adding theme-color meta tags to a WordPress website is quite simple and most of the Themes provide options to add meta tags.
Then why we recommended a plugin for this?
Color Your Bar plugin allows you to add color to the address bar in simple steps. Means using UI.
With Color Your Bar one can add different address bar colors of each post, page, and custom post types or can set global.
Color your bar WordPress plugin also support translucent bar for safari browser.
How to Use Color Your Bar plugin?
This plugin allows setting global settings from the Admin page. Here one can set the default color or can choose which post type, every post can have different address bar color.
Once you select Post types and save the configuration, the meta box will be added to the related post and the default color will be selected by default.
So, you don’t need to set colors for each and every post. Different colors will be visible on selected posts only, on other posts, the global colors will be shown.
For now, only Google Chrome, Safari, and Samsung Browser fully support colored address bar. But in the future other browsers also support it. With the Color Your Bar plugin, A WordPress website can have dynamic address bars.