{"id":33258,"date":"2022-03-18T08:11:24","date_gmt":"2022-03-18T15:11:24","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=33258"},"modified":"2026-08-13T13:42:08","modified_gmt":"2026-08-13T20:42:08","slug":"wordpress-global-styles","status":"publish","type":"post","link":"https:\/\/www.dreamhost.com\/blog\/wordpress-global-styles\/","title":{"rendered":"Decoding WordPress: An Introduction to Global Styles"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Picture this: you just picked a new brand color, and now you\u2019re clicking into every Heading block and every Button block on every page to apply it by hand. That\u2019s the block-by-block trap, and you don\u2019t have to fall into it \u2014 WordPress\u2019 <a href=\"https:\/\/www.dreamhost.com\/blog\/wordpress-full-site-editing\/\" target=\"_blank\" rel=\"noopener\">Full-Site Editing (FSE)<\/a> tools include one control panel for your entire site\u2019s design.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>WordPress Global Styles is the site-wide styling system built into the Site Editor. Powered by your theme\u2019s theme.json file, it controls colors, typography, spacing, and layout \u2014 plus the default look of individual blocks \u2014 across your entire site, so you can restyle everything in one place instead of editing blocks or pages one by one.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this post, we\u2019ll walk you through Global Styles. We\u2019ll explain what they are, their benefits, and how they work. Then we\u2019ll discuss how to use them to style your WordPress website. Let\u2019s get started!<\/p>\n\n\n\n<h2 id=\"h-what-are-wordpress-global-styles\" class=\"wp-block-heading\"><b>What are WordPress Global Styles?<\/b><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Global Styles are WordPress\u2019 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 <i>theme.json<\/i>, the standard theme configuration file for block themes, introduced in WordPress 5.8 (2021). Developers can <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/\" target=\"_blank\" rel=\"noopener\">use theme.json<\/a> 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 \u2014 block themes get the fullest support, but classic themes can use <i>theme.json<\/i> too.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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. <a href=\"https:\/\/www.dreamhost.com\/blog\/learn-wordpress\/\" target=\"_blank\" rel=\"noopener\">WordPress<\/a> reformats the data taken from these JSON objects and turns it into CSS. Then users can further customize the styles in the WordPress editor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It helps to know the pecking order here. WordPress applies its own defaults first, then your theme\u2019s <i>theme.json<\/i>, then any changes you make in the Styles panel \u2014 and a setting applied to an individual block on a specific page overrides all three. So if a global change doesn\u2019t 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In previous iterations of the <a href=\"https:\/\/wordpress.org\/plugins\/gutenberg\/\" target=\"_blank\" rel=\"noopener\">Gutenberg plugin<\/a>, you had to register support for the style properties of a block before you were able to work with them in <i>theme.json<\/i>. Also, in classic themes and older versions, you had to use PHP to define things such as your color choices <a href=\"https:\/\/www.dreamhost.com\/blog\/web-safe-fonts\/\" target=\"_blank\" rel=\"noopener\">and fonts<\/a>. Then you needed to add styles for the front end and back end of your theme.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Since WordPress 5.8, when you use a theme with the<i> theme.json<\/i> 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.<\/p>\n\n<h2 id=\"h-why-use-wordpress-global-styles\" class=\"wp-block-heading\"><b>Why use WordPress Global Styles<\/b><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">No matter your skill level, you\u2019ll likely find using Global Styles an intuitive and accessible experience. With Global Styles, you change recurring colors, fonts, and spacing in your <a href=\"https:\/\/www.dreamhost.com\/blog\/elements-of-webdesign\/\" target=\"_blank\" rel=\"noopener\">web design<\/a> once, instead of updating each page by hand. If you\u2019re a WordPress beginner, taking advantage of these Global Styles may mean that you won\u2019t need to <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-hire-web-developer\/\" target=\"_blank\" rel=\"noopener\">hire a developer<\/a> in order to <a href=\"https:\/\/www.dreamhost.com\/blog\/beginners-website-guide\/\" target=\"_blank\" rel=\"noopener\">design your website<\/a>. Sorry, developers.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">On the flip side though, this new feature might be particularly useful for theme developers. That\u2019s because Global Styles helps WordPress developers style blocks within the <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-use-wordpress-blocks\/\" target=\"_blank\" rel=\"noopener\">Block Editor<\/a>. 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In other words, Global Styles simplifies theme development to a great degree. As a result, it can help developers avoid <a href=\"https:\/\/www.dreamhost.com\/blog\/beginners-website-guide\/\" target=\"_blank\" rel=\"noopener\">damaging design mistakes<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-from-style-guide-to-global-styles\"><b>From style guide to Global Styles<\/b><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Global Styles is also the natural home for your site\u2019s style guide \u2014 the documented set of design rules that keeps every page on brand. Before you open the editor, decide on three things:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A brand color palette (a primary color, an accent, and one or two neutrals)<\/li>\n\n\n\n<li>A type scale (which fonts and sizes you\u2019ll use for body text, headings, and buttons)<\/li>\n\n\n\n<li>Spacing rules (how much breathing room sits between sections and elements)<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<h2 id=\"h-creating-the-theme-json-file\" class=\"wp-block-heading\"><b>Creating the theme.json file<\/b><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The<i> theme.json<\/i> 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Styles handles the theme\u2019s design language and enables theme authors to define elements such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Font size<\/li>\n\n\n\n<li>Line height<\/li>\n\n\n\n<li>Background colors<\/li>\n\n\n\n<li>Link colors<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">If you want to <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/\" target=\"_blank\" rel=\"noopener\">create a <i>theme.json<\/i> file<\/a>, 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\u2019t your idea of fun, an AI assistant can scaffold the settings and styles sections for you \u2014 just review the output and validate it against the official theme.json schema before you use it.)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Next, you\u2019ll use property names and values within double quotes and separated with a colon, for example:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n\n\"property-name\": \"value\"\n\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The property name can either be a setting or a block name. Below is an example of a very basic <i>theme.json<\/i> file:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n\n    \"version\": 3,\n\n    \"settings\": {},\n\n    \"styles\": {},\n\n    \"customTemplates\": {},\n\n    \"templateParts\": {}\n\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The version field tells WordPress which format of the file you\u2019re using. Version 3 is the current format, <a href=\"https:\/\/make.wordpress.org\/core\/2024\/06\/19\/theme-json-version-3\/\" target=\"_blank\" rel=\"noopener\">introduced in WordPress 6.6 (June 2024)<\/a> with one breaking change: theme presets no longer override WordPress\u2019 default presets by default. Older versions of <i>theme.json<\/i> are backwards-compatible and will keep working, but new features are developed on the latest version \u2014 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As we mentioned, the two main sections of the file are Settings and Styles. So let\u2019s have a closer look at the presets for each.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-settings-presets\"><b>Settings presets<\/b><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/global-settings-and-styles\/#css-custom-properties-presets-custom\" target=\"_blank\" rel=\"noopener\">Presets<\/a> refer to the default controls as well as any custom CSS properties and are generated by the values in <i>theme.json<\/i>. Some of the main preset categories include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Color<\/li>\n\n\n\n<li>Typography<\/li>\n\n\n\n<li>Layout<\/li>\n\n\n\n<li>Spacing<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Categories can also have subcategories. For example, a subcategory of Color could be Color Palette. This complete file defines a single purple preset:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n\n\"version\": 3,\n\n\"settings\": {\n\n\"color\": {\n\n\"palette\": [\n\n{ \"slug\": \"purple\", \"color\": \"#6633CC\", \"name\": \"Purple\" }\n\n]\n\n}\n\n}\n\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Each preset also creates a custom CSS property using the &#8220;&#8211;wp&#8211;preset&#8211;{preset-category}&#8211;{preset-slug}&#8221; naming convention.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There are a ton of presets and examples that you can use to create your <i>theme.json<\/i> file, so we won\u2019t go over all of them here. However, you can refer to the <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/global-settings-and-styles\/\" target=\"_blank\" rel=\"noopener\">WordPress Handbook<\/a> for more detailed guidance.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-styles-presets\"><b>Styles presets<\/b><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/global-settings-and-styles\/#styles\" target=\"_blank\" rel=\"noopener\">Styles presets<\/a> 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:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n\n\"version\": 3,\n\n\"settings\": {\n\n\"color\": {\n\n\"palette\": [\n\n{ \"slug\": \"purple\", \"color\": \"#6633CC\", \"name\": \"Purple\" }\n\n]\n\n}\n\n},\n\n\"styles\": {\n\n\"color\": {\n\n\"background\": \"#FBF\",\n\n\"text\": \"var(--wp--preset--color--purple)\"\n\n}\n\n}\n\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">If we wanted to change the heading color of a block, it would look similar to this, again using the purple preset:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n\n\"version\": 3,\n\n\"settings\": {\n\n\"color\": {\n\n\"palette\": [\n\n{ \"slug\": \"purple\", \"color\": \"#6633CC\", \"name\": \"Purple\" }\n\n]\n\n}\n\n},\n\n\"styles\": {\n\n\"blocks\": {\n\n\"core\/heading\": {\n\n\"color\": {\n\n\"text\": \"var(--wp--preset--color--purple)\"\n\n}\n\n}\n\n}\n\n}\n\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Again, there are nearly infinite examples and ways to use presets for block styles. You can refer to WordPress documentation for a <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/global-settings-and-styles\/#block-styles\" target=\"_blank\" rel=\"noopener\">full breakdown<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There are also <a href=\"https:\/\/fullsiteediting.com\/lessons\/templates-and-template-parts\/\" target=\"_blank\" rel=\"noopener\">Template and Template parts<\/a> sections. These include the base files of your theme, such as <i>index.html<\/i>, as well as sections to organize and structure your theme.<\/p>\n\n<h2 id=\"h-how-to-style-your-wordpress-site-using-global-styles\" class=\"wp-block-heading\"><b>How to style your WordPress site using Global Styles<\/b><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you\u2019re 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 \u2014 the only requirement is a block theme. Running a classic theme? You won\u2019t see the Styles panel: classic themes get partial <i>theme.json<\/i> support, and their site-wide styling options live in the Customizer (<i>Appearance &gt; Customize<\/i>) instead.<\/p>\n\n\n\n<div class=\"single__related-article\">\n\t<span>Related Article<\/span>\n\t<div class=\"single__related-article__wrap\">\n\t\t<div class=\"single__related-article__title\">\n\t\t\tHow To Make a Website: A Complete Beginner\u2019s Guide\n\t\t<\/div>\n\t\t<a href=\"https:\/\/www.dreamhost.com\/blog\/beginners-website-guide\/\" class=\"btn btn--sm btn--brand\" target=\"_blank\" rel=\"noopener\">\n\t\t\tRead More\n\t\t<\/a>\n\t<\/div>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-choosing-a-block-based-theme\"><b>Choosing a block-based theme<\/b><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">First, you\u2019ll need a block-based theme. To find one, you can navigate to the <a href=\"https:\/\/wordpress.org\/themes\/\" target=\"_blank\" rel=\"noopener\">WordPress Theme Directory<\/a> from your admin dashboard by browsing to<i> Appearance &gt; Themes &gt; Add New Theme<\/i>. Next, select the <i>Block themes<\/i> tab to see only themes built for the Site Editor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Once you <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-pick-wordpress-theme\/\" target=\"_blank\" rel=\"noopener\">find a WordPress theme<\/a> you like, you can hover your mouse over it, then select <i>Install<\/i> followed by <i>Activate<\/i>. <a href=\"https:\/\/make.wordpress.org\/core\/2024\/08\/15\/introducing-twenty-twenty-five\/\" target=\"_blank\" rel=\"noopener\">Twenty Twenty-Five<\/a>, 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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-accessing-the-styles-interface\"><b>Accessing the Styles interface<\/b><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Next, head over to the Site Editor (<i>Appearance &gt; Editor<\/i>). In the top right-hand corner of the screen, you\u2019ll see a half-shaded circle, which represents the Styles panel:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"794\" height=\"537\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-global-styles-twenty-twenty-two.jpg.webp\" alt=\"WordPress Global styles panel\" class=\"wp-image-33279 lazyload\" data-srcset=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-global-styles-twenty-twenty-two.jpg.webp 794w, https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-global-styles-twenty-twenty-two-300x203.jpg 300w, https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-global-styles-twenty-twenty-two-768x519.jpg 768w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-global-styles-twenty-twenty-two-600x406.jpg.webp 600w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-global-styles-twenty-twenty-two-730x494.jpg.webp 730w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-global-styles-twenty-twenty-two-784x530.jpg.webp 784w\" data-sizes=\"(max-width: 794px) 100vw, 794px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 794px; --smush-placeholder-aspect-ratio: 794\/537;\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">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 <i>Welcome Guide<\/i>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The preview window shows you how the current style of your theme looks. Under the Styles panel, you\u2019ll find settings for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Typography: the fonts, sizes, and weights for your site\u2019s text, links, headings, and buttons<\/li>\n\n\n\n<li>Colors: your palette, plus background, text, and link colors<\/li>\n\n\n\n<li>Layout: site-wide padding and dimensions<\/li>\n\n\n\n<li>Blocks: default styles for each individual block type<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s take a closer look at each, starting with a shortcut worth knowing.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-style-variations\"><b>Style variations<\/b><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Before fine-tuning anything, browse your theme\u2019s style variations. Introduced in WordPress 6.0, style variations are alternate looks for your block theme \u2014 different combinations of colors, fonts, spacing, and block settings \u2014 that let you change the look and feel of your site without switching themes. In the Styles panel, select <i>Browse styles<\/i> beneath the screenshot of your current style, then pick any variation to preview your site in that look instantly.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-typography\"><b>Typography<\/b><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Under <i>Typography<\/i>, you can manage the typography settings for the different elements of your site: <i>Text<\/i>, <i>Links<\/i>, <i>Headings<\/i>, and <i>Buttons<\/i>. Select an element to open its typography panel.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can change the font family and size:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"663\" height=\"388\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-global-styles-4.jpg.webp\" alt=\"WordPress Global Styles typography settings screen\" class=\"wp-image-33278 lazyload\" data-srcset=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-global-styles-4.jpg.webp 663w, https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-global-styles-4-300x176.jpg 300w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-global-styles-4-600x351.jpg.webp 600w\" data-sizes=\"(max-width: 663px) 100vw, 663px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 663px; --smush-placeholder-aspect-ratio: 663\/388;\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Many themes define font size presets \u2014 options like S, M, L, XL, and XXL \u2014 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\u2019re done, remember to save your changes.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-colors\"><b>Colors<\/b><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Under <i>Colors<\/i>, you\u2019ll find the default color presets that come with your theme. To create your own color palettes, you can enter the <i>HEX<\/i> value numbers or use the drag-and-drop color picker to generate your preferred colors:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"663\" height=\"388\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-global-styles-3.jpg.webp\" alt=\"WordPress Global Styles color settings\" class=\"wp-image-33277 lazyload\" data-srcset=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-global-styles-3.jpg.webp 663w, https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-global-styles-3-300x176.jpg 300w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-global-styles-3-600x351.jpg.webp 600w\" data-sizes=\"(max-width: 663px) 100vw, 663px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 663px; --smush-placeholder-aspect-ratio: 663\/388;\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Next, you can modify the colors for three main elements: <i>Background<\/i>, <i>Text<\/i>, and <i>Links<\/i>. You can also select any of these elements to customize the styling. The changes will be applied instantly as you are editing.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-layout\"><b>Layout<\/b><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Under <i>Layout<\/i>, 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).<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-blocks\"><b>Blocks<\/b><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Finally, you can change the appearance of individual blocks. After you select <i>Blocks <\/i>from the Styles panel, you\u2019ll find a list of blocks on your site.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s say you wanted to change the style of your Heading block. You can select <i>Heading <\/i>from the list, then adjust its <i>Colors <\/i>and <i>Typography <\/i>settings:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"926\" height=\"426\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-global-styles-2.jpg.webp\" alt=\"Styling options for the WordPress Heading block\" class=\"wp-image-33276 lazyload\" data-srcset=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-global-styles-2.jpg.webp 926w, https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-global-styles-2-300x138.jpg 300w, https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-global-styles-2-768x353.jpg 768w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-global-styles-2-600x276.jpg.webp 600w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-global-styles-2-730x336.jpg.webp 730w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-global-styles-2-784x361.jpg.webp 784w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-global-styles-2-877x403.jpg.webp 877w\" data-sizes=\"(max-width: 926px) 100vw, 926px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 926px; --smush-placeholder-aspect-ratio: 926\/426;\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">When you\u2019re done, you can click on <i>Save<\/i>. 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 <i>Reset to defaults<\/i>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-previewing-changes-with-the-style-book\"><b>Previewing changes with the Style Book<\/b><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Want to check how your changes look across every block \u2014 including ones you haven\u2019t 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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-adding-custom-css-through-global-styles\"><b>Adding custom CSS through Global Styles<\/b><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Sometimes the built-in controls don\u2019t 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 <i>Blocks<\/i> section so only that block is affected. It\u2019s the escape hatch for anything Global Styles doesn\u2019t cover with a control.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-happens-to-your-styles-when-you-switch-themes\"><b>What happens to your styles when you switch themes?<\/b><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">One caveat before you invest an afternoon in the Styles panel: your Global Styles customizations are tied to the active theme, so they won\u2019t carry over if you switch to a different theme \u2014 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\u2019s <i>theme.json<\/i>) so you can recreate the look quickly.<\/p>\n\n<h2 id=\"h-faqs-about-wordpress-global-styles\" class=\"wp-block-heading\"><b>FAQs about WordPress Global Styles<\/b><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-where-do-i-find-global-styles-in-wordpress\"><b>Where do I find Global Styles in WordPress?<\/b><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In the Site Editor. Go to <i>Appearance &gt; Editor<\/i> in your dashboard, then click the half-shaded circle icon in the top right-hand corner to open the Styles panel. You\u2019ll need a block theme active to see it.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-whats-the-difference-between-global-styles-and-global-css\"><b>What\u2019s the difference between Global Styles and global CSS?<\/b><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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\u2019t cover something.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-do-global-styles-work-with-classic-themes\"><b>Do Global Styles work with classic themes?<\/b><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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 (<i>Appearance &gt; Customize<\/i>).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-should-i-edit-theme-json-or-use-the-styles-panel\"><b>Should I edit theme.json or use the Styles panel?<\/b><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Use the Styles panel if you\u2019re styling your own site \u2014 no code required. Edit theme.json if you\u2019re building or customizing a theme and want to ship defaults. Changes made in the Styles panel override theme.json.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-whats-the-current-theme-json-version\"><b>What\u2019s the current theme.json version?<\/b><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h2 id=\"h-a-better-way-to-use-and-style-wordpress\" class=\"wp-block-heading\"><b>A better way to use and style WordPress<\/b><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As discussed in this post, you can create a<i> theme.json<\/i> 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Our recommendation: if you\u2019re styling your own site, live in the Styles panel. It\u2019s faster, and there\u2019s no code to break. Reach for <i>theme.json<\/i> when you want defaults you can ship with a theme or carry between projects. And if you\u2019d rather spend your time on the styling than the server, <a href=\"https:\/\/www.dreamhost.com\/wordpress\/managed\/\" target=\"_blank\" rel=\"noopener\">DreamPress<\/a>, DreamHost\u2019s managed WordPress hosting, handles updates, backups, and performance for you.<\/p>\n\n\n\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      Do More with DreamPress\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Every DreamPress plan includes WordPress pre-installed, 1-click staging, free Bunny CDN, daily backups, and 24\/7 support from WordPress experts.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/wordpress\/managed\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Check Out Plans                    <\/a>\n\n  <\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Picture this: you just picked a new brand color, and now you\u2019re clicking into every Heading block and every Button block on every page to apply it by hand. That\u2019s the block-by-block trap, and you don\u2019t have to fall into it \u2014 WordPress\u2019 Full-Site Editing (FSE) tools include one control panel for your entire site\u2019s [&hellip;]<\/p>\n","protected":false},"author":1062,"featured_media":86945,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_opengraph-title":"WordPress Global Styles: The Complete Guide - DreamHost","_yoast_wpseo_opengraph-description":"WordPress Global Styles let you set colors, typography, and layout sitewide from one panel \u2014 no more editing every block by hand.","_yoast_wpseo_twitter-title":"WordPress Global Styles: The Complete Guide - DreamHost","_yoast_wpseo_twitter-description":"WordPress Global Styles let you set colors, typography, and layout sitewide from one panel \u2014 no more editing every block by hand.","toc_headlines":"[[\"h-what-are-wordpress-global-styles\",\"What are WordPress Global Styles?\"],[\"h-why-use-wordpress-global-styles\",\"Why use WordPress Global Styles\"],[\"h-creating-the-theme-json-file\",\"Creating the theme.json file\"],[\"h-how-to-style-your-wordpress-site-using-global-styles\",\"How to style your WordPress site using Global Styles\"],[\"h-faqs-about-wordpress-global-styles\",\"FAQs about WordPress Global Styles\"],[\"h-a-better-way-to-use-and-style-wordpress\",\"A better way to use and style WordPress\"]]","hide_toc":false,"show_updated_at":"1","footnotes":""},"categories":[13121,550,696],"tags":[],"class_list":["post-33258","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-decoding-wordpress","category-tutorials","category-wordpress"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>WordPress Global Styles: The Complete Guide - DreamHost<\/title>\n<meta name=\"description\" content=\"WordPress Global Styles let you set colors, typography, and layout sitewide from one panel \u2014 no more editing every block by hand.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.dreamhost.com\/blog\/wordpress-global-styles\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WordPress Global Styles: The Complete Guide - DreamHost\" \/>\n<meta property=\"og:description\" content=\"WordPress Global Styles let you set colors, typography, and layout sitewide from one panel \u2014 no more editing every block by hand.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.dreamhost.com\/blog\/wordpress-global-styles\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-18T15:11:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-13T20:42:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-full-site-editing-global-styles-social.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jason Cosper\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"WordPress Global Styles: The Complete Guide - DreamHost\" \/>\n<meta name=\"twitter:description\" content=\"WordPress Global Styles let you set colors, typography, and layout sitewide from one panel \u2014 no more editing every block by hand.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-full-site-editing-global-styles-social.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jason Cosper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WordPress Global Styles: The Complete Guide - DreamHost","description":"WordPress Global Styles let you set colors, typography, and layout sitewide from one panel \u2014 no more editing every block by hand.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.dreamhost.com\/blog\/wordpress-global-styles\/","og_locale":"en_US","og_type":"article","og_title":"WordPress Global Styles: The Complete Guide - DreamHost","og_description":"WordPress Global Styles let you set colors, typography, and layout sitewide from one panel \u2014 no more editing every block by hand.","og_url":"https:\/\/www.dreamhost.com\/blog\/wordpress-global-styles\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2022-03-18T15:11:24+00:00","article_modified_time":"2026-08-13T20:42:08+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-full-site-editing-global-styles-social.jpeg","type":"image\/jpeg"}],"author":"Jason Cosper","twitter_card":"summary_large_image","twitter_title":"WordPress Global Styles: The Complete Guide - DreamHost","twitter_description":"WordPress Global Styles let you set colors, typography, and layout sitewide from one panel \u2014 no more editing every block by hand.","twitter_image":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-full-site-editing-global-styles-social.jpeg","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Jason Cosper","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.dreamhost.com\/blog\/wordpress-global-styles\/#article","isPartOf":{"@id":"https:\/\/www.dreamhost.com\/blog\/wordpress-global-styles\/"},"author":{"name":"Jason Cosper","@id":"https:\/\/www.dreamhost.com\/blog\/#\/schema\/person\/696d1ca9f2e23c846e02e04944e8fca4"},"headline":"Decoding WordPress: An Introduction to Global Styles","datePublished":"2022-03-18T15:11:24+00:00","dateModified":"2026-08-13T20:42:08+00:00","mainEntityOfPage":{"@id":"https:\/\/www.dreamhost.com\/blog\/wordpress-global-styles\/"},"wordCount":2706,"publisher":{"@id":"https:\/\/www.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.dreamhost.com\/blog\/wordpress-global-styles\/#primaryimage"},"thumbnailUrl":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2026\/08\/blog-hero-wordpress-global-styles-dreamops-85a825be6b5beba991e4b975.webp","articleSection":["Decoding WordPress","Tutorials","WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.dreamhost.com\/blog\/wordpress-global-styles\/","url":"https:\/\/www.dreamhost.com\/blog\/wordpress-global-styles\/","name":"WordPress Global Styles: The Complete Guide - DreamHost","isPartOf":{"@id":"https:\/\/www.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.dreamhost.com\/blog\/wordpress-global-styles\/#primaryimage"},"image":{"@id":"https:\/\/www.dreamhost.com\/blog\/wordpress-global-styles\/#primaryimage"},"thumbnailUrl":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2026\/08\/blog-hero-wordpress-global-styles-dreamops-85a825be6b5beba991e4b975.webp","datePublished":"2022-03-18T15:11:24+00:00","dateModified":"2026-08-13T20:42:08+00:00","description":"WordPress Global Styles let you set colors, typography, and layout sitewide from one panel \u2014 no more editing every block by hand.","breadcrumb":{"@id":"https:\/\/www.dreamhost.com\/blog\/wordpress-global-styles\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.dreamhost.com\/blog\/wordpress-global-styles\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.dreamhost.com\/blog\/wordpress-global-styles\/#primaryimage","url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2026\/08\/blog-hero-wordpress-global-styles-dreamops-85a825be6b5beba991e4b975.webp","contentUrl":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2026\/08\/blog-hero-wordpress-global-styles-dreamops-85a825be6b5beba991e4b975.webp","width":1536,"height":1024},{"@type":"BreadcrumbList","@id":"https:\/\/www.dreamhost.com\/blog\/wordpress-global-styles\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.dreamhost.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Decoding WordPress: An Introduction to Global Styles"}]},{"@type":"WebSite","@id":"https:\/\/www.dreamhost.com\/blog\/#website","url":"https:\/\/www.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www.dreamhost.com\/blog\/#\/schema\/person\/696d1ca9f2e23c846e02e04944e8fca4","name":"Jason Cosper","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","contentUrl":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","caption":"Jason Cosper"},"description":"Jason is DreamHost\u2019s WordPress Product Advocate, based out of Bakersfield, CA. He is currently working on making our DreamPress product even better. In his free time, he likes to curl up on the couch and watch scary movies with his wife Sarah and three very small dogs. Follow him on Twitter.","url":"https:\/\/www.dreamhost.com\/blog\/author\/jasoncosper\/"}]}},"lang":"en","translations":{"en":33258,"es":33260,"pt":52864,"de":52868,"pl":54238,"uk":54247,"ru":54273,"it":68241,"fr":70068,"nl":70101},"pll_sync_post":{},"_links":{"self":[{"href":"https:\/\/www.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/33258","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1062"}],"version-history":[{"count":1,"href":"https:\/\/www.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/33258\/revisions"}],"predecessor-version":[{"id":86956,"href":"https:\/\/www.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/33258\/revisions\/86956"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/86945"}],"wp:attachment":[{"href":"https:\/\/www.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=33258"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=33258"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=33258"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}