Categories: ThemesTutorials

How To Safely Change WordPress Themes On A Live Site

If you’re looking for the proper way to change WordPress themes on a live site (without immediately going live with the new design), this tutorial is for you.

WordPress themes don’t last forever. As your site grows and evolves, there may come a time when you need to change themes.

With that said, changing your WordPress theme on a live site can cause problems if you’re not careful. You don’t want to risk breaking your site’s functionality or losing your traffic or search rankings.

In this guide, you’ll learn exactly how to change your WordPress theme on a live site, as well as how to test your new theme without going live.

What is a WordPress Theme?

A WordPress theme serves as the visual foundation of your website, acting as a customizable template that defines its overall appearance and functionality. Beyond aesthetics, a theme can introduce new features to enhance your site’s capabilities.

Choosing a theme is a significant decision. Themes often include unique design elements, making changing themes later potentially time-consuming as you may need to reconfigure your site to maintain a cohesive look.

However, many WordPress users eventually switch themes to refresh their site’s design or access new features. If you’re considering a change, it’s crucial to select your new theme carefully, ensuring it aligns with your desired functionalities and design preferences.

In summary, a WordPress theme plays a crucial role in shaping both the visual and functional aspects of your site, requiring thoughtful selection and occasional updates to keep your website fresh and engaging.

Things To Consider When Changing WordPress Themes On A Live Site

Changing your WordPress theme is always a risky process.

Every theme is different, so when you make a switch, things will be a little wonky at first.

If you’re lucky, you’ll just have to tweak the design a bit. But more likely, certain parts of your site will break, and you’ll have to fix them. This may include:

  • Breaking your site’s core functionality (contact forms, navigation, etc.)
  • Removing custom code snippets you’ve added (custom functions, analytics tags, etc.)
  • Disabling widgets, shortcodes, and Gutenberg blocks added by your old theme
  • Affecting your site’s SEO and schema data
  • Changing your sidebar configuration

The more functionality your current theme offers, the more difficult it will be to transition to a new one.

What To Do Before You Change Your WordPress Theme

Before you you change WordPress themes on a live site, there are a few steps you should take to smooth out the transition and ensure you don’t lose data.

1. Change WordPress Theme: Back Up Your Site

Backing up your site is always a good practice, but it’s especially important when you’re making significant changes like changing your theme.

I recommend using Jetpack’s backup solution, which makes backing up and restoring your site as easy as clicking a button.

Regardless of what backup method you use, make sure you have a current backup before you begin the process of changing your theme.

2. Copy Your Custom Code Snippets

Many WordPress tutorials will direct you to add a snippet of code to your theme’s functions.php file. This is one of the easiest ways to make simple tweaks to your site’s functionality.

The problem is that those code snippets are tied to your current theme. When you activate a new theme, you lose those customizations.

Before changing your theme, copy any important code snippets that aren’t theme-specific so you can migrate them to your new theme.

3. Change WordPress Theme: Double Check Your Tracking Code

Many themes offer a field where you can add your analytics tracking code directly from the theme options panel.

As convenient as this is, it’s easy to forget to migrate that code when you switch themes. Next time you log into Google Analytics, you may find that you days or weeks of missing data. Not good.

I recommend future-proofing your site by using a plugin for your tracking code, rather than relying on your theme.

Personally, I use GA Google Analytics. It’s a simple, lightweight plugin that does one thing, and does it well.

How To Change Your WordPress Theme On A Live Site: 3 Methods

There are a few viable methods for changing WordPress themes on a live site:

  • Creating a staging site — This is generally the best method, as it allows you to fully test your site’s functionality in a real-world environment and fix any problems that arise before they ever reach your visitors.
  • Using a theme testing plugin — A theme testing plugin allows site administrators to test and customize a new theme on a live site while the public continues to see the old theme.
  • Using the WordPress Live Preview feature — If your website and theme aren’t particularly complex, you may be able to get away with simply using the default Live Preview feature in WordPress. This should be a last resort, though.

The best way to change WordPress themes on a live site is by cloning your site to a staging environment.

A staging site is essentially an exact copy of your live website that you can use to test new changes, plugins, code, and settings in a low-risk environment.

Using a staging site will allow you to customize your new theme and thoroughly test the design and functionality before it ever reaches your users.

Then, when you’re satisfied, you can deploy your new theme, including all of your customizations, to your live site with a single click.

Ideally, you’ll want to do this through your web host, as this will allow you to truly replicate your website’s production environment. I highly recommend using a WordPress host with free one-click staging.

SiteGround, for example, makes it super easy to create staging sites with a single click (see their staging tutorial here).

1. Create A Staging Site

If you use SiteGround or another web host that offers one-click staging, creating a staging site should be pretty straightforward.

With SiteGround, for example, you can do this through cPanel. Just find the “WordPress Tools” section and click the Staging icon:

From here, all you have to do is click “Create Staging Copy” next to the site you want to clone:

Your site’s files and database will be copied to your new staging site, which you can access via a separate URL. On SiteGround, it will be a subdomain like staging1.yourdomain.com.

Your staging site will be an exact copy, and you can edit it just as you would your live site.

2. Install & Activate Your New Theme On Your Staging Site

Once you’ve created a staging site with your web host, you can log into the WordPress dashboard using the same credentials as your live site.

In the SiteGround example above, the admin area for your staging site would be located at staging1.yourdomain.com/wp-admin/.

Once you log in, you can install your new theme by going to Appearance > Themes, just like you normally would.

Take a moment to view the Live Preview, make a note of any obvious problems, and then activate your theme.

3. Customize Your Site & Correct Errors

It’s rare for a WordPress theme to look and behave exactly the way you want right out of the box. So go ahead and start customizing!

Use the theme customizer, configure the theme settings, and make whatever design tweaks you want.

The beauty of a staging site is that you can experiment more liberally—because no one else can see your changes.

You’ll also want to test your site thoroughly for any bugs. In particular, you’ll want to keep an eye out for:

  • Broken functionality
  • Broken/missing widgets, blocks, and shortcodes added by your old theme
  • Unexpected menu/widget configurations

If your previous theme handled your SEO/schema data, I recommend installing a plugin to handle that instead. (Might I also suggest our extensive WordPress SEO tutorial?)

You’ll want to test your staging site in multiple browsers, and multiple devices if possible. It’s particularly important to make sure your new theme is mobile-friendly.

Take your time with this process. Remember, no one can see your new theme until you push it live.

4. Push Your Staging Site Live

Once you’re satisfied with your new theme and you’re confident there are no major issues, it’s time to push your staging site live.

Note: When you push your staging site live, it will completely overwrite your existing site. If you’ve published new content on your live site since creating the staging site, be sure to copy that content to the staging site first.

If you’re using your web host’s staging feature, pushing your site live should be pretty straightforward. In SiteGround, it looks like this:

Just click “Push To Live,” and you’re good to go.

Method #2: Theme Testing Plugin

Even if you’re unable to create a staging site, it’s still a good idea to test your new WordPress theme before going live.

You can do this with the free Theme Switcha plugin.

This plugin allows you to test and customize a new theme on your site, while everyone else continues to see your old theme.

To get started, install and activate the plugin, then go to Settings > Theme Switcha in your WordPress dashboard.

The first thing you’ll want to do is check the box next to “Enable theme switching,” then click the save button.

Once you’ve done this, your available themes will appear at the bottom.

Click the theme you want to test, and it will become the active theme for your account only. Logged-out users will still see your old theme until you activate the new theme at Appearance > Themes.

In the meantime, you can test your site and make adjustments as necessary.

Method #3: Live Preview

If you’re running a relatively simple website or blog, you may be able to get away with testing your new theme with the standard Live Preview feature.

I would strongly advise you to use a staging site if you can—but using the Live Preview is definitely better than nothing.

To preview a new theme in WordPress, go to Appearance > Themes and click “Live Preview” next to the theme you want to test:

Your site will open in the theme customizer with the new theme:

You can customize your appearance, edit widgets, and add menus using the left sidebar. You can also click around to different pages on your site to make sure everything looks and works as expected.

Once you’re satisfied, click “Activate & Publish” to go live with your new theme.

What Are The Important Features To Look For In A WordPress Theme?

When selecting a WordPress theme, choosing the right one is crucial for optimizing your site’s performance. Here are key features to consider:

  1. Browser Compatibility Ensure the theme is compatible across all major browsers to ensure a seamless user experience.
  2. Plugin Support Check if the theme supports essential plugins like Yoast SEO or WooCommerce for added functionality.
  3. Page Builder Integration Themes that integrate well with popular page builders like Elementor or WPBakery allow for easy customization.
  4. Quality Support Channels Look for themes with reliable support channels to assist with any issues or questions you may have.
  5. SEO-Friendly Code Opt for themes coded with SEO best practices to enhance your site’s visibility in search engine results.
  6. Mobile Responsiveness Choose a theme that is mobile-friendly to ensure your site looks great on all devices.

By focusing on these features—browser compatibility, plugin support, page builder integration, strong support, SEO-friendly code, and mobile responsiveness—you can confidently choose a WordPress theme that meets your site’s needs and drives success.

What To Do After You Change Your Theme In WordPress

After changing your theme, there are a few more things you’ll want to do to ensure no problems arise.

1. Test Your Site

If you followed any of the three methods above, you’ve already tested your website behind the scenes. But now that it’s live, it’s a good idea to test it again.

Be sure to test multiple browsers and, if possible, multiple devices.

You’ll also want to test your page speed with a tool like GTmetrix. (Be sure to test not only your homepage, but also some of your internal pages, blog posts, etc.) If your site takes longer than two seconds to load, you’ll want to follow our speed optimization tutorial here.

2. Add Your Code Snippets

Don’t forget about those code snippets you copied from your old theme. Be sure to add them to your new functions.php file, using a child theme so they don’t get overwritten by a future theme update.

3. Keep An Eye On Your Analytics

Changing your WordPress theme is a major event, and for better or worse it can impact your traffic and engagement.

Be sure to monitor your website analytics, particularly your bounce rate, to see how people are responding to your new theme. If people are spending less time on your site, that may be an indication that your theme needs some adjustments to make it more user-friendly.

4. Ask Your Audience For Feedback

If you have a highly engaged audience, they’re the best people to ask for feedback.

Create a poll or survey on your site, or ask your social media followers or email subscribers for feedback on the new design. You can’t test every possible device and scenario yourself, but your audience can help you find issues you may have overlooked.

What is the White Screen of Death (WSoD) in WordPress And How Can You Fix It?

The White Screen of Death (WSoD) in WordPress is a frustrating issue where your screen turns completely blank, offering no error messages or hints about the underlying problem. It’s like hitting a digital brick wall.

This issue often stems from compatibility conflicts within your site, triggered by factors such as a new plugin, theme update, or memory limit exhaustion. Here’s how you can diagnose and resolve the WSoD:

  1. Deactivate All Plugins: Begin by deactivating all plugins to identify the problematic one. Reactivate them individually to pinpoint the culprit.
  2. Switch to a Default Theme: Sometimes, themes can trigger the WSoD. Switching to a default WordPress theme like Twenty Twenty-One helps determine if your theme is causing the issue.
  3. Increase Memory Limit: Your WordPress site might be running low on memory. Enhance the PHP memory limit by adding define(‘WP_MEMORY_LIMIT’, ’64M’); to your wp-config.php file.
  4. Enable Debugging: Turn on WordPress debugging with define(‘WP_DEBUG’, true); in your wp-config.php file. This can uncover errors responsible for the WSoD.
  5. Clear Cache: If using a caching plugin, clear the cache to prevent displaying outdated or broken site versions.

For a comprehensive guide, visit our detailed article on the Torque blog that explains these steps thoroughly. By following these methods, you’ll effectively diagnose and resolve the WSoD, restoring your WordPress site’s functionality.

Final Thoughts: Change WordPress Theme Seamlessly

Changing WordPress themes on a live site is a delicate process, but by taking the right precautions you can upgrade your site’s appearance and functionality without the risk of losing data or traffic.

If you have any questions about changing WordPress themes, please feel free to leave a comment below!

If you’re looking for fast wordpress hosting as well as done-for-you updates such as changing WordPress themes on a live site, check out our hosting packages by clicking the button below: 

Brad Merrill

Brad Merrill is the CEO of Merrill Media and Editor in Chief of GigaPress.

View Comments

  • Hi we have a current wordpress web site that we have had for quite a few yrs wanting to update/refresh design, new pics, text change, designer suggesting to update to wordpress 6 and changing to Be Theme would this affect our current seo rankings, what else should we be careful with in this regard, your input would be much appreciated

Recent Posts

How to Reset WordPress: Step-by-Step Guide for Beginners

Are you looking to reset a WordPress site and start fresh? Reset a WordPress Site…

5 days ago

WordPress vs. Wix: Which Platform Is Right for You?

Ready to build your online presence? Choosing the right platform between Wix vs. WordPress is a crucial first…

5 days ago

How to Change Favicon in WordPress: A Step-by-Step Guide

Changing your favicon in WordPress is a small yet powerful way to improve your website’s…

5 days ago

How to Embed a PDF in WordPress

Have you been searching for the easiest way to share PDF files directly on your…

1 week ago

How to Add Social Media Icons to WordPress Header: A Complete Step-by-Step Guide

Ever notice how professional websites seamlessly display social media icons in their headers? Adding social…

1 week ago

How to Clear Cache on WordPress: A Step-by-Step Guide

WordPress caching is an incredible tool for boosting your website’s performance. It helps deliver faster…

1 week ago