• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Jackie D'Elia | UX Designer

  • Articles, Tips and Tutorials
  • About Me
  • About this site
  • Contact
  • Show Search
Hide Search
Home » Articles, Tips and Tutorials » How to Get a Maintenance Page Up Fast When WordPress is Down

How to Get a Maintenance Page Up Fast When WordPress is Down

Written by Jackie D'Elia  |  Published on April 26, 2016  |  Updated on December 11, 2021

Locked Out – Need a “Down for Maintenance” page

The are several free and paid plugins for WordPress to create a maintenance page or coming soon page. I’ve used SeedProd and have been happy with it. But this won’t help you if your WordPress site has been compromised or is not working due to an error. When this happens, you need to act fast to set up a temporary page to let visitors know what’s going on.

The Backstory

I’m creating a new website for a client with an existing WordPress website. The site has been around for years, and I was planning to export some of their content into the new site. Recently when I visited the site, I noticed, it was redirected to a suspended page with a message to contact the host. The client is using a host I do not recommend.

The host says they suspended the site because it was suspected of phishing. The explanations were vague – and I’m still not sure what happened.

The problem was their site was down, the new site wasn’t ready yet and their visitors were being greeted with a lovely site suspended message. Not good!

Account Suspended Message

What Do You Do?

I recommended a course of action to help them get their existing site back online.

  1. Put up a temporary maintenance page.
  2. Have the site scanned and cleaned for malware. I use and highly recommend Sucuri.
  3. Once the site has been cleaned – either work with the host to get the site back online or move the cleaned site over to a recommended host we will be using in the future.
  4. Export the data from the clean site for the new site.
  5. Finish building the new site and deploy on a recommended host like WPEngine, Flywheel or Siteground.

Now I needed to create a quick one page site during the interim.

Bootstrap Maintenance Page

I could have used WordPress for that, but that would take time to set up, configure the theme, etc.

After a quick search, I found a beautiful collection of open source bootstrap templates that I could easily adapt for this purpose. They’re free to use on personal and commercial projects. You’ve gotta love that. Better yet, I could add these to my toolbox, so I could spin up a site in under ten minutes when needed.

No installation of WordPress, themes, plugins, or database configuration needed.

Creating a Simple One Page Template

The templates on the site look fantastic – but I just wanted a simple one page template without a menu or sections. I wanted the background image to cover the entire page and look great on mobile devices and the desktop.

I adapted the Landing Page theme to do just that. It’s really basic – but will work perfectly for a coming soon or maintenance page. I refactored the CSS to use Flexbox, made it mobile first and added an overlay div to shade the background image.

Screen shot of Maintenance Landing Page

Voila. A beautiful responsive maintenance page was up in minutes.

In this case, the client’s hosting site was suspended, so I had to take additional steps to redirect their domain to a temporary place I created on my Siteground GoGeek plan. That involved modifying the .htaccess file to make sure all pages pointed to the maintenance page.

View the Live Demo

You can view the Live Demo here.

Want a free copy of the one page template I created above? Feel free to use it, fork it, change it up and make it your own. Use it anyway you want. It’s absolutely free. Grab it on Github.

The Takeaway

Having a preconfigured template will make it really fast to deploy a maintenance or coming soon page for any domain. With just a quick edit to the html file, and an image swap – it can be ready to go in under ten minutes.

TweetLinkedInFacebookPin
Previous or Next Article
Previous Post: How to Add Training Videos to Your Client’s WordPress DashboardHow to Add Training Videos to Your Client’s WordPress Dashboard
Embracing My Authentic Brand Next Post: Embracing My Authentic Brand

Filed under: Developer Tips, Workflow

sidebar

sidebar-alt

Connect

  • Twitter
  • Linkedin
  • Github
  • Dribbble

Copyright © 2014 - 2022 D'Elia Media LLC, All Rights Reserved. | Privacy Policy