What you'll learn
In this tutorial we'll show you how to create a custom Coming Soon page that you can edit with Beaver Builder. It'll only take 5 minutes to get it set up and ready to show your customers.
Here we go!
Get instant access to a list of over 1000 winning products
With ready-to-go videos you can use in your facebook ads + more!
Step 1 - Create the Coming Soon page
Login to your WordPress Dashboard and navigate to Pages > Add New and create a new page for the Coming Soon page.
In this demonstration we have named the page Coming Soon and designed it as per below.
TIP: It's always good to have a call to action on your Coming Soon page - a subscribe form to your mailing list, or even just your phone number. Anything BUT just the words COMING SOON.
For most clients, we recommend they offer something. For example, in the above we are offering a FREE one hour consultation. Trust us when we say no-one is going to go out of their way to call you or sign up for your service on your coming soon page if you haven't exposed them to their service prior. But something for free? Sure, take my email!
For web agency owners - advising your clients of something like this really doing impact their opinion on your service and by telling them something like this, you're showcasing your professionalism and reminding them why they're investing with you.
Also, worth mentioning is that using the Beaver Builder theme we can easily disable the Header and Footer on each page by editing this Coming Soon page in the admin area, and on the right in the Page Attributes box, selecting the No Header/Footer template as per below. You may need to remove the header and footer differently depending on what theme you're using.
Step 2 - Take note of the slug for this new page
For example, the page we have created has the slug coming-soon, as shown below. The slug is anything after your main URL.
Step 3 - Add this simple function to your functions.php file in your theme
Go to your FTP client and then navigate to wp-content/themes/YOURTHEMENAME/functions.php
For example, in this demo we are using our theme named FemiBlogger (which you purchase here) so we navigate to wp-content/themes/femiblogger/functions.php
Once you open up your functions.php file to edit it, paste the below code at the end of the file (or somewhere else in the file if you'd prefer). If the slug of your custom Coming Soon page is different to mine, replace coming-soon below with your own slug.
The above function explained
- The template_redirect action hook that we are using above only triggers on front-end pages, meaning that it won't trigger when you access your WordPress admin pages. This is why we use this action hook and it also allows us to not have to check whether the user is accessing a WordPress admin page.
- The !is_user_logged_in() function checks to ensure the user is NOT currently logged into the site, as we want people who log into the site to be able to see the website. This is particularly important for you as you want to still be able to edit your website while other's only see the coming soon page.
- The !is_page( 'coming-soon' ) makes sure that the current page the user to your website is trying to view is not the custom Coming Soon page itself. If we did not have this code, the redirect would go on forever.
- The exit(); is VERY IMPORTANT and you must ensure you add this. It basically prevents an endless redirect.
And that's all there is. It's actually that easy!
How to disable the Coming Soon page
To disable the coming soon page, you just need to deactivate the function by going back and editing your functions.php file and adding a // before the add_action declaration, like below.
Sometimes you might need to allow access to a couple of pages with the Coming Soon page. For example, in our demonstration here, we might want to redirect people to a separate Thank you for entering page after they fill out the subscribe form so that we can track the conversion rate.
To allow access to another page other than your Coming Soon page, update the function as per below with || !is_page( 'thank-you-for-entering' ). The || means OR, so we are saying if it is NOT the coming-soon page OR the thank-you-for-entering page.
Again, thank-you-for-entering is the slug of our new page that we want to allow people to see as well as the coming soon page itself.
What you can do
If you have any questions, please leave them below and we'll answer them.