How To Add Color Presets To The WordPress Customizer In 2022? 5 Quick Steps

Affiliate disclosure: In full transparency – some of the links on our website are affiliate links, if you use them to make a purchase we will earn a commission at no additional cost for you (none whatsoever!).

This article is dedicated to How To Add Color Presets To The WordPress Customizer. We will add colour presets to the WordPress customizer in this tutorial.

Making your website a solid colour scheme will assist reinforce your brand and show professionalism. Customizing your theme by hand is laborious.

Adding colour presets to the WordPress Customizer may help streamline the process.

What are colour presets and why should you use them? Follow our five-step guide to add them to the WordPress Customizer. So let’s begin!

How To Add Color Presets To The WordPress Customizer In 2022?: 5 Steps

To learn how to build colour presets for your website, go here.

How to Add Color Presets to the WordPress Customizer

Learn how to add colour presets to the WordPress Customizer in five easy steps.

1. Your Site’s Data Should Be Backed Up

Your theme’s functions.php file has to be edited to include colour presets. We strongly advise that you create a backup of your website before continuing.

Having a copy of your site’s files in case anything goes wrong is a good idea. In order to protect your website, there are a number of options available to you.

Using a plugin like UpdraftPlus is a simple solution. It’s easy to back up your site using this freemium application. Other options for storing the data off-site include Google Drive and Dropbox.

2. Create a subtheme for your main theme

A theme update may overwrite any modifications you make to the theme’s files if you make them directly. When adding custom code, you should always use a child theme to avoid this.

There are a variety of approaches you may take here. You may install a child theme for Beaver Builder, for example. You may even create a blank child theme if you’re using a different theme.

It is possible to build a child theme using free WordPress plugins. Make sure to activate your child theme in Appearance > Themes once you’ve added it.

3. In Your Child Theme’s functions.php file, add the following code

Appearance > Theme Editor in the WordPress dashboard is where you’ll find your new child theme. Select the child theme from the drop-down option on top of the screen.

Check your security plugins to see if they’ve blocked access to the Theme Editor in the admin menu. Locate the functions.php file on the right-hand side under Theme Functions.

The following code should be added to the file. The preset colours you choose to use will display in the boxes below the colour picker square when you use this code.

4. Customize the Color Presets

Next, edit the palettes option to add or remove hex colours. You may change the number of boxes in the Customizer by changing this code.

Add as many hex colours as you like to your palette. To save your changes, click the Update File button at the bottom of the Theme Editor.

5. Test Your Color Presets Before Saving

After updating your modifications, check that the colour presets are available in the WordPress Customizer. Reload your website in the browser, then go to Customizer.

You should notice the new hex colours in the colour selector. It’s possible to edit the HSL parameters to change the hue, saturation and brightness of the colour picker squares and sliders.

If everything is correct, you’re ready! You’ve now customised the WordPress Customizer. You may edit the colours in your theme’s functions.php file.

Quick Links:

Conclusion: How To Add Color Presets To The WordPress Customizer In 2022?

Your brand colours will likely be used across your WordPress website’s pages and articles. Manually adding them to your content takes time. Instead, you may generate colour presets.

Do you have any queries concerning the WordPress Customizer colour presets? Let us know in the comments!

Aishwar Babber

Aishwar Babber is a passionate blogger and a digital marketer. He loves to talk and blog about latest tech and gadgets, which motivates him to run GizmoBase. He is currently practicing his digital marketing, SEO, and SMO expertise as a full time marketer on various projects. He is an active investor in DotComDevelopment and