A comprehensive guide to creating theme color palettes.
As many of you know, WordPress is in the middle of developing a brand-new editor called Gutenberg, which will present an entirely new way of publishing content: using a block level approach. It is currently available as a plugin, and will be shipped in WordPress 5.0.
The Gutenberg editor will revolutionize the way we publish content with WordPress, and many folks—myself included— are very excited about expedited workflow and granular layout options.
To give users a deeper level of control over the display of content, Gutenberg will offer a number of exciting features.
Theme Color Palettes
Among those features include Background Color and Text Color, which allow you to customize the way that text, paragraphs, and buttons appear on your website.
I can see there being plenty of other uses for these features, but for now, I’ll focus on these—since they will be the most widely used.
Before I show you how to add theme colors to the Gutenberg editor, here’s how the default controls appear in the dashboard:
The Gutenberg editor ships with 11 default colors, including pink, red, orange, yellow, green, blue, and gray. In addition, it will always include a color picker with the palette, for further customization.
This gives the user full control on what color is used for various elements such as text, background, and buttons. But there is also a way to implement a unique color palette as well.
Custom Theme Color Palettes
One of the many benefits of WordPress is the extensibility it offers to designers and developers who build websites for clients.
The Gutenberg editor provides a method to create custom color palettes, which is especially helpful to end users and anyone who publishes content on a regular basis.
Below is the code that is used to add theme colors to the Gutenberg editor. This can be used to customize the Genesis Sample theme:
Note: The first 3 hexcodes #f5f5f5, #999999, #333333 are base colors that are found within the theme, and the following two lines pull the link and accent colors that are tied to the Theme Customizer.
A screenshot that shows custom colors in the palette:
The color picker that is standard in the Gutenberg editor can be helpful. But let’s face it—there are plenty of instances when delivering that capability might be considered a suboptimal situation.
A designer or developer might prefer to remove that option from client use. Here’s the code that will remove the color picker:
A screenshot that shows the custom palette, sans color picker:
You might be wondering what some of the use cases would be for adding custom theme colors to your website. Hint: There are many.
Use Cases for Custom Theme Colors
The first—and most obvious—use for custom theme colors is to change the color of text. Perhaps you wish to create a separate look for text, much the way I do at the beginning of my blog posts:
An example of using custom theme colors in the Gutenberg editor to style an intro paragraph, paired with italics, and centered text.
Beyond that, you might want to provide a note within your entry content, which points out something specific to your reader:
The Genesis Framework combines expert knowledge in SEO, design, performance, and security, to help you build beautiful and reliable WordPress websites. Click here for more info.
Or quite possibly, you may want to display a call-to-action button, which draws attention to a potential customer or subscriber:
Below is a list of resources that will help you understand building and styling themes with better integration for the Gutenberg editor:
- Styling Themes for Gutenberg — ThemeShaper
- Gutenberg Theme Support — WordPress.org
- Gutenberg, or the Ship of Theseus — Matias Ventura
- Getting your theme ready for Gutenberg — Bill Erickson
- How to add WordPress Theme Styles to Gutenberg — Rich Tabor
I will be exploring Gutenberg and the impact it will have on the WordPress experience—as it pertains to Genesis, the community of developers who build with Genesis, and our theme customers.
In the meantime, follow me on Twitter as I share my thoughts on web design, minimalism, and life as a creative entrepreneur.