/   Sign up×
Articles /Pin to ProfileBookmark

How to develop a WordPress theme that leverages the new Full Site Editing feature

Install WordPress 5.8 or higher

Full Site Editing is a new feature that was introduced in WordPress 5.8. Therefore, you need to make sure that you are using WordPress 5.8 or higher.

Install the Gutenberg Plugin

Full Site Editing is powered by the Gutenberg block editor. You will need to install the Gutenberg plugin to access the new features.

To install the Gutenberg plugin, go to your WordPress dashboard and navigate to Plugins > Add New. Search for “Gutenberg” and click the “Install Now” button. Once the installation is complete, click the “Activate” button.

Create a new theme or edit an existing one

Now it’s time to create a new theme that leverages the Full Site Editing feature. You can either create a new theme from scratch or modify an existing one.

To edit a theme, open the Appearance menu and click edited on the desired theme. The editor will launch automatically.

Create a block template part

Block templates are reusable components that you can use throughout your theme. To create a block template, open the Template parts in the editor and press the plus button.

Now choose a name and the area, where the template will be used.

Edit the template part

Edit the template part in the editor. You can even use html to edit your template parts.

Use the template part in the theme

Search for the “Template Part” and drop it into the theme. Now you can choose from your template parts. You can even edit your template parts directly from here.

You can also use the text editor, if you prefer it. Press Ctrl+Shift+Alt+M to switch between the editors. Here you find more information regarding coding in WordPress.

Test your theme

You can preview your theme by going to the “Appearance > Themes” section of your WordPress dashboard and activating your theme. This will allow you to see your theme in action on your site before making it live.

Iterate and refine

Full Site Editing is a powerful new feature that allows you to create custom themes with ease. However, it may take some time to get the hang of it and create a theme that looks and functions the way you want.

As you work on your theme, make sure to test it thoroughly and iterate as needed. Use the WordPress Theme Developer Handbook as a reference, and don’t be afraid to experiment with new ideas.

Conclusion

Full Site Editing is an exciting new feature that allows WordPress developers to create custom themes with ease. By following the steps outlined in this tutorial, you can start building your own custom themes that leverage Full Site Editing and take your WordPress development skills to the next level. I hope this gets you started with this feature. Happy developing

CSSFront-endHTMLPHPWordPress
×

Success!

Help @steime spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 3.27,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: sell your code,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @navneet1991,
amount: 1000 SATS,
source: article

tipper: @ringsideikon07,
amount: 100 SATS,
source: article

tipper: @todd,
amount: 1000 SATS,
source: article
)...