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.
![Color controls shown to administrators](https://osomcode.com/wp-content/uploads/2023/06/Color-controls-shown-to-administrators-1024x774.webp)
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.
![Color controls shown to non-administrators](https://osomcode.com/wp-content/uploads/2023/06/Color-controls-shown-to-non-administrators-1024x672.webp)
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:
To see this and another 1097 code snippets of this website, login or subscribe here.
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:
![Color controls shown to non-administrators](https://osomcode.com/wp-content/uploads/2023/06/Color-controls-shown-to-non-administrators-1024x672.webp)
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:
To see this and another 1097 code snippets of this website, login or subscribe here.
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. 😉