WordPress 5.8 introduced a set of features called Full Site Editing (FSE), which basically allow you to change parts of your website from the WordPress Dashboard that used to require some coding skills. Prior to this update, such changes were limited to content, menus or widgets with the options allowed by the theme you were using. However, with FSE you can now move the navigation menu, add social icons, add a header image, use different footers, create your own color palette, save default styles, etc, regardless of what your installed theme allowed (with certain limitations).
The idea of Full Site Editing is that, without coding a single line, you will have complete control over the design of your website. And not only that, you will also have many pre-defined pattern designs to choose from to make web creation even easier.
In this post I roughly explain the main steps to follow to change your website to FSE.
Table of Contents
Previous Steps
Make a Backup of Your Website
This is the only step that may require some technical knowledge. First of all, make sure you have backed up your WordPress. If you follow our advice when choosing a hosting provider, you probably already have this functionality available as a basic feature of your own hosting provider. But if that’s not the case, in this post David explains how to make a backup on your website.
Evaluate What it Means to Switch to Full Site Editing
Depending on the complexity of your current website, and especially the plugins you have installed, switching to FSE can be quite complex. And I’m not referring so much to the volume of content you have created, but how and what you have installed.
Note that when you switch to FSE, on the one hand, you may find that some plugins are no longer needed and you already have the functionality that they offer you in the new block editor. On the other hand, there is still a large set of plugins (though fewer and fewer) that are incompatible with FSE, and switching to FSE means you may have to uninstall them.
The first task you should do is to understand all the functionalities you want your “new” website to have and see which of them can be provided by FSE. Then, for those that are provided by plugins, evaluate if they are compatible with FSE or what alternatives you have.
How do I test if my plugins will work FSE? In all the plugins you can even see with which version they have been tested. If it is equal to or later than 5.8, it will surely work correctly with FSE, but if this is not the case, you have no choice but to try it yourself. To do so:
- Create a local development environment for testing.
- Install (if it doesn’t come by default) and activate a theme that supports Full Site Editing such as Twenty Twenty-Two.
- Install and activate the plugin to test.
- Test the plugin in the block editor: if it uses shortcodes, check that they work, check that the different setting options work and that the results are displayed correctly.
In general, the plugins that may have more problems are those that do not use the new blocks and use widgets, classic menus, templates, and/or use style configurations that are incompatible with FSE.
Copy the Content You Can Lose
When you switch from a classic theme to an FSE theme, the first thing you notice is that you have lost a set of options on your Dashboard that were previously available (namely, Customize, Widgets, Menus, Header and Background).
Block themes use neither menus nor widgets, and the customization is different. When making the change, you may lose some information. Take screenshots of the widgets and copy the widget text into any editor so that you can then add it with theme blocks on the site. The same goes for theme customization. Take screenshots of the appearance settings you have and, if you have added additional CSS to customize the theme, copy that content into any text file so you have it available when you need it.
Nelio A/B Testing
I was very impressed by the quality of this plugin, how easy it was to set up, and the outstanding support Nelio provides. I highly recommend Nelio A/B Testing.
Josette Millar
Install a Full Site Editing Theme
The next step is to install a FSE theme on your website. To do this, when searching for a new theme, you have the tab Feature Filter. To find topics of this type, apply the Full Site Editing filter.
At the time of writing this post (early May 2022), there’s over 70 full site editing themes to choose from.
Once you find a theme you like, install and activate it. Some themes include setup instructions and/or add additional plugins. Let’s take a look at the process I’ve followed after selecting the Twenty Twenty-Two theme.
Familiarize Yourself with the Structure and Design of your New Theme
In FSE, when you click on Editor, the theme editor shows you the available templates and template parts provided by your new theme. The template editor is very similar to the block editor with some minor variations:
- in the left sidebar (it appears if you click on the WordPress icon) you can see the structure of the template or template part you are editing and the option to return to the Dashboard,
- at the top, on the left you have the editor icons, in the middle you can see which template or template part you’re editing, and on the right the global options, and
- in the right sidebar, the global properties or of the different elements that you are editing.
You’ll know you’re editing a template or template part, rather than a page or post, when you see the global styles icon (with a crescent moon) in the top right of the template.
The templates that come with the theme are used to display the different pages that we have on any website, including the template of the home, a page, a post, the search page, or the 404 page (when the content is not found), among others.
You can click on any of the templates to look at and edit its structure. So, for example, if you edit the Page template and click on the List View icon that you find at the top of the editor, you can see the set of blocks it’s made of. Additionally, at the top and in the right sidebar you can also see the areas that include template parts (the header and footer, in this case).
Template parts are used to organize and structure reusable parts of your theme. That is, they are a set of blocks that show certain content in those templates in which you include them. For example, in the Twenty Twenty Two theme, you have the header and footer template parts that are included in all templates except the blank one.
Before, for example, when you wanted to remove a sidebar from certain pages of your theme, you had no choice but to code it. Now, with FSE, you can create and edit templates and template parts using WordPress’ default editor. Just as we have seen with the templates, you can edit any part of the template and click the View List icon in the editor to see its structure.
As you can see in the image above, the theme no longer uses menus in the header, but a navigation block that includes the list of pages included in your site.
Add the Content of the Menus
Let’s suppose, for example, that with your old theme you had a couple of menus defined (a main menu and a footer menu), how do you convert them to FSE?
Don’t worry, the menus you had are not completely gone. You just need to make sure that the parts of the template where the menu is displayed use them. In this case, go to the header, click on the navigation block and select the classic menu that you had previously created.
You will automatically have the menu that you had on your website in the new theme.
Do the same process for all those parts of the template where you need to add the menus you previously created.
Add the Widget Content
In the case of the content of the widgets or any other custom content that does not come in a plugin compatible with FSE, you have no choice but to recreate it directly in the template or part of the template that interests you. For example, the footer of the TT1 theme shows the information to contact you and visit your social networks, organized in three columns:
You no longer need a widget to add social networks. Now you do it through blocks. In the same way, if before you had a widget that showed the latest posts, now you have a Posts List block that you can add as you like in the footer or anywhere else.
Customize Global Styles
Once the content of the menus and widgets is included, all it’s left is customizing the styles of the site globally: font, size, and appearance of texts, colors, and other design aspects. Depending on the theme you have installed, it will include more or less style options.
If you want more custom options than you have with the current version of WordPress, I recommend you install the Gutenberg plugin which includes additional FSE features that will come with future versions.
To Sum Up
With these basic steps, I think you can get an idea of the work involved in changing a website to FSE.
Keep in mind that the full site editing is still in beta and there are still quite a few kinks to be worked out and features to come. But if you have a simple website, you like to experiment, and you want to be up to date, switch to a full site editing theme and familiarize yourself with all the new features it includes.
If, on the other hand, you have a complex website, with a lot of content, and you don’t like risks too much, I recommend you not to rush. Make a backup copy and experiment locally until you get the hang of the template editor and you are sure that the final result and performance are exactly what you wanted.
Featured image by Kenny Eliason on Unsplash.
Leave a Reply