{"id":35323,"date":"2022-07-06T07:00:36","date_gmt":"2022-07-06T14:00:36","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=35323"},"modified":"2026-08-13T18:39:21","modified_gmt":"2026-08-14T01:39:21","slug":"wordpress-theme-configuration","status":"publish","type":"post","link":"https:\/\/www.dreamhost.com\/blog\/wordpress-theme-configuration\/","title":{"rendered":"Decoding WordPress: New Theme Configuration Options with Theme.JSON File"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Think customizing a WordPress theme means hacking PHP files or piling up custom CSS? Not anymore. <b>Theme configuration options in WordPress are the global settings and styles a theme defines in its theme.json file: color palettes, typography, spacing, layout widths, and more. They let you customize your site\u2019s appearance without editing code.<\/b> Introduced in WordPress 5.8 (2021), <b>theme.json<\/b> is now on version 3, which requires WordPress 6.6 or later.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this blog post, the fourth in our \u201cDecoding WordPress\u201d series, we\u2019ll walk through those options, plus what to weigh before converting a classic theme to a block theme, so you can have a beautiful, tailored site whether you have beginner or intermediate WordPress development skills.<\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<p class=\"newsletter-form__title\">Get Content Delivered Straight to Your Inbox<\/p><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-so-what-are-theme-configuration-options-then\" class=\"wp-block-heading\"><b>What are theme configuration options in WordPress?<\/b><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Theme configuration options are the global settings and styles that control how your theme looks sitewide, and in modern WordPress they live in the theme\u2019s <b>theme.json<\/b> file. Separately, some themes also ship an admin options page: a theme-specific interface for adjusting settings without modifying any theme files or getting bogged down with altering code. Some of these admin pages offer a few options, while others have many, many more. If you\u2019re a beginner, the relative simplicity of an admin page versus editing files directly can be a welcome time- and sanity-saver.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If your goal is only to enhance or change functionalities within a theme, you can greatly simplify matters by installing a plugin rather than reconfiguring the entire theme. However, if you\u2019re wanting to modify theme styles and block settings across your entire site, reconfiguring things through customizing is what you\u2019ll need to do.<\/p>\n\n<h2 id=\"h-an-overview-of-wordpress-themes-and-templates\" class=\"wp-block-heading\"><b>Themes vs. templates: A quick refresher<\/b><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A theme is the complete design and foundation for your site\u2019s cohesive <a href=\"https:\/\/www.dreamhost.com\/blog\/elements-of-webdesign\/\" target=\"_blank\" rel=\"noopener noreferrer\">look and feel<\/a>: color palettes, typography, page layouts, headers, and footers. A template, by contrast, is a single-page layout within that sitewide theme, and changes to it apply only to the pages that use it. For the full breakdown, see our guide to <a href=\"https:\/\/www.dreamhost.com\/blog\/wordpress-templates-template-parts\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress templates and template parts<\/a>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"631\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/07\/wordpress-template-editor-1024x631.jpg\" alt=\"new WordPress Theme Configuration options\" class=\"wp-image-35328 lazyload\" data-srcset=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/07\/wordpress-template-editor-1024x631.jpg 1024w, https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/07\/wordpress-template-editor-300x185.jpg 300w, https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/07\/wordpress-template-editor-768x474.jpg 768w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/07\/wordpress-template-editor-600x370.jpg.webp 600w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/07\/wordpress-template-editor-730x450.jpg.webp 730w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/07\/wordpress-template-editor-784x483.jpg.webp 784w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/07\/wordpress-template-editor-877x541.jpg.webp 877w, https:\/\/www.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/07\/wordpress-template-editor.jpg.webp 1200w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/631;\" \/><\/figure>\n<\/div>\n<h2 id=\"h-what-the-heck-is-json\" class=\"wp-block-heading\"><b>What is theme.json in WordPress?<\/b><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><b>theme.json<\/b> is a configuration file that lets a WordPress theme define its global settings and styles (color palettes, typography, spacing, and more) in one central place. To customize your WordPress theme when it doesn\u2019t include an admin page, you\u2019ll need to <a href=\"https:\/\/fullsiteediting.com\/lessons\/creating-theme-json\/\" target=\"_blank\" rel=\"noopener noreferrer\">create<\/a> and add a <b>theme.json<\/b> configuration file to the theme.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">But what is <a href=\"https:\/\/en.wikipedia.org\/wiki\/JSON\" target=\"_blank\" rel=\"noopener noreferrer\">JSON<\/a>? JSON stands for JavaScript Object Notation, a minimal, readable format for structuring data, used primarily to transmit data between a server and a web application.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><b>theme.json<\/b> support was added to WordPress in version 5.8, so any WordPress version you should be running today includes it. (The <a href=\"https:\/\/www.dreamhost.com\/blog\/wordpress-full-site-editing\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gutenberg editor<\/a> was officially released in 2018 alongside WordPress 5.0.)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Some of the customization options you can choose from within <b>theme.json<\/b> include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Enabling or disabling features like drop caps, block padding, margins, and custom line heights<\/li>\n\n\n\n<li>Adding multiple <a href=\"https:\/\/fullsiteediting.com\/lessons\/theme-json-color-options\/\" target=\"_blank\" rel=\"noopener noreferrer\">color palettes<\/a>, gradients, and duotone filters for photos<\/li>\n\n\n\n<li>Modifying <a href=\"https:\/\/www.dreamhost.com\/blog\/web-safe-fonts\/\" target=\"_blank\" rel=\"noopener noreferrer\">font<\/a> sizes<\/li>\n\n\n\n<li>Adding default widths for content<\/li>\n\n\n\n<li>Managing custom CSS (cascading style sheet) properties. CSS is used to define visual appearance and formatting of HTML documents.<\/li>\n\n\n\n<li>Assigning <a href=\"https:\/\/www.dreamhost.com\/blog\/wordpress-templates-template-parts\/\" target=\"_blank\" rel=\"noopener noreferrer\">template parts<\/a> to template part areas<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The <b>theme.json<\/b> format has kept evolving. Version 1 shipped with WordPress 5.8, version 2 covered WordPress 5.9 through 6.5, and version 3, the current schema per the official <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/theme-json-reference\/theme-json-living\/\" target=\"_blank\" rel=\"noopener noreferrer\">Theme.json Version 3 Reference<\/a>, requires WordPress 6.6 or later (June 2024). Older versions still work, but new projects should use version 3.<\/p>\n\n<h2 id=\"h-options-explained\" class=\"wp-block-heading\"><b>Options explained<\/b><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">With these more granular customization options now within the reach of beginner and intermediate WordPress developers, let\u2019s talk about both <i>what<\/i> they are and <i>why<\/i> they could be beneficial to you.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-enabling-or-disabling-features-like-drop-caps-block-padding-margins-and-custom-line-heights\"><b>Enabling or disabling features like drop caps, block padding, margins, and custom line heights<\/b><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Drop caps (a style technique in which the first letter of a paragraph has a larger font size), block padding (the space inside the block that lies between the element\/content and the block\u2019s border, and that surrounds all sides of the element), margins, and custom line heights can give your pages a more distinctive and even formal look, depending on how you manage to style them.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-adding-multiple-color-palettes-gradients-and-duotone-filters-for-photos\"><b>Adding multiple color palettes, gradients, and duotone filters for photos<\/b><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The right color palette \u2014 or multiple palettes \u2014 can help to define and enhance the marketable identity of both your brand and your site, and gradients (backgrounds of two colors that transition into one another) can give your site a more dynamic identity than only using solid colors for the pages on your site. Duotone filters can be applied to photos you\u2019ve uploaded to your site, and reduce the number of colors in the photo to just two: one for the dark parts of the photo, another for the light parts. Using these resources within your WordPress theme\u2019s settings, your site\u2019s overall color schemes can be formal, moderate, or avant-garde \u2014 limited only by your imagination.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-modifying-font-sizes\"><b>Modifying font sizes<\/b><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Sometimes, the fonts in your chosen theme may suit the specific identity, tone, or attitude you\u2019re wanting to convey, but the set font sizes that are available may not. They may be too small or too large. By having the option to modify the sizes, you can tailor every aspect of the look of your site\u2019s copy to your brand\u2019s image.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-adding-default-widths-for-content\"><b>Adding default widths for content<\/b><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Content width is a theme feature whereby you can set the default or maximum allowed width (size) for any content in the theme, such as embeds and images added to posts. When you set default widths, WordPress can scale embed codes to specific sizes on the front-end and insert large images without breaking the main content area.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-managing-custom-css-cascading-style-sheet-properties\"><b>Managing custom CSS (cascading style sheet) properties<\/b><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If you\u2019ve spent any time working with CSS, we\u2019re sure you\u2019re asking yourself why you\u2019d even want to write your custom CSS in the radically different JSON format. In a word: flexibility.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s say you\u2019ve settled on a color, forest green, for your site that you <i>really<\/i> like. With CSS, you\u2019d have to go through and add the color code to all of the places you want to use that color. Not a huge deal, right?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now let\u2019s say that a few weeks later you find a slightly darker shade of forest green that you\u2019d much rather use. With plain CSS, you have to go back in and find\/replace every instance of the \u201cold\u201d forest green color code (unless you\u2019ve set up a CSS custom property, or variable, which also lets you update the value in one place).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A <b>theme.json<\/b> preset also lets you update the color definition once to change it sitewide, and it does something a bare CSS variable can\u2019t: WordPress wires the preset into the block editor\u2019s color controls and its generated styles, so the color you pick in the editor and the color on your live site always match. And you don\u2019t have to write the file by hand: an AI assistant can draft a starter <b>theme.json<\/b> for you (converting your existing CSS color variables into presets, for example) which you then review and refine.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-assign-template-parts-to-template-part-areas\"><b>Assigning template parts to template part areas<\/b><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Page templates are files that control how a specific page looks, and they can be used to apply particular page layouts to different pages on your site. In WordPress, there are also template parts, which function as smaller structural sections of a page template.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you are looking through your theme\u2019s files, you will usually see template parts for things like headers or footers. <b>theme.json<\/b> allows you to assign template parts to the three default placement areas within a template: <i>General<\/i>, <i>Header<\/i>, and <i>Footer<\/i>. You can also register custom areas.<\/p>\n\n\n\n<h2 id=\"h-to-convert-or-not-to-convert-that-is-the-question\" class=\"wp-block-heading\"><b>To convert or not to convert \u2014 that is the question<\/b><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Now that you\u2019ve gained an understanding of the WordPress theme configuration options available to you courtesy of the <b>theme.json<\/b> file, we want to touch on one last thing: converting a classic theme to a block theme. Our verdict up front: choose a block theme for new projects, or when you specifically want full-site editing and the Styles interface. If your classic theme is stable and doing its job, don\u2019t convert it just for novelty or theoretical performance gains. The benefits and risks below are what should tip your decision.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Block themes in WordPress have a number of benefits, since they have been built to improve both scalability and performance.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Block themes enhance loading performance by loading the styles only for the blocks that have been added to a page.<\/li>\n\n\n\n<li>Block themes are not required to manually enqueue stylesheets for both the front-end and editors.<\/li>\n\n\n\n<li><b>theme.json<\/b> handles all aspects of add_theme_support(), which results in less time noodling around in PHP.<\/li>\n\n\n\n<li>Accessibility features such as Skip to content, keyboard navigation, and landmarks are generated automatically without adding additional code.<\/li>\n\n\n\n<li>With a block theme, an end user can edit all parts of their website without touching any code.<\/li>\n\n\n\n<li>By using the Styles interface, users can customize colors and typography for the website and for any blocks they may use.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">However, converting a classic theme to a block theme is not without some risks.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Converting a classic theme to a block theme may affect child themes that expect a classic theme. Consider the potential impacts (or creating a new project with a new theme name) before converting.<\/li>\n\n\n\n<li><b>theme.json<\/b> requires WordPress version 5.8 or later. WordPress also dropped Internet Explorer 11 support with that release, but that\u2019s no longer a consideration: Microsoft retired IE11 on June 15, 2022.<\/li>\n<\/ul>\n\n<h2 id=\"h-theme-json-faqs\" class=\"wp-block-heading\"><b>Frequently asked questions<\/b><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-faq-theme-vs-template\"><b>What\u2019s the difference between a theme and a template in WordPress?<\/b><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A theme is the complete design system for your entire site; a template is a single-page layout within that theme. Changes to a template apply only to the pages that use it, while theme-level changes apply sitewide.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-faq-classic-theme-json\"><b>Can a classic theme use theme.json?<\/b><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Yes. <b>theme.json<\/b> works with both classic and block themes on WordPress 5.8 or later. In a classic theme, it configures editor settings and styles; block themes rely on it as their central configuration file.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-faq-theme-json-version\"><b>Which theme.json version should I use?<\/b><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Use version 3 for new projects. It\u2019s the current schema and requires WordPress 6.6 or later. Versions 1 (WordPress 5.8) and 2 (WordPress 5.9\u20136.5) are still supported, but new development happens in version 3.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-faq-code-required\"><b>Do I need to know how to code to use theme configuration options?<\/b><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">No. If your theme includes an options page or supports the Styles interface in the Site Editor, you can customize colors, typography, and layout without touching code. Editing <b>theme.json<\/b> directly only requires comfort with a structured text file, not programming.<\/p>\n\n\n\n<h2 id=\"h-pro-help-is-available\" class=\"wp-block-heading\"><b>Pro help is available!<\/b><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Customizing a theme through <b>theme.json<\/b> is doable for beginner and intermediate WordPress developers, but you don\u2019t have to figure it out alone. Every <a href=\"https:\/\/www.dreamhost.com\/wordpress\/managed\/\" target=\"_blank\" rel=\"noopener noreferrer\">DreamPress<\/a> managed WordPress hosting plan includes 24\/7 support from in-house WordPress experts who can answer your WordPress questions along the way. And if you\u2019d rather have the theme customization handled for you, <a href=\"https:\/\/www.dreamhost.com\/pro-services\/development\/\" target=\"_blank\" rel=\"noopener noreferrer\">DreamHost\u2019s Pro Services development team<\/a> can do the work.<\/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\" width=\"877\" height=\"539\"  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 1-click staging, daily offsite backups, and 24\/7 support from in-house 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                                    aria-label=\"Check Out Plans: Do More with DreamPress\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Check Out Plans                    <\/a>\n\n  <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Think customizing a WordPress theme means hacking PHP files or piling up custom CSS? Not anymore. Theme configuration options in WordPress are the global settings and styles a theme defines in its theme.json file: color palettes, typography, spacing, layout widths, and more. They let you customize your site\u2019s appearance without editing code. Introduced in WordPress [&hellip;]<\/p>\n","protected":false},"author":1062,"featured_media":86942,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_opengraph-title":"Theme Configuration in WordPress Explained - DreamHost","_yoast_wpseo_opengraph-description":"Theme configuration options in WordPress let you customize colors, fonts, and layouts via theme.json \u2014 no code required.","_yoast_wpseo_twitter-title":"Theme Configuration in WordPress Explained - DreamHost","_yoast_wpseo_twitter-description":"Theme configuration options in WordPress let you customize colors, fonts, and layouts via theme.json \u2014 no code required.","toc_headlines":"[[\"h-so-what-are-theme-configuration-options-then\",\"What are theme configuration options in WordPress?\"],[\"h-an-overview-of-wordpress-themes-and-templates\",\"Themes vs. templates: A quick refresher\"],[\"h-what-the-heck-is-json\",\"What is theme.json in WordPress?\"],[\"h-options-explained\",\"Options explained\"],[\"h-to-convert-or-not-to-convert-that-is-the-question\",\"To convert or not to convert \u2014 that is the question\"],[\"h-theme-json-faqs\",\"Frequently asked questions\"],[\"h-pro-help-is-available\",\"Pro help is available!\"]]","hide_toc":false,"show_updated_at":"1","footnotes":""},"categories":[13121,10025,696],"tags":[],"class_list":["post-35323","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-decoding-wordpress","category-tech-talk","category-wordpress"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Theme Configuration in WordPress Explained - DreamHost<\/title>\n<meta name=\"description\" content=\"Theme configuration options in WordPress let you customize colors, fonts, and layouts via theme.json \u2014 no code required.\" \/>\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-theme-configuration\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Theme Configuration in WordPress Explained - DreamHost\" \/>\n<meta property=\"og:description\" content=\"Theme configuration options in WordPress let you customize colors, fonts, and layouts via theme.json \u2014 no code required.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.dreamhost.com\/blog\/wordpress-theme-configuration\/\" \/>\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-07-06T14:00:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-14T01:39:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/07\/WordPress-Theme-Configuration-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=\"Theme Configuration in WordPress Explained - DreamHost\" \/>\n<meta name=\"twitter:description\" content=\"Theme configuration options in WordPress let you customize colors, fonts, and layouts via theme.json \u2014 no code required.\" \/>\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=\"8 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Theme Configuration in WordPress Explained - DreamHost","description":"Theme configuration options in WordPress let you customize colors, fonts, and layouts via theme.json \u2014 no code required.","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-theme-configuration\/","og_locale":"en_US","og_type":"article","og_title":"Theme Configuration in WordPress Explained - DreamHost","og_description":"Theme configuration options in WordPress let you customize colors, fonts, and layouts via theme.json \u2014 no code required.","og_url":"https:\/\/www.dreamhost.com\/blog\/wordpress-theme-configuration\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2022-07-06T14:00:36+00:00","article_modified_time":"2026-08-14T01:39:21+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/07\/WordPress-Theme-Configuration-Social.jpeg","type":"image\/jpeg"}],"author":"Jason Cosper","twitter_card":"summary_large_image","twitter_title":"Theme Configuration in WordPress Explained - DreamHost","twitter_description":"Theme configuration options in WordPress let you customize colors, fonts, and layouts via theme.json \u2014 no code required.","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Jason Cosper","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.dreamhost.com\/blog\/wordpress-theme-configuration\/#article","isPartOf":{"@id":"https:\/\/www.dreamhost.com\/blog\/wordpress-theme-configuration\/"},"author":{"name":"Jason Cosper","@id":"https:\/\/www.dreamhost.com\/blog\/#\/schema\/person\/2273b8bf7336df78f6d99a89c17253c4"},"headline":"Decoding WordPress: New Theme Configuration Options with Theme.JSON File","datePublished":"2022-07-06T14:00:36+00:00","dateModified":"2026-08-14T01:39:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.dreamhost.com\/blog\/wordpress-theme-configuration\/"},"wordCount":1863,"publisher":{"@id":"https:\/\/www.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.dreamhost.com\/blog\/wordpress-theme-configuration\/#primaryimage"},"thumbnailUrl":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2026\/08\/blog-hero-wordpress-theme-configuration-dreamops-de8a116d2252cb6c218da925.webp","articleSection":["Decoding WordPress","Tech Talk","WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.dreamhost.com\/blog\/wordpress-theme-configuration\/","url":"https:\/\/www.dreamhost.com\/blog\/wordpress-theme-configuration\/","name":"Theme Configuration in WordPress Explained - DreamHost","isPartOf":{"@id":"https:\/\/www.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.dreamhost.com\/blog\/wordpress-theme-configuration\/#primaryimage"},"image":{"@id":"https:\/\/www.dreamhost.com\/blog\/wordpress-theme-configuration\/#primaryimage"},"thumbnailUrl":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2026\/08\/blog-hero-wordpress-theme-configuration-dreamops-de8a116d2252cb6c218da925.webp","datePublished":"2022-07-06T14:00:36+00:00","dateModified":"2026-08-14T01:39:21+00:00","description":"Theme configuration options in WordPress let you customize colors, fonts, and layouts via theme.json \u2014 no code required.","breadcrumb":{"@id":"https:\/\/www.dreamhost.com\/blog\/wordpress-theme-configuration\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.dreamhost.com\/blog\/wordpress-theme-configuration\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.dreamhost.com\/blog\/wordpress-theme-configuration\/#primaryimage","url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2026\/08\/blog-hero-wordpress-theme-configuration-dreamops-de8a116d2252cb6c218da925.webp","contentUrl":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2026\/08\/blog-hero-wordpress-theme-configuration-dreamops-de8a116d2252cb6c218da925.webp","width":1536,"height":1024},{"@type":"BreadcrumbList","@id":"https:\/\/www.dreamhost.com\/blog\/wordpress-theme-configuration\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.dreamhost.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Decoding WordPress: New Theme Configuration Options with Theme.JSON File"}]},{"@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\/2273b8bf7336df78f6d99a89c17253c4","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":35323,"es":35333,"pt":51734,"pl":51738,"uk":53846,"de":53867,"ru":53870,"it":68867,"fr":71383,"nl":71413},"pll_sync_post":{},"_links":{"self":[{"href":"https:\/\/www.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/35323","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\/35323\/revisions"}],"predecessor-version":[{"id":86959,"href":"https:\/\/www.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/35323\/revisions\/86959"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/86942"}],"wp:attachment":[{"href":"https:\/\/www.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=35323"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=35323"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=35323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}