facebook_pixel

Learn exactly how to makeBETTER WEBSITES RIDICULOUSLY FAST

Get exclusive tips that'll help you master WordPress, Beaver Builder and lots more.

Create a custom Coming Soon page with Beaver Builder

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!

Master Beaver Builder in 30 days!

Enter your email below to join over 900 people just like you and get 1 mind-blowing Beaver Builder tip each day for the next 30 days.

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.

tfn-coming-soon-page-final

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.

tfn-no-header-or-footer

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.

tfn-coming-soon-slug

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

  1. 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.
  2. 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.
  3. 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.
  4. 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.

Advanced usage

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.

Master Beaver Builder 

Join over 900 people and get 1 mind-blowing Beaver Builder tip each day

x