WordPress is the largest content management system for creating websites. Though it claims to use WYSIWYG (What You See Is What You Get) editor interface, it is not the reality. The old Classic Editor was nowhere comparable to WYSIWYG editors and the new Gutenberg block based editor is kind of mix between visual and technical. With this setup, you have to always preview the posts and pages to avoid layout issues. In this article, we will explain how to preview WordPress site before publishing the content.
Why You Should Preview Content Before Publishing?
There are different scenarios of previewing depending upon the situation.
1. Previewing Posts or Pages
Previewing individual post, page or custom post is required for one or many of the following reasons.
- Many features will not appear in the post editor and you can only view them by previewing or after publishing. For example, any CSS codes you have added under “Appearance > Customize > Additional CSS” section will work only on the preview or live content.
- Similarly, if you add custom CSS class in the editor’s document sidebar for any element, it will be effective only when you view the content.
- Content in sidebar and footer can only be seen in the complete page and not in the editor screen.
- There could be layout issues due to incompatibility with your theme. For example, many themes will not work properly with fullwidth and wide width options for images. You need to check the preview to avoid the images overlapping on the sidebar content.
- Codes inserted in the header, footer or body section using a plugin will not work inside the editor. for example, you might have a header code for advertisement or social icons which will only work in the preview or live content.
- Your caching plugin may not show the modified content properly. In this case, you have to preview and purge the cache if there are any issues.
- Almost every WordPress site uses shortcode either through plugins or from the theme setup. None of these shortcodes will work inside the Gutenberg or Classic editors.
Being said all these things, it will be a fool’s work to rely on the content what you see inside the editor and publish it without previewing.
2. Preview Posts By Others
All the above reasons are valid for viewing individual post or page in your site. However, these are the situations for site owner or the person who is publishing the content. But there is another scenario where you or your editor wanted to share the post before publishing. For example, you may need to share the content to your client for getting approval before it is going live. This is also possible in WordPress to send post link to anyone for reviewing or previewing purpose.
3. Previewing for Theme Change
There is one more additional reason for previewing the entire site or random pages. WordPress has thousands of free and premium themes and you can’t activate each theme for testing the site’s layout. The solution is to test the live preview of any theme available in WordPress repository or installed on your site without activating. This will help to identify layout issues and understand the appearance without affecting live users.
How to Preview WordPress Site Before Publishing?
Let us explain all possible explains covering all the above scenarios.
Preview Individual Post or Page
Good part is that you can preview the post or page content in WordPress without additional plugin.
- When you are in Gutenberg block editor, click on the “Preview” link showing besides the “Publish” or “Update” button. You will see “Publish” button when creating a new post and see “Update” button when editing an already published post.
- You will see a dropdown showing multiple options to preview in – Desktop, Tablet or Mobile.
- By default, the preview in the editor will show as “Desktop” mode and you can select Tablet or Mobile view to instantly change the view in the editor. You can use this as only a preliminarily preview to check the text / image content as other codes and layout will not be effective inside the editor.
- In order to view complete preview, select the device mode and click on the “Preview in new tab” option. This will open the post in a new browser tab and apply all codes, shortcodes and layout changes that you have applied elsewhere on the templates.
Remember, the preview includes all effects like CSS, scripts, shortcodes and apply the global layout with sidebar, footer, etc. You can notice multiple problems in the above live preview screenshot that you can’t find within the editor. The [google-translator] shortcode and the first sidebar widget are not working. You can troubleshoot the problems and fix them before hitting the “Publish” or “Update” button.
If you are still using Classic Editor for posts and pages or using Custom Post type with Classic Editor interface, first click on “Save Draft” button. Now, you will see a permalink below the post title and click on it.
This will open the live post preview in a new browser tab. You can leave the preview tab open and continue updating the page’s content. Whenever you click on the permalink again, it will update the already opened preview tab.
Allow Previewing by Sharing Link to Anyone
When you see the preview URL in the browser’s address bar, it has the preview_id, preview_nonce and preview=true. WordPress has a mechanism to pull the preview based on the status of the post as explained in this StackExchange article. There are plugins available to create an expiring nonce with a custom post URL that you can share with anyone.
- Go to “Plugins > Add New” section and search for “preview” in the search box.
- This will filter many plugins, find the Public Post Preview plugin and install/activate it on your site.
- Create a new post and save it as a draft to see an additional “Enable public preview” option appears in the sidebar. Remember, this option will appear only after AutoSave runs or your click “Save draft” link which is available left side of “Preview” link.
- Check the “Enable public preview” box to see the preview URL appears.
- Click on the “Copy the preview URL” button showing next to the URL to copy the link to your clipboard. Now, you can share this URL with anyone whom you want to see the preview of your post. When you want to restrict the access, simply go to your post and disable the “Enable public preview” checkbox. Or publishing the post will also make the public preview URL invalid as you have already published the post.
- After restricting the access or publishing the post, anyone viewing the preview URL will get a WordPress error saying, “No public preview available!”.
WordPress SEO: Optimize WordPress site with free WordPress SEO guide.
Previewing Entire Site with Different Theme
This is a default WordPress feature and you do not need any additional plugin for this. It is also the most useful option when you want to preview couple of themes without activating them on your live site. However, you need to install the theme in order to use the theme preview function. You can use theme preview in two ways from your WordPress admin panel.
Follow the instructions, if you want to install/preview a theme from WordPress.org repository or preview an already installed theme on your site.
- When you are in WordPress admin panel, go to “Appearance > Customize” section to open customizer.
- It will show the live preview of your site’s home page with your current theme. In the below example, you can see the customizer is showing live preview with the Astra theme and click on the “Change” button.
- You will see the screen like below showing all installed themes on your site along with an option to switch to WordPress.org themes.
- For already installed themes, click on the “Live Preview” button to go to the preview screen.
- If you want to test any WordPress.org theme, click on that option from the sidebar to view the themes. You can use the search box to filter your theme and click on “Install & Preview” button.
- For example, we will change the theme to GeneratePress and preview it like below without activating. You can also toggle the device display to desktop, tablet or mobile by clicking on the icons showing sidebar’s bottom section.
- The big advantage with this method is that you can click on any internal link on the preview page and view that page’s preview with the new theme.
- After previewing, you can close the customizer or change back to your original theme. Alternatively, click on “Activate & Publish” button to apply the new theme on your site and make it live.
Next option is to preview the themes only installed on your site by going to “Appearance > Themes” section. Hover over your mouse and click on the “Live Preview” button showing on the theme that you want to preview. This will take you to the customizer screen where you can preview any links as explained in the above method.
Many users do not aware the various preview options available in WordPress. We hope this article helped you to preview WordPress site before publishing with a new theme or only preview and share single post URL.