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
Contents
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:
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:
Click Create New Staging Site:
Enter your Staging Site Name and click Start Cloning:
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:
Modify the file you are going to export per your liking using the Advanced options drop-down menu:
Click Export To >> File:
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:
Click Import From >> File and choose the file you’ve previously downloaded.
Read the warning carefully and click Proceed to continue. If your import is successful, you should see the following message:
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.
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 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.
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.
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.
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