Find out in this tutorial how to update a classic WordPress theme to have Full Site Editing (FSE) functionalities.
At OsomCode I always like to share tutorials to get the most out of all the new features coming to WordPress.
With the arrival of the block editor (Gutenberg) in WordPress 5.0, I prepared a series of tutorials to update your theme so you could take advantage of all the improvements that came with it. And I also prepared an updated list of the adapted Genesis Framework child themes.
Later, with the arrival of later versions of WordPress, I explained how you can create:
Now that WordPress 5.9 is coming and everything needed to use Full Site Editing (FSE) is included in WordPress core, I’d like to continue in the same vein.
In this tutorial I’m going to explain how you can take advantage of some of these new features in the theme you’re already using.
But first, let’s define a little bit the different types of themes that exist and their characteristics:
- Classic themes: the traditional themes, created with PHP templates. Examples: Twenty Twenty One or Underscores, you can see more in the WordPress repository by removing the FSE filter.
- Hybrid themes: classic themes that use FSE functionalities such as theme.json or template editor. Example: Astra.
- Universal themes: themes that work with the customizer and the site editor. Example: Blockbase (spiritual heir of Underscores)
- Block theme: themes created for the FSE using HTML templates and the theme.json file. Examples: Twenty Twenty Two or Tove, you can see more in the WordPress repository by filtering by FSE.
So the idea of this tutorial is to convert your classic theme into a hybrid one to get more out of it. And at the same time you learn some new features of the FSE. 😉
Here we go.
Options to add FSE features to a classic theme
1. Adding the theme.json file
This will allow you to control the styles of the theme from this file.
The good thing is that by doing so you don’t lose the WordPress customizer, widgets or the WordPress admin menu page.
Just create a file called theme.json and place it in the root of your theme.
You can use this online tool to configure the theme.json file in a visual way.
This is the example created with the tool that you can place inside the file
To see this and another 1097 code snippets of this website, login or subscribe here.
This is what appears in the block editor after adding either of the above two snippets:
While the online theme.json generator can be very handy to save you time, I recommend that you understand what each section deals with.
For example, some of them take care of the function that used to be handled by add_theme_support. Here are some examples:
- typography > fontSizes is the equivalent of
add_theme_support( 'editor-font-sizes', array() ) - typography > lineHeight is the equivalent of
add_theme_support( 'custom-line-height' ) - layout is the equivalent of
add_theme_support( 'align-wide' ) - color > palette is the equivalent of
add_theme_support( 'editor-color-palette', array() ) - color > gradients is the equivalent of
add_theme_support( 'editor-gradient-presets', array() ) - spacing is the equivalent of
add_theme_support( 'custom-spacing' ) - spacing > units is the equivalent of
add_theme_support( 'custom-units', array() );
You can see that the theme.json file is very powerful and can be very useful even in classic themes.
In future tutorials I will explain specific cases with which to take advantage of it.
By the way, you must take into account that adding a theme.json file to the theme activates, by default, the template editor.
If you prefer to disable it you can do it by adding this snippet to the functions.php file:
To see this and another 1097 code snippets of this website, login or subscribe here.
Activate the template editor
But you can also have the reverse situation, where you don’t want to use the theme.json file but you want to have the new template editor accessible.
For that add the following code in the functions.php:
To see this and another 1097 code snippets of this website, login or subscribe here.
When this option is active, using the snippet above or adding the theme.json, you get a new option in the block editor, specifically in the sidebar.
Clicking on “New” will open a modal window inviting you to enter a name:
Once done, it will welcome you to the template editor:
And when you hit “Get started” it will send you to the block editor where you can start customizing the template:
I also intend to create tutorials with specific examples of custom templates.
Conclusions
Do you want to start taking advantage of some of the new features of full site editing (FSE) in your current theme?
Now you know what options you have and how you can apply them.
This more introductory tutorial will be followed by more specific ones. If there is anything in particular you want me to explain just let me know.
Advantages of being a subscriber. 🙂
