• Skip to primary navigation
  • Skip to main content
OsomCode

OsomCode

Awesome code tutorials for WordPress and Genesis

  • Subscribe
  • My account
    • Edit profile
    • Favorites
    • Update credit card
  • Login

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:

To see this and another 847 code snippets of this website, login or subscribe here.

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:

panel-settings-width-content-WordPress
Panel that allows you to customize the width

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. 😉


FSE JSON theme.json WordPress

To leave read and make questions about this code, you can login or register.

  • About OsomCode
  • FAQ
  • Contact

Legal Notice · Privacy Policy · Cookie Policy · Terms and conditions
Copyright © 2023

Lost your password?