How to Preview Your WordPress Website Before Going Live

How to Preview Your WordPress Website Before Going Live

Last Updated on June 17, 2022 by Oluwatuyi

Do you wish to preview your WordPress website before going live?

Previewing your website before publishing it allows you to catch any errors, design issues, missing items, and spelling or grammar mistakes.

In this article, we’ll show you how to preview your website before going live and without hurting the user experience.

Let’s get started.

Create a WordPress Staging Website to Preview Changes

This guide is not applicable to WordPress websites built on Managed WordPress Hosting.

Before you can create a staging version of your website, you need to create the main website. We recommend installing it via the Softaculous tool as it gives you additional tools for website management and simplifies staging website creation.

Apart from other tools, Softaculous provides the most effective way to stage a website. However, this requires your website be installed via Softaculous and that it is located in the original hosting account. If you are unsure whether this is your case, you can check if your website is present in cPanel >> Softaculous Apps Installer >> All Installations section. For testing, we use the nctest.info website:

wp staging site1

You can create a staging website using 2 different plugins. You can use any other plugins as all of them should work in a similar way.

WP Staging

Install the WP Staging plugin as described here. On the left panel click WP Staging >> Sites / Start:

wp staging site2

Click Create New Staging Site:

wp staging site3

Enter your Staging Site Name and click Start Cloning:

wp staging site4

It may take a few minutes for this process to finish. Once ready, make sure to read the notes below and click Open staging site to proceed to the login page. Your credentials are the same as that of the main website

The only disadvantage of this plugin is that you cannot push the changes to the main websites with a free version, so the staging website is just for testing plugins/themes before applying the changes on the main one. The best scenario from using this plugin is to create a new staging environment each time you wish to test changes because testing changes on an old staging website may prove irrelevant.

All-in-One WordPress Migration

Install the All-in-One WP Migration plugin as described here. On the left panel click All-in-One WP Migration >> Export:

wp staging site6

Modify the file you are going to export per your liking using the Advanced options drop-down menu:

wp staging site7

Click Export To >> File:

wp staging site8

Click Download [domain.com] to export the file.
Install a fresh WordPress on a subdomain (e.g., staging.nctest.info) or in a subdirectory (e.g., nctest.info/staging). Log in to the WordPress Dashboard of the staging website, install the All-in-One WP Migration plugin once again and go to the Import tab:

wp staging site9 1

Click Import From >> File and choose the file you’ve previously downloaded.

wp staging site10

Read the warning carefully and click Proceed to continue. If your import is successful, you should see the following message:

wp staging site11

Preview WordPress Posts and Pages Before Publishing

WordPress uses an intuitive block editor that automatically uses your theme’s styling to show a live preview of your posts and pages.

preview

However, it may not give you a clear idea of how a post or page may look on your website with your headers, sidebars, and everything else on the page.

Luckily, the block editor also allows you to preview a post or page without publishing it.

Simply click on the Preview button in the top-right corner.

You can choose between Desktop, Tablet, and Mobile preview options, but these will only show you the preview inside the content editor.

After choosing a device type, you need to click on the ‘Preview in the new tab’ option to view the full preview on your website.

WordPress will then show you a preview of your post or page before going live.

preview 2

Preview a WordPress Theme Before Switching

Normally, if you activate a WordPress theme, then it immediately goes live on your website.

If you are not using a staging website, then your users will see the new theme without any customizations.

Wouldn’t it be nice if you could preview a WordPress theme before activating it on your website?

Luckily, WordPress allows you to preview a theme before activating it.

Simply install the WordPress theme that you want to preview. For more details, see our guide on how to install a WordPress theme.

After installing the theme, you simply need to click on the Live Preview link.

post theme install

Alternately, you can go to Appearance » Themes page and take your mouse over a installed theme.

You’ll see a button to launch the Live Preview.

live preview theme

WordPress will then launch Theme Customizer.

Here you’ll see a live preview of the theme with your current content.

The theme customizer will use your existing content and navigation menu. You can try out different theme settings from the left panel.

You can exit the theme customizer without activating the theme. However, it won’t save any of your customizations.

If you are satisfied with how the theme looks, then you can go ahead and activate it by clicking on the ‘Activate & Publish’ button at the top of the menu.

Preview WordPress Theme Customizations

Want to make changes to your WordPress theme but not sure how they would look on your live site?

WordPress comes with different ways to preview your WordPress theme before applying those changes.

For most WordPress themes, you can preview your changes by using the theme customizer. Simply go to the Appearance » Customize page to launch the theme customizer.

customize

From here you can try different theme options, change menus, customize widgets, add custom CSS, and more.

This allows you to preview theme changes without actually applying them to your website.

Once you are satisfied with the changes you made, you can click on the Publish button to apply those changes. Optionally, you can also click the gear icon to save your changes as a draft, schedule your changes, and share a preview link with clients.

Now, this method may not be available for some newer WordPress themes using the Full Site Editor.

We hope this article helped you learn how to preview your WordPress website before going live. You may also want to see our guide on WordPress SEO Audit Checklist to Boost Your Rankings or see our complete WordPress SEO guide to promote your website.

If you have any issue on this, you can use our comment session or join our delegate on Facebook to solve any issues related to WordPress and subscribe to our YouTube Channel for WordPress video tutorials

Share this Post

Leave a Comment

Your email address will not be published.

Scroll to Top