Picture this: you just picked a new brand color, and now you’re clicking into every Heading block and every Button block on every page to apply it by hand. That’s the block-by-block trap, and you don’t have to fall into it — WordPress’ Full-Site Editing (FSE) tools include one control panel for your entire site’s design.
WordPress Global Styles is the site-wide styling system built into the Site Editor. Powered by your theme’s theme.json file, it controls colors, typography, spacing, and layout — plus the default look of individual blocks — across your entire site, so you can restyle everything in one place instead of editing blocks or pages one by one.
In this post, we’ll walk you through Global Styles. We’ll explain what they are, their benefits, and how they work. Then we’ll discuss how to use them to style your WordPress website. Let’s get started!
What are WordPress Global Styles?
Global Styles are WordPress’ site-wide styling system: one place in the Site Editor to set colors, typography, spacing, layout, and the default look of individual blocks across your whole site. The feature works in conjunction with theme.json, the standard theme configuration file for block themes, introduced in WordPress 5.8 (2021). Developers can use theme.json to define defaults for a site as well as individual blocks. WordPress core (since 5.8) automatically applies the file when you place it in the root of the theme directory — block themes get the fullest support, but classic themes can use theme.json too.
This file powers the Site Editor, introduced in WordPress 5.9 (January 2022) and a standard part of every release since. The file lets theme authors share Global Styles as well as Global Settings. WordPress reformats the data taken from these JSON objects and turns it into CSS. Then users can further customize the styles in the WordPress editor.
It helps to know the pecking order here. WordPress applies its own defaults first, then your theme’s theme.json, then any changes you make in the Styles panel — and a setting applied to an individual block on a specific page overrides all three. So if a global change doesn’t seem to take effect, check the block itself: a block-level color or font setting is usually the culprit, and clearing it lets your global style show through.
In previous iterations of the Gutenberg plugin, you had to register support for the style properties of a block before you were able to work with them in theme.json. Also, in classic themes and older versions, you had to use PHP to define things such as your color choices and fonts. Then you needed to add styles for the front end and back end of your theme.
Since WordPress 5.8, when you use a theme with the theme.json file in place, WordPress automatically adds the styles defined there to your stylesheet. You can use this system to add entirely new color palettes, change the typography of themes, and more.
Why use WordPress Global Styles
No matter your skill level, you’ll likely find using Global Styles an intuitive and accessible experience. With Global Styles, you change recurring colors, fonts, and spacing in your web design once, instead of updating each page by hand. If you’re a WordPress beginner, taking advantage of these Global Styles may mean that you won’t need to hire a developer in order to design your website. Sorry, developers.
On the flip side though, this new feature might be particularly useful for theme developers. That’s because Global Styles helps WordPress developers style blocks within the Block Editor. This can be highly advantageous, especially for new theme authors. It offers a variety of controls that minimize the need to create custom solutions for styling a site.
In other words, Global Styles simplifies theme development to a great degree. As a result, it can help developers avoid damaging design mistakes.
From style guide to Global Styles
Global Styles is also the natural home for your site’s style guide — the documented set of design rules that keeps every page on brand. Before you open the editor, decide on three things:
- A brand color palette (a primary color, an accent, and one or two neutrals)
- A type scale (which fonts and sizes you’ll use for body text, headings, and buttons)
- Spacing rules (how much breathing room sits between sections and elements)
Then encode those decisions once as Global Styles. That turns your style guide into a working design system for WordPress: every new post, page, and block inherits the same colors, fonts, and spacing automatically, instead of relying on you to remember the rules.
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, they influence 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: { }. (If writing JSON boilerplate isn’t your idea of fun, an AI assistant can scaffold the settings and styles sections for you — just review the output and validate it against the official theme.json schema before you use it.)
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": 3,
"settings": {},
"styles": {},
"customTemplates": {},
"templateParts": {}
} The version field tells WordPress which format of the file you’re using. Version 3 is the current format, introduced in WordPress 6.6 (June 2024) with one breaking change: theme presets no longer override WordPress’ default presets by default. Older versions of theme.json are backwards-compatible and will keep working, but new features are developed on the latest version — so new projects should declare version 3. The file simply needs a version field alongside the other top-level sections, which can appear 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. This complete file defines a single purple preset:
{
"version": 3,
"settings": {
"color": {
"palette": [
{ "slug": "purple", "color": "#6633CC", "name": "Purple" }
]
}
}
} 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 valid, copyable file defines the purple preset under settings, then uses a hex value for the background and the purple preset for the text color:
{
"version": 3,
"settings": {
"color": {
"palette": [
{ "slug": "purple", "color": "#6633CC", "name": "Purple" }
]
}
},
"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, again using the purple preset:
{
"version": 3,
"settings": {
"color": {
"palette": [
{ "slug": "purple", "color": "#6633CC", "name": "Purple" }
]
}
},
"styles": {
"blocks": {
"core/heading": {
"color": {
"text": "var(--wp--preset--color--purple)"
}
}
}
}
} 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 WordPress site using 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. The Styles interface is a standard part of the Site Editor in every current version of WordPress — the only requirement is a block theme. Running a classic theme? You won’t see the Styles panel: classic themes get partial theme.json support, and their site-wide styling options live in the Customizer (Appearance > Customize) instead.
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 Theme. Next, select the Block themes tab to see only themes built for the Site Editor.
Once you find a WordPress theme you like, you can hover your mouse over it, then select Install followed by Activate. Twenty Twenty-Five, the current default theme, is a solid choice: it has shipped with WordPress since version 6.7 (November 2024), so it may already be installed. The steps below are the same on any block theme.
Accessing the Styles interface
Next, head over to the Site 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: the fonts, sizes, and weights for your site’s text, links, headings, and buttons
- Colors: your palette, plus background, text, and link colors
- Layout: site-wide padding and dimensions
- Blocks: default styles for each individual block type
Let’s take a closer look at each, starting with a shortcut worth knowing.
Style variations
Before fine-tuning anything, browse your theme’s style variations. Introduced in WordPress 6.0, style variations are alternate looks for your block theme — different combinations of colors, fonts, spacing, and block settings — that let you change the look and feel of your site without switching themes. In the Styles panel, select Browse styles beneath the screenshot of your current style, then pick any variation to preview your site in that look instantly.
Since WordPress 6.6, themes can also offer narrower color and typography variations, which swap just the palette or just the fonts while leaving the rest of your design alone. When a theme provides them, they appear as options in the same Styles panel.
Typography
Under Typography, you can manage the typography settings for the different elements of your site: Text, Links, Headings, and Buttons. Select an element to open its typography panel.
You can change the font family and size:
Many themes define font size presets — options like S, M, L, XL, and XXL — and you can also set a custom size using units like px, em, or rem. Beyond size, you can adjust the line height and select a font weight. When you’re done, remember to save your changes.
Colors
Under Colors, you’ll find the default color presets that come with your theme. To create your own color palettes, you can enter the HEX value numbers or use the drag-and-drop color picker to generate your preferred colors:
You can also rename the colors to something more identifiable or descriptive than the standard hexadecimal alphanumeric values. You can add custom gradients, apply duotone filters to images, and more.
Next, you can modify the colors for three main elements: Background, Text, and Links. You can also select any of these elements to customize the styling. The changes will be applied instantly as you are editing.
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 change the appearance of individual blocks. After you select Blocks from the Styles panel, you’ll find a list of blocks on your site.
Let’s say you wanted to change the style of your Heading block. You can select Heading from the list, then adjust its Colors and Typography settings:
When you’re done, you can click on Save. If you ever want to revert back to the theme styles you had before making changes, you can navigate to the Styles panel, click on the three vertical dots, and then select Reset to defaults.
Previewing changes with the Style Book
Want to check how your changes look across every block — including ones you haven’t used on a page yet? Open the Style Book from the Styles panel. It displays your blocks in one place, all rendered with your current Global Styles, so you can spot a clashing color or an unreadable font size before you save.
Adding custom CSS through Global Styles
Sometimes the built-in controls don’t reach the exact thing you want to change. For those cases, the Styles panel also accepts custom CSS. You can apply it site-wide, where it acts like a small global stylesheet, or attach it to a single block type from the Blocks section so only that block is affected. It’s the escape hatch for anything Global Styles doesn’t cover with a control.
What happens to your styles when you switch themes?
One caveat before you invest an afternoon in the Styles panel: your Global Styles customizations are tied to the active theme, so they won’t carry over if you switch to a different theme — the new theme starts from its own defaults. If a theme change is on the horizon, note your color values, fonts, and spacing choices first (or encode them in the new theme’s theme.json) so you can recreate the look quickly.
FAQs about WordPress Global Styles
Where do I find Global Styles in WordPress?
In the Site Editor. Go to Appearance > Editor in your dashboard, then click the half-shaded circle icon in the top right-hand corner to open the Styles panel. You’ll need a block theme active to see it.
What’s the difference between Global Styles and global CSS?
Global Styles is the built-in, no-code system for site-wide design, stored in theme.json and your Styles panel choices. Custom CSS is the manual fallback, and you can add it site-wide or per block right inside the Styles panel when the controls don’t cover something.
Do Global Styles work with classic themes?
No. The Styles panel requires a block theme. Classic themes get partial theme.json support, and their site-wide styling tools live in the Customizer instead (Appearance > Customize).
Should I edit theme.json or use the Styles panel?
Use the Styles panel if you’re styling your own site — no code required. Edit theme.json if you’re building or customizing a theme and want to ship defaults. Changes made in the Styles panel override theme.json.
What’s the current theme.json version?
Version 3, introduced in WordPress 6.6 (2024). Older versions still work because the format is backwards-compatible, but new features target the latest version, so declare version 3 in new projects.
A better way to use and style WordPress
WordPress is continuously working to improve the editing experience for its users. Thanks to Global Styles, theme development is that much easier for both beginners and seasoned professionals.
As discussed in this post, you can create a theme.json file to apply Global Styles configurations to your theme. You can also use the Styles editor with a block-based theme to customize the appearance of your site.
Our recommendation: if you’re styling your own site, live in the Styles panel. It’s faster, and there’s no code to break. Reach for theme.json when you want defaults you can ship with a theme or carry between projects. And if you’d rather spend your time on the styling than the server, DreamPress, DreamHost’s managed WordPress hosting, handles updates, backups, and performance for you.
Do More with DreamPress
Every DreamPress plan includes WordPress pre-installed, 1-click staging, free Bunny CDN, daily backups, and 24/7 support from WordPress experts.
Check Out Plans