Adding a Coming Soon Page in WordPress

Before we launch a new WordPress project, often there comes a point where we need some form of a coming soon page. Usually when the domain is booked and ready, but the theme development is still in progress and the content is not finished yet.

Typically, clients want to start using their new email-address(es) right away, which means their clients can see the new domain and potentially visit it. So it’s nice to have some form of a landing page up instead of a blank page or even an error message.

Of course, there are plenty of Maintenance Mode plugins, from super simple to more complex ones that let you edit content and add special features like countdowns and what not.

But none of those really matched our workflow. So until today I was often just slapping together an HTML-page with the styles and everything inlined, and then copied this file to the root of the domain manually and removed it when the theme was ready. While this “worked”, it always felt wrong and kinda hacky. This week I had a little bit of time and thought I’ll see what I can come up with.

To fit our workflow perfectly, it would need to cover the following things:

  1. I’d like to edit this coming soon page from a template file
  2. No editing of content from the backend needed
  3. I want it to be version controlled
  4. I want it to be easily deployable

We usually have a git repository in place per theme (or plugin) we build, and we use grunt with rsync to deploy changes to the production site. Therefore it felt naturally to put this right into our theme, where we get the deployment and versioning “for free”.

Adding a maintenance.php template

To add our template, I created a new file maintenance.php inside my theme. It wold also work with a plain HTML file, but I went with PHP as this will make it easy to add some dynamic content, if needed.

Right now, the content of my maintenance.php file looks something like this:

<!doctype html> <html lang="de"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /> <title>Title – Coming Soon</title> <style> <!-- All styles inlined in here --> </style> </head> <body> <div class="logo"> <!-- Logo as inline SVG in here --> </div> <div class="message"> <address class="address">Client Name, Street Address 1, City</address> <h2 class="title">COMING SOON</h2> </div> </body> </html>
Code language: HTML, XML (xml)

How to switch on our “Maintenance Mode”

As this is something we will only control ourselves, we will not necessarily need a UI for clients at the moment. To activate maintenance mode, I use a constant that we define in our wp-config.php file.

define( 'MAINTENANCE_MODE', true );
Code language: JavaScript (javascript)

Loading our maintenance.php template

Now, to actually load the template when visitors visit the website, we make use of the template_include filter. This filter lets us control which template file is getting loaded by WordPress:

This filter hook is executed immediately before WordPress includes the predetermined template file. This can be used to override WordPress’s default template behavior. Code Reference

In our case, we want all requests to be routed to our template, if the “MAINTENANCE_MODE” constant is set to true:

/** * Maintenance mode */ function haptiq_maintenance( $template ) { if ( defined( 'MAINTENANCE_MODE' ) && true === MAINTENANCE_MODE ) { $template = get_template_directory() . '/maintenance.php'; } return $template; } add_filter( 'template_include', 'haptiq_maintenance', 10, 2 );
Code language: PHP (php)

Put this into your themes’ functions.php, add a maintenance.php template at the root level of your theme, and switch MAINTENANCE_MODE on from your wp-config.php, and you should see your template for all requests.

Adding some sprinkles on top

After using this for about a week on a client site, I added some small-ish additions to the functions.php code.

First, I added a check for a URL-parameter ?preview which lets you circumvent the maintenance template and see the site. This is something I’ll probably only use when needed, but I find it’s a nice touch to be able to get a preview of the theme quickly, if needed.

Second, I added a check for logged-in users, so that you always see the site when you are logged in.

Here’s the full functions.php code including both those additions:

/** * Maintenance mode */ function haptiq_maintenance( $template ) { if ( isset( $_GET['preview'] ) ) { return $template; } if ( is_user_logged_in() ) { return $template; } if ( defined( 'MAINTENANCE_MODE' ) && true === MAINTENANCE_MODE ) { $template = get_template_directory() . '/maintenance.php'; } return $template; } add_filter( 'template_include', 'haptiq_maintenance', 10, 2 );
Code language: PHP (php)

Things to improve

This solution is not perfect and I’m sure there’s still lots to improve, but I like it so far! It lives in my theme, which means I can easily deploy changes to production, and have them committed to our shared code-base. Also, I can switch it on easily from the wp-config.php without touching any code or copying/removing files on the server.

Here are some ideas that I would like to improve upon:

  • Ability to use CSS from the theme. Right now, styling is completely separated from the theme and therefore there’s some repetition of styles. Would be nice to be able to use stuff like fonts from the theme, if they are already defined in there.
  • Make content more project-independent. Right now the text, title tags and logo etc. are all hard-coded in the template, so it’s still a bit of copy-pasting and replacing when using it in a new project. Maybe this could be made a bit more independent in the future so we can re-use it more easily.

What do you think? Do you use maintenance plugins? Other ways of adding a custom maintenance/coming-soon page? Ping me on twitter or send me and email. Would love to hear how others handle this.