Define the design: Configuring styles in WordPress

Implementing brand styles

Building a new website? If you’ve got brand assets ready to implement, you will want to check out the new Styles option in WordPress. Using a Block Theme, you can now assign styles like typography, color, and layout options to the entire site at once. Additionally, you can define how blocks are formatted, no matter where they are used on your site.

Before we begin, there is one very important thing to remember. Changes you make in the Styles will impact your entire site. Modifications will apply to posts, pages, and templates.

How to define styles

Once you’ve installed and activated a Block Theme, go to Appearance > Editor. In the top right corner, you can select the Styles button (between the Settings icon and the kebab menu) to display the Styles sidebar.

Once in the Editor, you can select Styles for the style options panel to display.

Appearance > Editor > Global Styles displayed

1. Typography

Within the Typography option, you can access text and link styling options.

Styles > Typograph

Within these, you can select the styling you want throughout your site.

Styles > typography > options > text

to go back to the main styles screen, select the back option at the top of the panel

2. Colors

Within the Colors options, you can define colors to use throughout your site.

Styles > Colors

Within the palette option, you can override the existing colors and replace these with your own. To add a custom color option, select add, and then select the Show Detailed Inputs button to insert your own Hexidecimal or other color value.

Styles > Colors > Custom > Show Detailed Inputs

If you select the gradient option, you can add your own custom gradients.

Styles > Colors > Palette > Gradient

After defining the colors for your site, go through the Background, Text, and Links color options.

3. Layout

The layout option enables you to use padding around your entire site, using a variety of measurement options.

Styles > Layout > Padding options displayed

 

4. Blocks

Want to style how a specific block appears throughout your site? You can within the Block options. Every block will contain its own options.

Note: At this time, many third-party plugins are starting to integrate with these settings. If you are using a plugin that contains settings in the Customizer, the Customizer will still display.

Styles > Blocks

For example, in the Social Icons block, you can adjust the spacing. Other blocks may include color options and more.

Conclusion

Styles, or Global Styles as they were first named, are a new way to modify the Styles that come with your theme. You can get the precise look you want within Editor > Styles. Want a more code way to define these settings? Check out the Developer Handbook section about Global Styles, including theme.json.