How To Create A Wordpress Template To Display Json Data

Level: Beginner, intermediate, developer

Estimated reading fourth dimension: 7 minutes

In this exercise, you volition practise creating a theme.json file for a WordPress block theme.
You will create presets and add together some basic styling to the theme.
This lesson is suitable for those who desire a quick epitomize of the global styles lesson.

For this full site editing lesson, you will need:

A WordPress installation with some test content and the Gutenberg plugin.
A block theme with at least ane header and ane footer template part.

If y'all created a theme with template parts in the previous exercise, yous tin can continue using information technology for this exercise. Or, y'all tin can download the theme from GitHub hither: Part two of the lesson files. Download the last code for the project created in this lesson.

Updated April 29, 2022.

Creating the theme.json file
- Color palette
- Typography
  - Font families
  - Font sizes
  - Line pinnacle
- Padding & Margin
- Layout
Styling the website
Assign content to the template part areas
Preview

With the aid of the theme.json file, we are going to turn this:

A webpage with a white background displaying a blog post. The text is black and the links are purple.

into this:

The front of the website with styles applied, after creating theme.json. The background is dark grey, and the text is white with turquoise links.

Creating the theme.json file

Open up your theme files in your lawmaking editor. In the root theme folder, If yous haven't already done and then in the previous lessons, create a file called theme.json. The file volition have 3 sections: settings, styles, and templateParts.

I recommend that you add one section at a time because ane unmarried fault in the file tin cause all other settings to break.

First, you will add the default settings. Default settings apply to all blocks, but you lot can override them per block.

Start with the opening and closing brackets:

Inside these brackets, add the schema, version number (2) and the settings section:

Color palette

Next, add the first colors to the colour palette. Remember to encase the colors with brackets and separate them with a comma. At that place should not exist a trailing comma after the terminal color.

This setting is the equivalent of the editor-colour-palette theme support.
The slug will be used in the generated CSS class, and the proper name is the visible name in the editor:

Add a few more colors that you can employ in the blueprint of the theme:

After the palette, within colors, add a gradient using the custom color presets you merely created.

The presets for quinary -low-cal cyan and secondary -off white, are converted into these CSS custom backdrop:

Use the CSS custom properties to define the gradients:

This setting is the equivalent of the editor-gradient-presets theme back up.

Typography

The typography sub-section in theme.json covers font families, sizes, and line height.

Add typography later color (the code is truncated):

Font families

I am adding iii sets of font families with this lawmaking case: organisation fonts, sans-serif, and serif.
The Name property is the visible name in the editor. If the proper name is not included, the fontFamily value will be visible instead.

Font sizes

This setting is the equivalent of the editor-font-sizes theme support.

The slug is used in the generated CSS class name.
The size property can be any CSS that is valid for font sizes, using for case em, rem or px units.
The name property is the visible name in the editor.

Adjust the font sizes that you would like to utilise in your theme. Basic example:

Line pinnacle

The global styles equivalent of add_theme_support( 'custom-line-superlative' );.
You can enable custom line heights by adding:

– Information technology is not possible to add a pick of line heights to choose from.

Padding & Margin

Inside settings, enable support for custom padding and margin. The units are optional, y'all can include them all or just select a few.

Layout

The layout is 1 of the near important settings in the global styles. In this setting, developers ascertain the default width of the blocks and the width for wide blocks.

View the consummate lawmaking for the settings department

Styling the website

At present that you have created some theme.json presets, you tin can use them to add styles to the website. At the top level, below settings, add the styles section.

The presets are defined in the settings, just the lawmaking in the case is truncated:

Set the body background color to a pleasant night grey using the preset
--wp--preset--color--master.
Gear up the text color to offwhite:

To change the body link colour, you demand to utilise elements.
Below color, add together elements and then select which chemical element to target, in this case, link:

Yous can add both typography settings and colors inside elements.link, but I am going to testify an example of how to add together a text color:

For the fonts, I am selecting a default font size of 20px or ane.25 rem, which has the preset slug of "medium", and the system fonts:

And the resulting CSS output is:

Assign content to the template function areas

Finally, add a new department called templateParts at the lesser of theme.json.
The theme that nosotros created in the previous lesson has two template parts: header and footer.
Assign the header.html template part file to the header expanse and footer.html to the footer expanse: