-sidebar-toc> -language-notice>

If you're creating an entirely new theme or changing one that you have already to create new style in the process of development of an existing theme getting the basic knowledge of theme.json is essential.

This guide will assist you to learn about the main and secondary (nested) features of the theme.json file, specifically focusing on the main styling and setting properties. They are among the most crucial components in the file. We will provide a detailed explanation as well as codes for each.

This foundation had been laid out in the prior piece, but in particular in the final section .

What are the styles that you can render using blocks?

WordPress uses the cascading mechanism which is integrated into the program to display different styles and designs on websites. When multiple sites use the same style or settings, WordPress must determine which style is most important. The priority order WordPress employs to decide what styles should be utilized:

1. WordPress The Its Core Fallback theme.json file is inside the wp_includes directory. The theme.json file is frequently updated to reflect the latest WordPress versions and isn't to change.
2. Theme The main theme.json file used by designers of themes to decide the themes' settings, its style, and various other aspects.
3. Style variants When a theme has styles, every one comes with its distinct theme.json file stored in subdirectories that have been devoted to themes. styles.
4. Theme created for kids Much like conventional themes this theme is designed for kids and can be changed to the parent theme without altering the theme's data (optional).
5. Theme designs of children as well as the normal themes. Themes for children could include their own theme.json file in the subdirectory of themes (optional).
6. Styles are designed by the user (these are custom designed designs that are uploaded to the site by WordPress editors (for posts, pages or even the entire site in all) and then stored within MySQL. MySQL database.

The cascading pattern ensures that themes from high-quality sources will be more viewed than those from lower priority sources. As an example it is that the theme's settings in' theme.json file can be overridden by the theme.json file that is used as the base WordPress theme.json. Also, a theme's personal designs will be distinct in comparison to the look of the parent theme.

Design concepts created by the user (6) have the top priority, excluding the styles of other designers within the same cacade.

In this blog this blog post, we'll be focusing on theme.json which is an essential theme.json file located in the root directory for the majority of WordPress themes that are blocked.

Discussion of the principal property as well as the value added

In this article, we'll examine seven most frequently employed objects in theme.json, which were separated into three classes to make it easier to understand.

Some definitions before entering into

If you're using theme.json, you are likely to find different definitions for the key components. To help make the concept clearer Let's take a review the ways we can define them in this post:

1. Sections Sections are high-level possibilities (also called "top-level objects" in a few articles).
2. objectsThese are the main components in the theme.json file, that includes the settings as well as the style.
3. Properties They're the parts which make up objects. As an example, objects that are set for instance to be set. Each object is composed with twelve properties.
4. Key-value pair properties comprise key-value pairs. The term "key" is the attribute of the property. It is enclosed in quotes. The term "value" may be either a string, boolean, or array.

When we mention "by default," we refer to the default configurations in the core theme.json file, located at wp-includes/theme.json.

Syntax Overview

1. Booleans do not have to be included within quotation marks.
2. Strings are contained within double quotes.
3. arrays are wrapped in circular brackets. arrays are wrapped in brackets which contain.
4. The HTML0's parts are enclosed in curly braces{ . Every object is enclosed with curly braces. They have a wide range of properties, or items which are placed inside.
5. Commas are commonly utilized to identify the various keys-value pair that can be found in a particular object.

Here's an example of a common syntax:

 "house": "rooms": "kitchen" 

The mixture of properties

We've divided the property into three sections for more ease of navigation.

1. Basic properties
2. The property of settings and styles
3. Templates and patterns are the exclusive property of

In order to simplify the process We've removed the outer wrappers. Instead of examining the whole structure:

"settings": "settings": () "appearanceTools" false "background": "backgroundImage" false

The word could be rephrased into:

"appearanceTools" False "background": "backgroundImage" True

Basic properties

"$schema": "https://schemas.wp.org/wp/6.6/theme.json", "version": 3

Properties of property that are in Styles and Setting

If you're familiar with the classic themes, you might think of setting up properties for you to have access to the capabilities and features generally stored within the theme's file system. This are accessible through the Appearance section. Custom Section inside the WordPress administrator.

The Styles can be like CSS properties that existed in the styles.css file, which determine the layout and design.

Settings

Apart from the properties are part of the blocks as well as elements' attributes have, additional options can be used globally. Because the majority of these settings utilize Boleans, they act in a way of toggles, which let you choose to allow or block the UI choices.

It is important to recognize that different keys are applicable to all situations. For instance, it is difficult for readers to figure out the right length of a paragraph.

Appearance documents

The options are accessible independently or when used in conjunction with "appearanceTools" The answer is a yes..

Keys within appearanceTools comprise:

• background
• backgroundImage allows the user to apply background images to the blocks.
• backgroundSize is a method by that background images are diminished in dimensions (cover or include. ).
•       Border border of HTML1      
• color lets the border color to be altered.
• style lets users choose the type of border (solid or dashed or dashed. ).
• width controls the thickness of the border.
• radius permits users to calculate corner angles by changing the perimeter's radius.
• Color
• link lets you set the color of links within the text.
• heading allows users to discern the hue that heading tags have (

,

, etc. ).

• button determines the colors of buttons that are used in the theme.
• caption lets you set the color of captions, which can be changed.
• dimensions
• aspectRatio allows users to determine the ratio of width to the height of block.
• minHeight lets you define the minimum height at which blocks need to be located at.
•       position Place      
• sticky lets the user create the block of sticky that remains in place during scrolling.
•       spacing      
• blockGap Controls block spacing.
• margin Users can alter the margins on the block.
• padding manages the padding within the element. It also decides on the space between its content as well as its borders.
•       typography      
• lineHeight allows users to alter the size of lines (space between text lines) so that it is easier to read.

Example: If you want users to upload a background image to their computer, keep the other applications to conceal the look. Utilize:

"appearanceTools": false, "background": "backgroundImage" True

Blocks

blocks property lets users set specific settings for each block. blocks property permits users to configure settings for every block. The ability to modify the default settings for the whole block.

Example: If appearanceTools is set to false however you would like to have borders displayed on your block, you may apply

"border": "color": true, "style": true, "width": true, "radius": true 

Color

It lets the user pick the colors of backgrounds as well as color gradients, colours for text and more.

Keys which are made up from the color property

• background determines the color of the background for parts or elements.
• personal -- Enables or blocks the ability to allow users to select certain colors.
• CustomDuotone lets people create unique Duotone filters on images.
• customGradient -- Enables custom gradient options.
• defaultDuotone -- Provides default duotone image filter options.
• defaultGradient is the primary gradient options available for customers.
• defaultPalette This setting defines the color palette that will be used as default for the theme.
• duotone -- Allows duotone filters on images.
• gradient * permits gradients to be used for backgrounds as well as other elements.
• hyperlink determines the colors for links in the theme.
• text -- Text color control.
• heading * Sets colours for headings (e.g., h1, h2, etc. ).
• button Control of color for buttons.
• caption * Defines the hue of captions to be used for multimedia elements.

Here are some instances:

Example 1. If you would like to disable the possibility that users can pick colors, users may do so by:

"color": "custom" False

Example 2. For customizing primary theme colors, as well as secondary colors, you are able to use this configuration:

"color": "palette": [ "slug": "primary", "color": "#0000ff", "name": "Primary" , "slug": "secondary", "color": "#ff0000", "name": "Secondary" ] 

Dimensions

The property permits you to manage the dimensions of your building like the size, height and width. aspect ratio.

Keys in the dimensions of property

• aspectRatio lets users determine the aspect ratio or limit it to a specific block (e.g. 16:9, 4:3).
• defaultAspectRatios -- Defines default aspect ratios for blocks.
• minHeight allows the possibility of defining the minimum height of the blocks.

To allow users to define a maximum size for the blocks in support, follow these steps:

"dimensions": "minHeight" True

Layout

Layout property Layout property lets users specify layout-related settings, including the size of content as well as the ability to alter the layout. Layout settings can be altered with these keys:

• ContentSize ItSets the width which is the width that defaults for blocks.
• wideSize -The wideSize - Defines the size of the block when the option of wide alignment is chosen.
• permitEditing AllowEditingDetermines the extent to which users are able to alter layout options.
• allowCustomContentAndWideSize -- Enables the customization of contentSize and wideSize.

Exemple Layout settings can be configured using default block and block widths:

"layout": "contentSize": "620px", "wideSize": "1000px" 

Lightbox

The Lightbox property Lightbox property permits users to turn on the "Expand upon clicking" feature on photos. The images can be opened in a larger image by clicking.

Keys that belong to the properties of lightbox. lightbox property

• disabled * Allows or disables the lightbox feature.
• permitEditing lets users alter the lightbox settings.

Example:To allow users to change the feature of lightbox to display images You can test this approach:

"blocks""allowEditing"

Position

This feature of place permits users to change the position of blocks when they are placed on an adhesive surface to the left.

Exemple Block stick:

"position": "sticky" is the case.

Shadow

This feature lets users design shadow effects to block elements with a range of ways, using templates that are predefined, or using custom-designed shadows.

Keys within shadow property shadow property

• default Presets defaultPresetsEnables or disables the default presets for shadows.
• presets --Allows users to choose a particular settings for shadows.

Here is an illustration of way the default shadows are disabled. The custom shadow called "Natural" is described by following:

"shadow": "defaultPresets": false, "presets": [ "name": "Natural", "slug": "natural", "shadow": "6px 6px 9px rgba(0, 0, 0, 0.2)" ] 

These numbers show the various procedures that can be executed within the editor with the intention of showing the user interface. It is possible to observe the process to make shadows that are "Natural" shadow.

Spacing

This property outlines the method to manage the spacing (padding gaps or margins) is managed by editors.

Keys located in the region house

• blockGap controls the space between blocks.
• margin * allows users to create margins on blocks.
• padding --Provides the possibility of placing padding inside blocks.
• units unitsDefines the units accessible for spacing (e.g. (px as well as (rem as well).
• CustomSpacingSize ItAllows users to define the size of their spacing as they wish.
• spacingSizes ---Defines the range predefined for spacing sizes.
• spacingScale --Allows the scaling of spacing units.

Example: To limit users to two measurements (pixels and the rem) in order to establish the margins of padding the width and the pixels, as well as widths and heights and also display the space control in the editor for your website to alter the appearance tools beneath the category called appearance tools to the correct setting and set it up in accordance with the following guidelines:

"spacing": "units": ["px", "rem"] 

Typography

This setting regulates the setting of the font used in the theme, such as the font's weight, size and the size and also the font's size and height.

Keys that are part of the typography property:

• defaultFontSizes defaultFontSizesDefines the default font sizes for the user to use.
• CustomFontSize CustomFontSizeEnables or blocks the capability to create custom font sizes.
• fontStyle ItControls the appearance of the font (e.g. italic, normal).
• fontWeight -ItAllows users to pick the amount of weight applied to the typeface (e.g. Light and bold, light and bold or light etc. ).
• fluid ---Enables fluid typography. The font can be adjusted in size dynamically depending on screen size.
• letterSpacing (or )Controls how there's a space between letters.
• lineHeight --Sets the height of every line of text.
• textAlign -- Allows control over text alignment (e.g., left, center, right).
• textDecoration textDecorationProvides alternatives for the decoration of text (e.g. underline).
• writingMode The writingMode function is employed to determine the type of writing that you want to apply for the content that you're composing (e.g. horizontal, vertical or vertical).

Example To disable custom font dimensions in addition to ropCap alternatives, you can try these options:

"typography": "customFontSize" False "dropCap": false

If this happens the two keys will not always appear within the editor.

Alignments that recognize the thickness of the base

If the property is put in the correct state, it ensures that wide width, or even full block alignments that are wide enough, recognize the padding applied to your main element on your page (e.g. or ) and ensures that the alignment is even with padding used.

Example:

"useRootPaddingAwareAlignments": true

If you decide to make it true True, it's important to recognize the root's left, top and right paddings inside the style. (More information regarding the properties of this style follow).

"spacing": "padding": "top": "0", "right": "100px", "bottom": "0", "left": "100px" 

Applying the useRootPaddingAwareAlignements setting along with right and left padding to the body (as in the above code) results in the following.

Styles

The properties of the styles property permit users to apply CSS designs to design's foundation (default) particular elements, as well as blocks that are specific to the theme.

Background design

The background properties can be controlled including positions, pictures and attachments.

Common keys for backing up:

• Background Image -BackgroundImage -Defines the image used to make the background image of the block or element.
• backgroundPosition -isSets the way background images are positioned (e.g. the center, top-right).
• backgroundRepeat BackgroundRepeat is a setting that specifies how frequently the background image will be repeated (e.g. repeat, no-repeat).
• backgroundSize -(-)Controls the dimensions of the background image (e.g. covers, or maybe even contain).
• backgroundAttachment The amountSpecifies how background images remain fixed, or scrolls along with the webpage.

For instance for an example, you can choose a background image for a design.

"background": "backgroundImage": "url": "https://joyofwp.com/wp-content/uploads/2024/09/dots.png" 

Block-specific styles

You are able to apply particular styles such as typography, shadows and borders on the blocks.

Securing the border at all times is a key factor

• color -(-)Defines what is the colour that the border.
• radius -(-)Sets the border-radius for corner rounded edges.
• style CSS style Specifies the style of borders that style CSS styles include (e.g. solid, dots, etc. ).
• dimensions dimensionControls the width of the border.
• Bottom left, top right Right Let's draw distinct boundaries for each of the sides.

The example below provides a 20px solid red border throughout the entire page.

"border": "color": "#ff0000", "width": "20px", "style": "solid" 

In addition, you may apply CSS to a particular block either an element or base. The example below assigns the color red for a block in a table:

"border": "color": "#ff0000", "width": "20px", "style": "solid" 

Color styles

The color property lets users define the background color and gradient in addition to the text's color. The keys to hues:

• background * Determines the background color of the element or block.
• gradient is an outline-based gradient that is used to create the block.
• text will alter the colour of text.

This is an example of setting the background to black and has white text across every page:

"color": "background": "#000000", "text": "#ffffff" 

CSS

CSS property lets you add custom style to the classes. CSS property lets you add distinctive styles to classes. This lets you have greater control over your theme's style.

Example: Apply custom styles to wp-block-template-parts and wp-block-button, and add a hover effect for the button:

"css": ".wp-block-template-part background-color: #777777; padding: 20px; .wp-block-button__link:hover background-color: #ffffff; color: #000000; "

It's clear that the header and footer elements of the template are adorned with the color of the background as well as padding and the hover condition of the button features the black and white font.

Dimensions

Dimensions property permits you to control the dimension property that allows you to control the dimensions and height ratios of the block.

Keys to dimensions:

• aspectRatios -- Defines custom aspect ratios for elements.
• minHeight -- This minimum height must be taken into consideration in the case of blocks.

A sample of how to design an individual aspect ratio of 3:1 for an image block

"blocks": "core/image": "dimensions": "aspectRatio": "custom" 

The above, however, doesn't suffice. It is necessary to add the "custom" style in the section for settings.

"dimensions": "defaultAspectRatios": true, "aspectRatios": [ "name": "Custom Ratio 3:7", "slug": "custom", "ratio": "3/7" ] 

There is an option to choose"Custom Ratio" "Custom Ratio" selection. If you prefer to remove the seven default aspect ratios, remove "defaultAspectRatios":true from the settings section.

Special designs specifically for the component

This property property lets you use specific styling styles for HTML elements such as buttons and links, as well as headings.

This example shows that the below code will remove the text decoration (underlining) on every hyperlink:

"elements": "link": "typography": "textDecoration": "none" 

Filter

Filter property filter property permits you to apply CSS-based filters (e.g. blurring or brightness) to certain blocks such as pictures.

Example: Apply a blur as well as a bright filter on the block of images

"blocks": "core/image": "filter": "duotone": "blur(5px) brightness(0.8)" 

Light and blurring effects can also be found in the block of images. The other filter choices are:

• contrast --Adjusts the contrast of the element.
• grayscale --Converts the element to grayscale.
• reverses the colors that elements display.Inverts the colors that elements display.
• transparency determines its transparency. It controls the transparency of the element.
• Saturate *Increases or decreases the brightness of the color.
• Sepia - Sepia - Applies an unpretentious tone to the component.

Outline

outline property defines styles that are applicable to outline properties. It defines styles for. outline property describes guidelines for the lines drawn across the outside of an element, but and without altering the arrangement.

The main elements:

• Color ColorSets the color of an outline.
• offset offsetControls the space between the border and outline.
• style CSS styleSpecifies the type of outline (e.g. lines or dots).
• big largeSets how wide the edges of HTML0 broadSets are.

Example Use an red dot trace an icon

"elements": "button": "outline": "color": "#ff0000", "style": "dotted", "width": "4px" 

Shadow style

This effect of shadows property allows you to make shadows over objects and boxes that create the illusion of depth as well as the appearance of shimmer on your items.

An Example Shadows are utilized in each photo

"blocks": "core/image": "shadow": "0 10px 20px 0 rgb(0 0 225 / 0.50)" 

Spacing styles

The spacing property is responsible for the margin, padding and block gap varieties that you'll require to choose to create your layout.

Space-related keys:

• blockGap ---Controls the gap between blocks.
• margin • Sets the margins of blocks.
• padding --Controls padding in blocks.

This creates a unique padding both on the right and left sides.

"spacing": "padding": "left": "min(6.5rem, 8vw)", "right": "min(6.5rem, 8vw)" 

Styles of Typography

The property called typography property manages the dimensions, font styles and other features that are related to text.

The keys to some of the well-known Typography types:

• fontFamily -The font family of HTML0.Sets the font family which will be used in the text.
• fontSize isDefines the dimensions of the font.
• fontStyle FontStyle determines the look of the font (e.g. Bold, Italic, or normal).
• fontWeight WeightControls the size (thickness) of the font.
• letter spacing The spacing between lettersAdjusts the spacing between letters.
• lineHeight lineHeightDefines the length of a line (spacing between words).
• TextAlign TextAlign HTML0Sets the text's alignment (e.g. left center and right. ).
• TextColumns textColumns HTML0Controls the number of the text column.
• TextDecoration TextDecoration HTML0Sets the text's decoration (e.g. underline).
• WritingMode WritingModeDefines how you write (e.g. either vertical or horizontal).
• TextTransform TextTransform HTML0Controls the change of text (e.g. uppercase, lowercase).

For instance, it's possible to modify every heading to be accompanied by a font-weight of 300, and an italic-style style

"blocks": "core/heading": "typography": "fontWeight": "300", "fontStyle": "italic" 

Templates' rights in property are secured by templates as well as patterns

The first three properties may be used to register the custom-built elements in the theme.

1. Templates that are designed specifically for design

Template properties can be used to design custom templates. Template property can be utilized to identify templates with custom designs that can be used to show a range of information.

• Give the name of the file .html as well as .php file is located in the subdirectory that contains templates.
• title title Title is the title to be included in the template to allow for ease of recognition.
• postTypes defines the kind of material (e.g. pages, articles, posts) which the template employed to present.

2. Parts to make templates

The TemplateParts property can be used to define templates that may be used again. TemplateParts property can be used to specify elements that could be reused within templates (e.g. headers, headers, footers).

• name is the name that is used for describing the name. Name is the title of .html as well as .php file. It's located in the subdirectory of components.
• title --The title is linked to the template for easier identification.
• Area -Indicates the section of the page that the template component is applicable to (e.g. header, footer, sidebar).

3. Patterns

Patterns are a great way to create patterns. Pattern property allows you to make patterns that have a range of names. They are available through the WordPress Patterns Directory, making patterns available within the theme.

This is how to get the pattern registered

"patterns": [ "my-custom-pattern-slug" ]

Three concrete ways to work on theme.json

Here are a few suggestions that you could use for a theme you are designing.

1. Make A pattern

It is possible to add two patterns to the WordPress Patterns Directory. The patterns that are shown here are those of the "Fullscreen Cover Image Gallery" pattern:

"patterns": [ "fullscreen-cover-image-gallery", "hero-banner-with-overlap-images" ]

Notes:

• The patterns found in the patterns directory will not be available in the website editor's pattern section. The patterns will only be available by inserter. inserter.
• In this instance, it's the case where top-level properties are added to the layout (compared with the design and style and also the style has been removed previously in order to make it easier).

2. Adding a custom font

Two font files were removed ( Roboto-Regular.ttf and Roboto-Bold.ttf) from the Google Fonts library and then added to the theme's fonts, assets and fonts subdirectory.

This code can be used to recognize both fonts, making them all-accessible to the entire site:

"settings": "typography": "fontFamilies": [ "fontFamily": "Roboto", "name": "Roboto", "slug": "roboto", "fontFace": [ "fontFamily": "Roboto Regular", "fontWeight": "400", "fontStyle": "normal", "src": [ "file./assets/fonts/Roboto-Regular.ttf" ] , "fontFamily": "Roboto Bold", "fontWeight": "700", "fontStyle": "bold", "src": [ "file./assets/fonts/Roboto-Bold.ttf" ] ] ] 

3. Setting your color palette

If you wish to restrict your users to a specific color scheme, you may make it so. (Gradients and duotones may be set in accordance with the requirements of your business.)

Example:

"settings": "color": "custom": false, "defaultPalette": false, "palette": [ "slug": "primary", "color": "#1e8cbe", "name": "Primary" , "slug": "secondary", "color": "#21759b", "name": "Secondary" , "slug": "tertiary", "color": "#", "name": "Tertiary" , "slug": "accent", "color": "#464646", "name": "Accent" ] 

Are you familiar with these hues? They're an integral part of WordPress the tale of color.

Summary

Utilizing effective features such as appearanceTools lets you have greater control and efficiency when developing or upgrading WordPress themes. This is why this document a must-have tool for designers who wish to create themes that are simple to work with and flexible.

Bud Kraus

Bud Kraus has been working using WordPress to help teach classes or on the internet as a web developer, content creator since 2009. Bud Kraus has made videos to aid in instruction and created numerous blog posts to help promote WordPress. WordPress business.

This article first appeared on this site

This article first appeared on here

This post was posted on here