How to limit the colors a user has access to in a WordPress theme

Discover in this tutorial how to prevent a user without admin role to use any color in a WordPress theme.

With the arrival of the block editor and the Site Editing to WordPress, one of the concerns of designers and developers is that the end user has “too much” control over the design and can break the work of the professional.

That’s why WordPress 6.1 came with several filters that allow you to access the values of the theme.json file and modify them. If you combine this with conditional tags based on the user role you can control what settings each user has access to:

These are some of the things you can access:

• Color palette, gradients and douotones
• Fonts/Typography (families, size…)
• Site width
• Spacing
• Block styles
• Global style variations
• Management of template parts (block themes)
• Managing block templates (block themes)
• Define custom CSS properties
• And more.

A very interesting option is to block the colors that are accessible by user role. For example, you can decide that only administrators will have access to all options.

This way, you make sure that a user with author or editor role is not “too creative” in choosing colors and is forced/invited to use the already defined color palette.

Let’s see how you can achieve this.

Display all color controls only to WordPress administrators

Add the following code at the end of functions.php or in your functionality plugin:

In this code you use the filter wp_theme_json_data_theme with the current_user_can function so that all color controls are displayed only to administrators.

Once applied, non-admin users will not see the option to choose any color, the default palette or gradients:

Basically they will see the colors from the color palette you have defined in the theme.

You can customize which controls you want them to have access to by modifying the array of 'color'. Just modify the value to be true or false depending on what you are interested in.

For example, if you don’t even want the “Text”, “Background” and “Link” options to be displayed (in the blocks that support it) you can use the following code:

Conclusion

Now you know how to limit the color controls that non-administrator users can use.

This allows you to give clients or collaborators access to modify content without losing the consistency of the designated color palette.

Any questions? Let me know in the comments.

And if you want to give me any suggestion for future tutorials, leave it in the contact form. Advantages of being a subscriber. 😉