How to change Chrome Tab color on your WordPress Website | Without Plugin

 Chrome tab colors represent a uniqueness of a website, making more authority by its design. It looks more like an App when a Theme color is defined in a website. Learn How to change Chrome Tab color in WordPress.

How to change Chrome Tab color

It’s really easy to implement, Only a metadata is needed to be inserted in the Theme header, and we are done installing the Theme color in our WordPress website, Let’s see How to change Chrome Tab color in WordPress Website.

Inserting code into Header:

 Firstly, Go to HTML Color Picker, and get a Hex color code of the willing color of Header Tab. You can head over to W2School Html color picker to pick a Color.

Navigate to Admin panel > Appearance > Theme Editor. Click on it.

 At the Right Sidebar, Look for ‘Theme Header‘ or ‘Header.php‘. After you’ve located it, open it up by clicking on it. Take note, do not do unnecessary changes or else you website might malfunction.

 Now, Find thetag by pressing Ctrl+f and searching, Copy the code provided below and Paste before the closing oftag.

 Apart from directly inserting the code into the Theme files, We can use a comparatively safe method by using a Code inserting Plugin. These plugins helps keeping the code unharmed even after updating the theme.

Copy the Code from Here:

Using a Plugin:

 Using a plugin can be both safe and easy way to insert any code snippet inside your Theme functions. For this we’ll use a Plugin named “Insert Headers and Footers”. Navigate to Dashboard > Plugins > Add New > Search for ‘Insert Headers and Footers’.

install header inserter

 Click on Install, Then after installation, Click on to Activate Button. The plugin will soon be ready to go with your Site. Now it’s time to Insert the Code into the Theme Header via the Plugin.

Pasting the Code inside the Plugin:

 Go to Settings > Insert Headers and Footers > Scripts in Header.  Now Paste the Code into the Header section, Make sure not to misplace the code elsewhere, or the code might not work.

theme color code wordpress

 Once Pasted Click on Save button by scrolling down to the Page. Now you’re good to go, follow along for next steps.

We grew our traffic by 3000%

Let's see how!

Join 5,000+ others who get our weekly newsletter with
insider WordPress tips! Best of Luck!

Testing the Feature:

 Need to remember, These Theme Colors are only applicable to Mobile Chrome Browsers, Let us now test it out how well it performs with the previous and after Outputs.

How to change Chrome Tab color

 As we can see the code is working properly, I hope you’ll like this tutorial about “How to change Chrome Tab color in WordPress”.

Conclusion:

 How this Tab color can help in my Website’s visibility. Well, most of the users like to have intuitive websites that have proper color scheme as well as designing.

This type of Tab colors not only make your site unique but represents theme color beautifully.  

I hope this Article is helpful to you and you have now got to know How to change Chrome Tab color on your WordPress Website, If you’re having any problem, Feel free to ping us anytime.

Editorial Staff

Editor of TurboHosty, Keeping all posts up to date. Engineer by profession, Blogger by passion.

Leave a Comment