Customize the content width of a WordPress theme using theme.json

Find out in this tutorial how to customize the content width in a WordPress theme using the theme.json file.

WordPress 5.8 introduced the theme.json file which is one of the key pieces on which block themes or FSE (Full Site Editing) are based.

The good thing is that the theme.json file can be used in classic themes so it’s a good idea to get familiar with it.

That’s why I’m preparing a series of tutorials focused on how it works and how you can customize it to your liking.

In this case, we are going to see how to customize the width of the content of a theme.

Instructions on how to customize the width of the content of a WordPress theme

1A. Create the theme.json file

In case the theme doesn’t have it, you have to create a file called theme.json and place it in the root of your theme.

Once you have done that, add the following code:

These are the properties that you can modify:

• contentSize: the content width, in this example 800 pixels but you can modify it. You can also use any CSS unit (%, rem…).
• wideSize: activate the wide width option and set a value. In this case, 1200 pixels but you can modify it and you can also use any CSS unit.

The CSS output that this example would generate would look something like this:

.theme-container > * {
    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.theme-container > .alignwide {
    max-width: 1200px;
}

.theme-container .alignfull {
    max-width: none;
}

1B. Modify the theme.json file

In case your theme already has a theme.json file you can customize the width of the content on it. To do this look for the "settings" section and change the fragment that comes after "layout": { until its closing (}).

2. Block editor interface

Once you have added these lines, either by adding a new theme.json file or modifying an existing one, you will see a new section appear in the editor:

By default, it will inherit the values you have set in the theme.json file (the toggle enabled), but will allow the user to change them if they wish.

These are the blocks where you will see this new setting.

• Group
• List of contents
• Column
• Entry content

Conclusions

Now you know how to modify the width of the content of any WordPress theme using the theme.json file.

Any questions? Let me know in the comments.

And if you want to give me any suggestion for future tutorials, leave it in the contact form. Advantages of being a subscriber. 😉