Welcome to how to switch from a classicto a block theme. Before we begin, let's
start with the basics. What is a blocktheme? This is a type of WordPress theme
built using blocks. You can edit allparts of a block theme in the site
editor, which is a big change from theway classic themes worked in the
customizer, where you could only useblocks on posts and pages. If you're not
sure which one you have, please see thelearn.wordpress.org tutorial on what
kind of WordPress theme do I have. Bythe end of this tutorial, you will be
able to list the recommended steps totake to switch from a classic to block
theme, predict what changes may occur onyour website before switching, change
your theme from a classic to a blocktheme, and locate and utilize additional
learning resources to set up your blocktheme. Why are some people choosing to
switch to block themes? Well, thereasons can be as simple as curiosity.
Some of the more common ones are thatblock themes allow you to edit all parts
of your website with no coding required.You would not need to know any CSS or
PHP for example, to change where yourlogo appeared on your website. You can
point, click and then move--no coderequired. Secondly, switching to a block
theme provides website owners with thelatest and greatest features to
WordPress with every new release. Forexample, with the 6.2 release, I can now
make a sticky header with a few clicksof a button. A classic theme would have
needed code to accomplish the same task.Finally, block themes enhance loading
performance, which keeps your websiterunning quickly. Whether you are using a
classic or a block theme when you switchfrom one WordPress theme to another,
certain aspects of your website will beaffected, while others will remain
unchanged. What should you expect whenyou switch from a classic theme to a
block theme? I'm going to switch from aclassic theme to a block theme on my
sample food blog to illustrate some ofthese changes. Here is what it looked
like before when I was using a classictheme. Now I'll switch. I'll use the
2022 theme which is a block theme. Thefirst thing to expect is layout and
design changing the most noticeablechange will be the visual appearance of
your website. Each theme comes with aunique layout color scheme typography
and design element that will replace theprevious theme's look and feel will also
notice that CSS modifications and themeexclusive features disappear. Any custom
CSS you've applied to the previous themewill go away. In my block theme, notice
that my color choice and underline isgone. Additionally, some WordPress
themes come with exclusive features likecustom page templates, shortcodes, or
widgets. Switching to a new theme maylose these features affecting the way
content is displayed on your site.However, you will no longer need code
for most of what you'd like to do in anew block theme. You will move from
using the customizer to the site editor.Your new block theme will have a
completely different set of editingoptions. Expect to configure the new
theme according to your preferences.When you switch to a block theme, far
more control is given to you the user tomake changes to these same elements.
Now what can you expect to stay thesame? First your content stays: your
posts pages, media files and commentswill be unaffected. However, due to
design differences, the way they aredisplayed might change. For example, in
this classic theme, the featured imageserves as a header with the title inside
it and a sidebar is included by default.When I switch to a block theme, this
featured image from the post will remainbut where it the title and the recipe
appear on this theme will be different.With a block theme, I will have much
more control over how these featuresappear. I can do things like move my
title so it appears under the featuredimage at a post date and board. Let's
look at what this looks like on thefront end. Next, your user data will
remain the same your users their rolesand their profiles and what they can do
will remain unchanged. Next, let's talkabout menus, plugins and widgets. You
may need to create new menus but theexisting pages and posts which you used
before can still be linked to ask forplugins your installed plugins will stay
and remain active but not all pluginswork with blocked themes. So you
definitely want to check this and testit. Plugins that don't work well in
block themes usually are any plugin thatrelies on a widget and doesn't have a
shortcode equivalent. Also, some pluginsthat work more behind the scenes such as
SEO plugins may be an effect 10 formerwidgets needed to WordPress or that
utilize a shortcode that you had on yourformer website still exist, but you may
need to import them and style them in ablock theme to an area that you'd like.
Please see the tutorial importingwidgets for more information. Overall,
switching WordPress themes primarilyaffects the visual appearance and layout
of your website. The core content staysintact, but you may need to take some
time to reconfigure different elementsand you'll want to double check your
plugins to ensure that they continue tofunction within your WordPress website.
Now that you know what to expect, how isit recommended that you get started
switching. Before switching from aclassic to a block WordPress theme, it's
crucial to follow these steps to ensurea smooth transition. Step one, back up
your website. Create a complete backupof your WordPress website including your
database, media files and theme files.You can use plugins like WP Vivid
Backups, Duplicator, All-In-OneWordPress or another backup plugin to
accomplish this. You will be migratingyour website next, so do keep that in
mind as you backup your site. Next,migrate your website to a staging
environment. When switching from a blocktheme, it is strongly recommended that
you test your new theme and a local orstaging environment. Not all plugins
work well with block themes, and it cansometimes take some time to set up your
website exactly the way you'd like usingpowerful block themes. This will allow
you to identify any issues makenecessary changes and configure your new
block theme without affecting your livewebsite. Do note that it can take some
time to migrate a theme from a liveserver to a test environment so allow
ample time to do this. If you choose notto migrate to a test environment,
consider installing and utilizing amaintenance mode plugin so that visitors
to your site are not confused by thechanges you will soon make to your live
website. In my example, I've set up asecond website at a new host because I
use a few plugins that require aninternet connection to work that I would
like to test. Now I'm ready to switch toa block theme. My current host doesn't
provide the option to sort themes byblock themes. So I've gone to
wordpress.org selected themes and thenblocked themes. From here I will choose
a block theme and then upload andinstall it. When you're looking for
block themes, you might notice that theterm Full Site Editing or FSE, for short
is used. When block themes were firstrolled out with the WordPress 5.9
release. Full Site Editing or FSE wasthe term that we used. However, the
community moved to use the phrase siteediting instead, which is replaced the
FSC term. If a theme features Full SiteEditing, it also means it's a block
theme identical to site editing. So tokeep that in mind, I try out a few
before settling on my favorite. Most ofthe time, you'll notice that your
customizer has been replaced by thebutton editor once you've installed and
activated a blockchain of your choice.Do note that some plugins like I have
installed still utilize the customizer,so both buttons may still exist. For
example, I have the SEO plugin Yoastinstalled, which allows me to control
some of its features through thecustomizer. Since these do not impact
the front end of my website, this pluginstill works. Before you get started
working in your editor, it's a good ideato check existing plugin compatibility.
And sure the new block theme iscompatible with your site's existing
plugins as well as the latest version ofWordPress. Research and resolve any
potential conflicts before making theswitch on your live website. You can see
a list of plugins that are likely towork well with your new block theme by
going to wordpress.org, selectingplugins and searching for ones that work
with blocks.
New Plugins compatible with block themesare added and updated all the time. So
if you're not sure you can also head toyour plugins support forum to ask for
help for the best way forward.
Once you've tested out pages, posts andother content affected by plugins, it's
time to stylize your website had toeditor then click into your site editor.
Then get styling by clicking on thestyles icon. In this section, you can
fully stylize the look and feel of yourwebsite without using any code. This is
a very powerful dashboard and there's alot you can do. Edit your typography,
choose your colors, maybe add some extraspaces or you even have the option to
style individual blocks, all withoutusing any code. For a more in depth look
at how to use the section, please seethe tutorial style your site with global
styles. Were the tutorial how to use theWordPress style book with your block
theme. Once you've styled your site'scolors, fonts and blocks, it's time to
start editing templates. I like to startby working on my homepage. In this case,
I will edit this themes existing queryloops to show different content.
If you're new to block themes, take sometime to explore learn that wordpress dot
orgs library of resources especiallyones about templates, learn about
templates, the site editor or even howto stylize a front page using a block
fee. At this point, I've taken the timeto stylize my templates and template
parts, I've stylized some templates anduse others the theme provides right out
of the box. The choice is yours to styleas much or as little as you'd care for.
Once you've completed these steps, andare confident that your new theme is
ready, you can proceed with the processof switching to your live site. You can
do this by switching your domain topoint to your new hosts. Use your
migration or backup plugin to migrateyour entire website from your staging
environment to your live website, orwork on your live website step by step
the same way that you did in yourstaging website. After switching, be
sure to retest your entire sitethoroughly to ensure everything is
functioning as expected. Now you shouldhave total control over how your website
looks and feels with your new blocktheme. If you're new to block themes,
please visit learn.wordpress.org. Tofind additional helpful resources,
search for relevant video tutorials ortake our site editing courses such as
simple site design. You can find thesecourses under the Courses section under
the heading using the site editor. Happydesigning