Are you utilizing a block theme and seeing the theme.json file in WordPress? Perhaps you’re questioning what the aim of this file is and whether or not it is best to edit it.
The theme.json file is an important a part of the complete web site enhancing expertise in WordPress. As block themes turn out to be extra widespread, it’s vital to grasp what theme.json does and methods to edit it correctly.
That’s why we at WPBeginner have put collectively this complete information. On this article, we’ll clarify what a theme.json file is and the way you need to use it to customise your WordPress web site.
What Is the WordPress theme.json File?
The theme.json file is a particular theme file launched in WordPress 5.8. It performs a key position within the full web site enhancing (FSE) expertise, which lets you visually customise each facet of your WordPress block theme.
Basically, the theme.json file acts as a blueprint that controls the styling and performance of your block theme. It accommodates code that tells WordPress how totally different parts like colours, typography, layouts, and templates ought to look and behave.
Why Do WordPress Block Themes Want a theme.json File?
Modifying a block theme in WordPress is totally different from enhancing a basic theme.
Traditional themes use the features.php file to allow options like customized menus or featured photos with the add_theme_support() perform. Then, you may type these options with CSS guidelines within the CSS stylesheet (type.css) file.
In block themes, theme.json acts as a central hub for every little thing that defines the appear and feel of your block theme. It helps you to outline issues like fonts, colours, and format choices in a single place, changing the necessity for add_theme_support() in features.php.
That’s why the features.php file in block themes is usually smaller than the equal in basic themes.
Having a devoted theme.json file affords some nice advantages over the earlier basic theme system.
First, theme.json works hand-in-hand with the WordPress full web site editor. This lets you simply customise your theme’s types and settings straight throughout the editor with no need to the touch any code.
Moreover, theme.json goals to create a constant expertise for each builders and customers. Some customers discover it actually irritating when they should change themes as a result of they need to study utterly new layouts and styling choices.
With theme.json, switching themes turns into a smoother course of as a result of every little thing is organized in an analogous manner.
Lastly, by utilizing theme.json, theme builders and customers can future-proof their work as WordPress continues to increase its full web site enhancing capabilities.
Now that we’ve coated what a theme.json file is, let’s delve deeper into the subject. You need to use the short hyperlinks under to navigate by way of this information:
The place Do You Discover the WordPress theme.json File?What Does the theme.json File Look Like?What You Ought to Do Earlier than Modifying the theme.json File Edit WordPress theme.json FileBonus Tip: Use WPCode to Add Customized Code to Your Theme
The place Do You Discover the WordPress theme.json File?
The theme.json file is discovered inside your theme listing in your internet server. The everyday file path can be public_html » wp-content » themes » your-theme-name » theme.json.
To entry it, you first want to connect with your web site through FTP or your internet hosting account’s file supervisor.
If you happen to use Bluehost, then you may log in and change to the ‘Web sites’ tab. Then, click on on the ‘Settings’ button under your web site.
Now, ensure that to remain on the ‘Overview’ tab.
Then, scroll right down to click on on the ‘File Supervisor’ button.
Whenever you open the file supervisor this fashion, you’ll routinely be inside your web site’s root folder.
Right here, search for the ‘wp-content’ listing and open it. There, you’ll discover the ‘themes’ folder which accommodates all of your put in WordPress themes.
Open the folder for the precise block theme you’re utilizing. The theme.json file will probably be situated straight inside this theme listing alongside different theme recordsdata.
Upon getting discovered it, you may view the theme.json file utilizing a code editor.
What Does the theme.json File Look Like?
The theme.json file has a selected construction that organizes all the worldwide settings on your WordPress block theme.
Relying on how complicated or easy your theme seems, the file will be very brief or lengthy. Nevertheless, you may simply break this file down into 7 top-level sections:
{
“$schema”: “https://schemas.wp.org/trunk/theme.json”,
“model”: 2,
“settings”: {},
“types”: {},
“customTemplates”: {},
“templateParts”: {},
“patterns”: [] }
“$schema”: “https://schemas.wp.org/trunk/theme.json”,
“model”: 2,
“settings”: {},
“types”: {},
“customTemplates”: {},
“templateParts”: {},
“patterns”: [] }
Right here’s a simplified breakdown:
Schema
This half is definitely optionally available to have in block themes, so you might or might not see it in yours.
The schema property hyperlinks the URL to the WordPress JSON schema, which defines the worldwide settings, types, and different configurations on your theme.
Model
This part specifies which API model of the theme.json format is being utilized by the file and ensures it follows the right construction.
As of the writing of this text, the API is at model 2.
Settings
This property defines the choices and controls accessible for customers to customise their theme. These embrace presets for the theme’s coloration palette, typography, spacing, gradients, shadows, borders, and so forth.
Right here’s a quite simple instance of what the settings property seems like:
{
“settings”: {
“coloration”: {
“palette”: [
{
“slug”: “base”,
“color”: “#ffffff”,
“name”: “White”
},
{
“slug”: “contrast”,
“color”: “#222222”,
“name”: “Dark”
},
{
“slug”: “accent”,
“color”: “#f08080”,
“name”: “Pink”
},
{
“slug”: “accent-2”,
“color”: “#90ee90”,
“name”: “Light Green”
},
{
“slug”: “accent-3”,
“color”: “#e0ffff”,
“name”: “Light Blue”
}
] },
“typography”: {
“fontFamilies”: [
{
“fontFamily”: “Open Sans, sans-serif”,
“slug”: “open-sans”,
“name”: “Open Sans”
},
{
“fontFamily”: “Arial, sans-serif”,
“slug”: “arial”,
“name”: “Arial”
},
{
“fontFamily”: “Times New Roman, serif”,
“slug”: “times-new-roman”,
“name”: “Times New Roman”
}
],
“fontSizes”: [
{
“name”: “Extra Small”,
“slug”: “xx-small”,
“size”: “0.75rem”
},
{
“name”: “Small”,
“slug”: “small”,
“size”: “0.875rem”
},
{
“name”: “Medium”,
“slug”: “medium”,
“size”: “1rem”
},
{
“name”: “Large”,
“slug”: “large”,
“size”: “1.125rem”
},
{
“name”: “Extra Large”,
“slug”: “x-large”,
“size”: “1.25rem”
},
{
“name”: “XX-Large”,
“slug”: “xx-large”,
“size”: “1.5rem”
}
],
“spacing”: {
“items”: [“rem”],
“values”: {
“small”: “1rem”,
“medium”: “1.5rem”,
“massive”: “2rem”
}
}
}
}
}
“settings”: {
“coloration”: {
“palette”: [
{
“slug”: “base”,
“color”: “#ffffff”,
“name”: “White”
},
{
“slug”: “contrast”,
“color”: “#222222”,
“name”: “Dark”
},
{
“slug”: “accent”,
“color”: “#f08080”,
“name”: “Pink”
},
{
“slug”: “accent-2”,
“color”: “#90ee90”,
“name”: “Light Green”
},
{
“slug”: “accent-3”,
“color”: “#e0ffff”,
“name”: “Light Blue”
}
] },
“typography”: {
“fontFamilies”: [
{
“fontFamily”: “Open Sans, sans-serif”,
“slug”: “open-sans”,
“name”: “Open Sans”
},
{
“fontFamily”: “Arial, sans-serif”,
“slug”: “arial”,
“name”: “Arial”
},
{
“fontFamily”: “Times New Roman, serif”,
“slug”: “times-new-roman”,
“name”: “Times New Roman”
}
],
“fontSizes”: [
{
“name”: “Extra Small”,
“slug”: “xx-small”,
“size”: “0.75rem”
},
{
“name”: “Small”,
“slug”: “small”,
“size”: “0.875rem”
},
{
“name”: “Medium”,
“slug”: “medium”,
“size”: “1rem”
},
{
“name”: “Large”,
“slug”: “large”,
“size”: “1.125rem”
},
{
“name”: “Extra Large”,
“slug”: “x-large”,
“size”: “1.25rem”
},
{
“name”: “XX-Large”,
“slug”: “xx-large”,
“size”: “1.5rem”
}
],
“spacing”: {
“items”: [“rem”],
“values”: {
“small”: “1rem”,
“medium”: “1.5rem”,
“massive”: “2rem”
}
}
}
}
}
If you happen to take a look at the code, the language used is fairly simple to grasp. You’ll be able to inform that the settings are defining the colours, font households, font sizes, and spacing used within the theme.
If there are any references right here or in your theme that you just don’t perceive, you may try the official WordPress Settings Reference.
Some parts, like colours and font households, have slugs, like this:
{
“settings”: {
“coloration”: {
“palette”: [
{
“slug”: “base”,
“color”: “#ffffff”,
“name”: “White”
},
“settings”: {
“coloration”: {
“palette”: [
{
“slug”: “base”,
“color”: “#ffffff”,
“name”: “White”
},
These will come in handy for the styles section later on to make presets, which we will explain in the next part.
Styles
While the settings section defines the theme’s default customization options, the styles section applies them to the theme.
Here, you can apply the customization settings to the entire website or at a block level using presets.
Let’s check out the example below:
{
“settings”: {
// Existing settings from the previous example
},
“styles”: {
“color”: {
“background”: “var(–wp–preset–color–base)”,
“text”: “var(–wp–preset–color–contrast)”
},
“elements”: {
“link”: {
“color”: {
“text”: “var(–wp–preset–color–accent-2)”
}
},
“h1”: {
“fontSize”: “var(–wp–preset–font-size–xx-large)”,
“lineHeight”: “1.2”,
“marginBottom”: “1rem”
},
“h2”: {
“fontSize”: “var(–wp–preset–font-size–x-large)”,
“lineHeight”: “1.2”,
“marginBottom”: “1rem”
},
“h3”: {
“fontSize”: “var(–wp–preset–font-size–large)”,
“lineHeight”: “1.2”,
“marginBottom”: “1rem”
}
}
}
}
“settings”: {
// Existing settings from the previous example
},
“styles”: {
“color”: {
“background”: “var(–wp–preset–color–base)”,
“text”: “var(–wp–preset–color–contrast)”
},
“elements”: {
“link”: {
“color”: {
“text”: “var(–wp–preset–color–accent-2)”
}
},
“h1”: {
“fontSize”: “var(–wp–preset–font-size–xx-large)”,
“lineHeight”: “1.2”,
“marginBottom”: “1rem”
},
“h2”: {
“fontSize”: “var(–wp–preset–font-size–x-large)”,
“lineHeight”: “1.2”,
“marginBottom”: “1rem”
},
“h3”: {
“fontSize”: “var(–wp–preset–font-size–large)”,
“lineHeight”: “1.2”,
“marginBottom”: “1rem”
}
}
}
}
As you can tell, there is this line of code appearing throughout this snippet: var(–wp–preset–xxx) . These are presets, which are shortcuts in the styles section that refer back to the values defined in the settings section.
For example, consider {“slug”: “base”, “color”: “#ffffff”, “name”: “White”} in the settings section. Here, “base” is the slug, and the corresponding preset for this color is var(–wp–preset–color–base) .
Therefore, the code “color”: {“background”: “var(–wp–preset–color–base)” in styles says that the background color of this theme is white.
Custom Templates
Block theme developers can create predefined layouts for custom pages, posts, or post types for users to use.
For example, the Twenty Twenty-Four theme has several custom templates defined in the theme.json file: Page No Title, Page With Sidebar, Page with wide Image, and Single with Sidebar.
You can use any of these to create your content.
],
“customTemplates”: [
{
“name”: “page-no-title”,
“postTypes”: [“page”],
“title”: “Web page No Title”
},
{
“title”: “page-with-sidebar”,
“postTypes”: [“page”],
“title”: “Web page With Sidebar”
},
{
“title”: “page-wide”,
“postTypes”: [“page”],
“title”: “Web page with large Picture”
},
{
“title”: “single-with-sidebar”,
“postTypes”: [“post”],
“title”: “Single with Sidebar”
}
]
“customTemplates”: [
{
“name”: “page-no-title”,
“postTypes”: [“page”],
“title”: “Web page No Title”
},
{
“title”: “page-with-sidebar”,
“postTypes”: [“page”],
“title”: “Web page With Sidebar”
},
{
“title”: “page-wide”,
“postTypes”: [“page”],
“title”: “Web page with large Picture”
},
{
“title”: “single-with-sidebar”,
“postTypes”: [“post”],
“title”: “Single with Sidebar”
}
]
One factor to notice is that the theme.json file solely references the templates by title and gives metadata about them, resembling their title and the put up varieties they’re supposed for.
Nevertheless, the precise look and performance of the customized templates are outlined in separate template recordsdata contained in the theme folder.
To see them, you may go to public_html » wp-content » themes » your-theme-name » templates.
Template Components
Template components are reusable areas you may apply throughout your customized templates. These are parts like headers, footers, sidebars, and so forth.
Right here’s what these template components seem like registered in theme.json:
“templateParts”: [
{
“area”: “header”,
“name”: “header”,
“title”: “Header”
},
{
“area”: “footer”,
“name”: “footer”,
“title”: “Footer”
},
{
“area”: “sidebar”, // Removed “uncategorized”
“name”: “sidebar”,
“title”: “Sidebar”
},
{
“area”: “post-meta”, // Removed “uncategorized”
“name”: “post-meta”,
“title”: “Post Meta”
}
]
{
“area”: “header”,
“name”: “header”,
“title”: “Header”
},
{
“area”: “footer”,
“name”: “footer”,
“title”: “Footer”
},
{
“area”: “sidebar”, // Removed “uncategorized”
“name”: “sidebar”,
“title”: “Sidebar”
},
{
“area”: “post-meta”, // Removed “uncategorized”
“name”: “post-meta”,
“title”: “Post Meta”
}
]
Like customized templates, the theme.json file solely references the templates.
Their precise look is outlined in their very own template half recordsdata within the components folder.
Patterns
Patterns are pre-made collections of blocks that allow you to create customized content material layouts in your pages, posts, or wherever else in your theme.
Whenever you open the complete web site editor, you might discover the Patterns menu. That is the place you’ll find all of the accessible patterns on your Gutenberg block theme.
With theme.json, theme builders can reference patterns from the general public Sample listing. It’s a good way to supply extra customization choices with out designing these reusable blocks your self.
For instance, the Twenty Twenty-4 theme references two patterns from the official listing: three columns of providers and purchasers part:
“patterns”: [
“three-columns-of-services”,
“clients-section”
]
“three-columns-of-services”,
“clients-section”
]
We all know this as a result of these patterns are within the Patterns menu within the full web site editor.
Nevertheless, they’re not within the patterns folder contained in the theme listing.
Observe: It’s possible you’ll discover that the templates, components, and patterns folders in your theme listing comprise recordsdata not laid out in theme.json, however they’re nonetheless seen within the full web site editor.
If you happen to’re curious, it’s because WordPress is designed to routinely acknowledge and use these folders primarily based on their naming conventions and placement throughout the theme’s listing.
What You Ought to Do Earlier than Modifying the theme.json File
Since theme.json is a core theme file, enhancing it straight in your stay WordPress web site comes with some threat. Unintended errors might probably break your theme or web site.
A safer method is to make use of a youngster theme.
A baby theme inherits all of the types and functionalities of your guardian theme (the block theme you’re utilizing) however permits you to customise issues with out modifying the guardian theme itself. This manner, if the guardian theme receives updates, your customizations received’t be overwritten.
You’ll be able to learn our information on methods to create a toddler theme in WordPress for extra info. This text reveals a simple methodology with the Create Block Theme plugin, which is able to routinely generate a brand new theme.json file on your youngster theme solely.
To make sure a easy enhancing expertise and keep away from any web site downtime, we additionally suggest creating a brand new backup of your WordPress web site. This manner, if one thing goes flawed, you may simply restore your web site to its earlier state.
We suggest utilizing a plugin like Duplicator for a fast and dependable backup answer.
It’s additionally really helpful to work in a native WordPress growth setting or a staging web site. This creates a duplicate of your stay web site the place you may take a look at adjustments safely with out affecting your guests.
Listed here are some extra suggestions to remember:
Start with minor edits in your theme.json file and take a look at them completely earlier than making extra complicated adjustments.
If you happen to’re not sure about any particular property or setting throughout the theme.json file, seek the advice of the official WordPress documentation.
Don’t hesitate to hunt assist from the theme developer’s assist workforce or the WordPress.org assist boards in the event you run into any points. Take a look at our information on methods to ask for WordPress assist for extra info.
Edit WordPress theme.json File
Based mostly on our analysis and testing, we’ve found two methods to edit a WordPress theme.json file: utilizing the full-site editor or utilizing code. The primary possibility is far simpler and safer and allows you to see your modifications from the entrance finish of your web site.
In the meantime, the second alternative is really helpful if you’re comfy with superior WordPress growth.
Edit theme.json With out Code (Newbies)
To edit your theme.json file with out touching the code straight, you need to use the Create Block Theme plugin. This plugin was revealed by the official WordPress.org workforce to let customers create, edit, and save the type variations of their block theme.
First, go forward and set up the WordPress plugin in your admin space. Then, open the full-site editor by going to Look » Editor.
You’ll now see a number of menus to edit your theme.
Right here, choose ‘Kinds.’
Subsequent, click on the pencil ‘Edit types’ icon.
This can take you to the block editor to edit your web site’s international types.
Now, you may change the type of your theme like regular. You’ll be able to learn the part on methods to edit your theme’s international types in our WordPress full-site enhancing information for extra info.
Let’s strive making a customized coloration palette for example.
The coloration scheme or palette is a set of default colours for parts like textual content, backgrounds, and buttons. It ensures a cohesive look all through your web site.
Parts utilizing the identical coloration preset will at all times match in order that your web site design seems polished {and professional}.
To edit the palette, choose ‘Colours’ on the Kinds settings sidebar.
On the subsequent display, you will notice some settings to customise your theme’s colours.
Right here, click on the colours within the ‘Palette’ part.
On this instance, the Twenty Twenty-4 theme has already outlined 5 colours within the palette, however you may change any of them to create a customized one from scratch.
To take action, click on one of many colours beneath ‘Theme.’ Then, choose any coloration within the coloration picker software.
Now, in the event you preview your web site, you will notice that the precise blocks or parts that used the earlier coloration have been changed with the colour you simply chosen in your palette.
You’ll be able to repeat the identical steps for every coloration. Then, click on ‘Save.’
After saving your adjustments, click on the Create Block Theme button (the wrench icon).
Then, choose ‘Save Adjustments to Theme.’
On the subsequent display, it’s essential scroll down.
After that, click on ‘Save Adjustments.’ This can immediate WordPress to retailer all of the adjustments you’ve made to your theme within the theme.json file.
When you try this, the block editor will then refresh itself.
Now, click on the Create Block Theme button once more and choose ‘View theme.json.’
To see the code on your customized coloration palette, search for palette that’s nested inside coloration and settings, like so:
“settings”: {
// Some code…
“coloration”: {
// Some code…
“palette”:
}
}
// Some code…
“coloration”: {
// Some code…
“palette”:
}
}
Underneath it, it is best to see the brand new hex codes of your customized coloration palette.
Edit theme.json With Code (Superior Customers)
This methodology is really helpful if you’re an aspiring WordPress theme developer or have some expertise with code.
First, open your block theme’s theme.json file in your WordPress listing. You’ll be able to both use the code editor in your internet host’s file supervisor or obtain the file, edit it in your pc, and add it again to your server.
We’ll use the Twenty Twenty-4 theme and Bluehost’s file supervisor for demonstration functions. In case you are a Bluehost consumer and are utilizing the file supervisor, then you may simply merely right-click in your theme.json file and click on ‘Edit.’
If you happen to use FTP, then you may learn our information on methods to use FTP to add recordsdata to WordPress.
Let’s strive a easy instance of enhancing your theme.json file: creating customized font sizes.
Once more, keep in mind that the settings property specifies your theme’s default types, whereas the types property implements them. For that reason, we’ll edit the settings property within the theme.json file.
If you happen to use a toddler theme, then you may merely copy and paste the next code into your theme.json file and alter the font sizes in pixels as you see match:
{
“settings”: {
“typography”: {
“fluid”: false,
“fontSizes”: [
{
“name”: “Small”,
“slug”: “small”,
“size”: “16px”
},
{
“name”: “Medium”,
“slug”: “medium”,
“size”: “24px”
},
{
“name”: “Large”,
“slug”: “large”,
“size”: “40px”
},
{
“name”: “Extra Large”,
“slug”: “x-lagrge”, // Typo fixed (large -> large)
“size”: “48px”
}
] }
}
}
“settings”: {
“typography”: {
“fluid”: false,
“fontSizes”: [
{
“name”: “Small”,
“slug”: “small”,
“size”: “16px”
},
{
“name”: “Medium”,
“slug”: “medium”,
“size”: “24px”
},
{
“name”: “Large”,
“slug”: “large”,
“size”: “40px”
},
{
“name”: “Extra Large”,
“slug”: “x-lagrge”, // Typo fixed (large -> large)
“size”: “48px”
}
] }
}
}
Observe: In case you are enhancing your guardian theme’s file straight, then it’s essential discover the code that claims fontSizes .
It ought to be nested inside typography and settings , like so:
{
“settings”: {
// Some code…
“typography”: {
// Some code…
“fontSizes”: [
// Font size definitions here
] }
}
}
“settings”: {
// Some code…
“typography”: {
// Some code…
“fontSizes”: [
// Font size definitions here
] }
}
}
After that, change these traces of code with the code snippet from above. Simply make it possible for there are not any syntax errors in it.
As soon as accomplished, save the file and preview your web site to see your adjustments. For Bluehost customers, you may merely click on ‘Save Adjustments’ within the file supervisor’s code editor.
If you wish to edit your theme.json additional, we extremely encourage getting extra acquainted with the file’s construction as defined within the earlier part.
We additionally recommend studying the official WordPress Settings Reference, which features a full record of the accessible settings properties and directions for utilizing them.
Bonus Tip: Use WPCode to Add Customized Code to Your Theme
On this information, you may have realized about theme.json and its potential for theme customization. However perhaps it nonetheless feels a bit overwhelming to edit straight.
Fortunately, there’s one other user-friendly possibility for including customized code and making superior customizations: WPCode.
With WPCode, you may insert customized code snippets with out ever needing to the touch your theme recordsdata themselves. This considerably reduces the chance of breaking your web site throughout customization.
If you wish to study extra about this code snippet plugin, try our full WPCode evaluate.
Additionally, listed below are some useful tutorials to get you began with utilizing WPCode:
Helpful WordPress Code Snippets for Newbies (Professional Choose)
Spotlight New Posts for Returning Guests in WordPress
Spotlight Textual content in WordPress
Simply Add Field Shadow in WordPress
We hope this text helped you study concerning the theme.json file in WordPress. You might also need to try our newbie’s information on methods to edit a WordPress web site and our skilled decide of the finest drag-and-drop web page builders for WordPress.
If you happen to favored this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You may also discover us on Twitter and Fb.
The put up What Is theme.json File in WordPress and Use It first appeared on WPBeginner.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!