How to Change a WordPress Theme: Step by Step Tutorial

She Knows SEO contains affiliate links and is a member of the Amazon Services LLC Associates Program. If you make a purchase using one of these Amazon links, we may receive compensation at no extra cost to you. See our Disclosure Policy for more information.

Table of Contents

Blog themes are one of the most common culprits for slow site speed.

Many of us start a blog with a fancy theme that’s got custom fonts, animations, and forty plugins to function. Just like the high school mean girl, it may look pretty on the surface, but it is ugly on the inside.

Pretty themes are a common cause of poor site speed and lack of accessibility to users.

When you’re ready to change themes, it can feel daunting. My first theme change nearly sent me into a panic attack.

But once you do it once, it’s incredibly easy. …and you likely won’t need to do it again if you pick the right theme!

I recommend Kadence or GeneratePress.

In this tutorial, I’m going to show you how to switch your theme to a block editor in just a few easy steps.

Watch the Tutorial

Step 1: Backup Your Website

Always remember to backup your website before you make any changes. You don’t want to lose anything if something goes wrong.

I recommend the UpdraftPlus plugin (free).

Download the plugin, and create a backup to a Google Drive or Dropbox – we don’t want to host backups on our website as they will slow down our site.

This backup will be your insurance policy if anything glitches, if you change your mind about the theme, or if you run out of time to install the new theme.

If your theme change takes a while and you’re uploading new posts in the meantime, remember to take a new backup before you migrate your site to live (I’ll explain that in a later step, don’t worry).

If you use an old backup, any work you’ve done in between will be lost – including new posts.

Step 2: Create a Staging Area

The safest way to change a theme is with a staging area. Most hosts offer one for free in the CPanel.

I have an easy tutorial to create a staging area in 3 steps here.

You will make the staging site so that “staging.yourdomain.com” becomes the site we’re working on.

This means that we can make changes without affecting your users’ experience on your real website – and keeps you from needing an “under construction” notice.

It’ll also help prevent significant Google ranking issues that can come from Google encountering a half built site when you’re mid-theme change.

If your host doesn’t offer a staging site for free, you can always use a staging site plugin. Most are free to install, but cost about $90 to migrate the site live afterwards.

Duplicator, Updraft Clone (this is the only one of these three I’ve used), and WP Staging are popular options.

Create the staging site as a clone of the existing site so that it has all the data of the existing site. You would only create a “default WordPress” site if you want to start from scratch with no content.

Step 3: Install New Theme

Once you have your staging site set up, you’re ready to adjust the theme.

Go to the sidebar of your WordPress dashboard. Select Appearance -> Themes:

Screenshot of the Dashboard in WordPress zoomed in on "Appearance" and beside it in the pop out menu it says "Themes".

Click the “Add New” button at the top of the page:

Screenshot of the "Themes" and "Add New Theme" button in the WordPress Dashboard.

You can either “Upload Theme” or select from one of the ones in the WordPress theme library:

Screenshot of the "Add Themes" and "Upload Theme" button in the WordPress Dashboard.

Screenshot of the WordPress Themes Library showing the options for 6316 themes sorted by Popular, Latest, Block Themes, and Favorites. The theme "Kadence" is highlighted in the preview window showing as "activated".

I recommend Kadence or GeneratePress, both of which are in the WordPress theme library if you search or scroll.

Hover over your theme of choice and select “Install Theme”.

This will move it to the top with your installed themes. You’ll need to hover over it again to “Activate” it:

Screenshot of an installed theme in the WordPress Dashboard with a green banner along the top saying "Installed". The bottom of the image has the name of the theme, "Twenty Twenty-Four" and the "Activate" button in blue.

Required Plugins

If the theme requires any special plugins, alerts will appear at the top of the screen telling you what you need to install.

For example, GeneratePress required GeneratePress Blocks and Kadence requires Kadence Blocks.

Go to the Plugins area for these, or click the link in the alert at the top of the page.

You will need to install and activate these plugins for the theme to function properly.

Delete Your Old Theme

You can immediately delete the old theme, unless you’re installing a “Child Theme” – this requires the old theme to run. It’ll be in the instructions to install the theme you purchased, if you need to do this.

It is best to only have one active theme and one inactive theme on a site at a time.

Step 4: Adjust Your New Theme

Now that your theme is active and has the plugins it needs to run, it’s time to customize your site.

Click on Appearance -> Customize.

This will take you to the theme editor where you can adjust colours and fonts, menus, layouts, and more.

One of the reasons we keep our main site as is, is so we can refer to it. If the new theme removes your colour palette, open your main site in another window or tab and copy over the hex codes.

Here are some things to check that often get overlooked:

Tracking codes (i.e. Google Analytics if installed in Header)
Custom CSS
Site colours
Link colours and style
Text size
Text spacing and line height
Font
Check plugins compatibility, remove any redundant plugins (use WP Optimize to delete tables)
Sidebar appearance
Posts and pages layouts
Archive layouts
Image sizes (you may need to recompress the images for the new theme sizes)
Menu usability and appearance
Pop ups
Post content format and readability

Most block editors can convert to other block editor relatively seamlessly. You may need to “attempt block recovery” on some blocks.

But other themes, like Elementor, Divi, or Pipdig, which are short code editors, will need you to manually copy and paste content over.

When you switch themes, you’ll notice that posts now just have shortcode that look like [text] in them. This is what you’ll need to replace with the actual content.

Here are the steps to change Elementor and similar themes to a Block Editor:

Open staging site and main site in 2 separate windows.
In staging site, open up Post A in the editor.
In main site, open Post A in the user view.
Copy the text from Post A on the main site and paste into Post A on the staging site. When you paste text into a block editor, it automatically converts to a blocks.
Add images using image blocks and searching the site’s media library for the images.
Use relevant blocks for any other decorative elements, such as spacers or lists.

You will need to repeat this for all of the posts and pages on the site. It takes a bit of time, but it’s not hard work.

The sooner you switch themes, the better. Otherwise you’ll have more posts you need to do this to.

Step 5: Migrate Staging to Live

Once you have finished adjusting the site to your liking, you are ready to migrate the site to live.

This means that you will be taking the staging site and making it the main site.

To do this, you can either go to the CPanel and “clone into live”. This will automatically override your main site with the data from the staging site.

Screenshot of the CPanel Staging area in WordPress where you can push a site to live - aka. turn the staging site into your main site so your edits are visible to your audience.

Remember to backup the main site, as all of the data will vanish otherwise and be replaced with everything on the staging site.

If you used a plugin, there will be a button somewhere in the plugin that tells you how to migrate or clone the staging site to live. (They always use the term “live”.)

This may take a few minutes to finish, so I recommend doing it during a non-peak hour for your site. If you’re going viral in that exact minute, best to wait another hour or two.

It won’t break anything for your users long term, but if they happen to come on the site the moment it’s migrated, a few people make have the reload the site for it to work.

Step 6: Final Checks

You’re not quite done yet!

Now that your site is live, you need to double check it.

I’ve made loads of mini mistakes at this stage and left them for weeks before realizing my errors.

Here are somethings to check:

Menu links are to the main site, not the staging site (same with any new links you added)
Posts and pages look as intended
Tracking codes and analytics are installed properly and running (even if running via a plugin)
Colours are as intended
No plugin conflicts or extraneous plugins left
Recent posts were migrated
Images look ok
Test mobile view on your phone
Check accessibility

I recommend using WebPageTest.org to check the site speed, and BacklinkChecker.com to check for any broken links. The broken link checker works best once you’ve deleted the staging site so that any staging.domain.com URLs show up as “broken”.

Step 7: Alert the Media!

Well, alert your social media and your email list.

Tell your audience about your new theme.

The best way to find bugs in a theme migration is by telling your audience to check it out. Any issue will be spotted really quickly for you to fix – it’s totally normal that one or two get missed. Usually they’re small things you may not have had time to catch.

Invite your audience to check out the theme and give feedback on it. Take this feedback on board for ways to improve the site for your user to enjoy it more.

Conclusion

New theme, new you!

Changing themes can feel a lot like getting a Princess Diaries-level makeover.

It’s a lot of work, but the results are undeniable.

Remember to treat yourself for the hard task. Because it is one of the most frustrating and time consuming tasks for new bloggers to do.

It’s worth it.

I changed my theme from Genesis Framework to Kadence and cut seconds off my load time. It increased my ad revenue almost immediately! Because a faster loading site, meant my ads were getting shown faster to my audience.

While you’re changing your theme, be sure to audit your plugins and remove these plugins ASAP.

If you’d like to get more help setting up your WordPress theme, I recommend joining my Profitable Part-Time Blogger program . It features a module on building a custom Kadence theme that’s brandable and easy to use.