Your website’s design is a crucial element of your brand image and first impression on potential customers, followers, and clients. Using WordPress Global Styles can help you achieve a cohesive and consistent appearance across your site without the need to individually edit each page or block.
With this feature, you can easily modify background colors, typography, and other elements in one central location, resulting in an improved user experience. In this guide, we’ll cover the basics of Global Styles, how they can benefit your website, and how to use them to style your WordPress site.
What are WordPress global styles?
It’s essential to understand the basics of WordPress Global Styles before using them on your WordPress site. This feature works in conjunction with the theme.json file, which is a new theme settings file that developers can use to define default styles and settings for both the entire site and individual blocks.
When you place the theme.json file in the root directory of a block-based theme, Gutenberg will automatically apply the styles defined in the file.
This file is a powerful tool in WordPress 5.9’s full site editor, allowing theme authors to share Global Styles and Global Settings. The data in these JSON objects is converted into CSS by WordPress, which users can then further customize in the WordPress editor.
In previous versions of the Gutenberg plugin, it was necessary to register support for style properties in a block before they could be used in theme.json.
Additionally, in classic themes and older versions of WordPress, you had to use PHP to define colors and fonts and add styles for both the front and back end of your theme.
However, with the latest release, when you use a theme with a theme.json file, WordPress will automatically add the styles defined in the file to your stylesheet, making it easier to customize the colors, typography, and other aspects of your theme.
Why Use WordPress Global Styles?
There are several benefits to using WordPress Global Styles. They are intuitive and easy to use for users of all skill levels, and can streamline the web design process by making it easier to change the appearance of your site.
Global Styles may be especially useful for WordPress beginners who want to design their own website without hiring a developer.
On the other hand, theme developers may find Global Styles particularly useful, as they allow for easy styling of blocks within the Block Editor and simplify the theme development process by offering a range of controls that minimize the need for custom solutions.
This can help developers avoid design mistakes and save time in the development process.
Creating the theme.json File
The theme.json file contains two important parts: settings and styles. Settings refer to a list of global or contextual configuration values that determine how the editor and blocks behave. For example, it influences which controls are enabled by default, which controls are hidden from the User Interface (UI), the available color palette, typography settings, etc.
Styles handles the theme’s design language and enables theme authors to define elements such as:
- Font size
- Line height
- Background colors
- Link colors
If you want to create a theme.json file, you can make a new file of that name and then place it inside the root folder of your theme. All the contents of your file should be inserted inside two curly brackets: { }.
Next, you’ll use property names and values within double quotes and separated with a colon, for example:
{
"property-name": "value"
}
The property name can either be a setting or a block name. Below is an example of a very basic theme.json file:
{
"version": 1,
"settings": {},
"styles": {},
"customTemplates": {},
"templateParts": {}
}
Version 1 of the theme.json format is the earliest, most stable version. However, version 2 is used starting with WordPress 5.9. While the version section must be the first to follow the opening curly bracket, the subsequent sections can be placed in any order.
As we mentioned, the two main sections of the file are Settings and Styles. So let’s have a closer look at the presets for each.
Settings Presets
Presets refer to the default controls as well as any custom CSS properties and are generated by the values in theme.json. Some of the main preset categories include:
- Color
- Typography
- Layout
- Spacing
Categories can also have subcategories. For example, a subcategory of Color could be Color Palette:
{
"version": 2,
"settings": {
"color": {
"palette": [
{
Each preset also creates a custom CSS property using the “–wp–preset–{preset-category}–{preset-slug}” naming convention.
There are a ton of presets and examples that you can use to create your theme.json file, so we won’t go over all of them here. However, you can refer to the WordPress Handbook for more detailed guidance.
Styles Presets
Styles presets control the styles of objects within blocks. For example, the following would be a way to use the hex value for a background and a Global Styles preset for the text color:
{
"version": 2,
"settings": { ... },
"styles": {
"color": {
"background": "#FBF",
"text": "var(--wp--preset--color--purple)"
}
}
}
If we wanted to change the heading color of a block, it would look similar to this:
{
"version": 2,
"settings": {...},
"styles": {
...,
"blocks": {
"core/heading": {
"color": {
"text": "var(--wp--preset--color--blue)"
}
Again, there are nearly infinite examples and ways to use presets for block styles. You can refer to WordPress documentation for a full breakdown.
There are also Template and Template parts sections. These include the base files of your theme, such as index.html, as well as sections to organize and structure your theme.
How to Style Your Site Using WordPress Global Styles
If you’re looking for a beginner-friendly way to use Global Styles to style your website, you can use the Global Styles interface with a WordPress block theme. Note that you will only have access to the Styles interface with WordPress 5.9 or higher.
Choosing a Block-Based Theme
First, you’ll need a block-based theme. To find one, you can navigate to the WordPress Theme Directory from your admin dashboard by browsing to Appearance > Themes > Add New. Next, you can click on the Feature Filter and select Full Site Editing, followed by Apply:
Once you find a WordPress theme you like, you can hover your mouse over it, then select Install followed by Activate. We’ll be using Twenty Twenty-Two, which may already be installed if you are using WordPress 5.9 or later.
Accessing the Styles Interface
Next, head over to your Theme Editor (Appearance > Editor). In the top right-hand corner of the screen, you’ll see a half-shaded circle, which represents the Styles panel:
When you first click on it, it will present a Styles Welcome Guide. If you need access to this in the future, you can find it by clicking on the three vertical dots in the upper right-hand corner and selecting Welcome Guide.
The preview window shows you how the current style of your theme looks. Under the Styles panel, you’ll find settings for:
- Typography
- Colors
- Layout
- Blocks
- Let’s take a closer look at each.
Typography
Under Typography, you can manage the typography settings for two elements: Text and Links.
You can change the font family and size:
You can also adjust the line height and select a font-weight. You’ll have these same options for your links. When you’re done, remember to save your changes.
Colors
Under the Colors section, you’ll find the default color presets that come with your theme. However, you can also create your own custom color palettes by entering HEX values or using the drag-and-drop color picker.
You can even rename the colors to something more descriptive than the default hexadecimal values. Additionally, you can add custom gradients, apply duo-tone filters to images, and more.
To modify the colors for the Background, Text, and Links elements, simply select the element and customize the styling. The changes will be applied in real-time as you edit.
Layout
Under Layout, you can adjust padding and other elements. This is straightforward and can be very useful when you need to make a minor adjustment (for example, for the sake of page symmetry).
Blocks
Finally, you can customize the appearance of individual blocks on your site. To do so, go to the Styles panel and select Blocks from the list. You’ll see a list of all the blocks on your site.
For example, if you want to change the style of your Heading block, simply select Heading from the list and adjust the Colors and Typography settings as desired.
When you’re finished, click Save to apply the changes. If you ever want to revert back to the original theme styles, simply navigate to the Styles panel, click on the three vertical dots, and select Reset to defaults.
A Better Way to Use and Style WordPress
WordPress is always striving to improve the user experience for its users, and the introduction of Global Styles is a testament to this commitment. With the ability to create a theme.json file to apply Global Styles configurations and use the Styles editor with a block-based theme, theme development is now easier than ever for both beginners and experienced professionals. These features make it simple to customize the appearance of your site and create a successful website with ease.
