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 (affiliate link) 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.
Note: There are some affiliate links in this post.
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. It is one of the hosts owned by EIG and talked about in a recent post by Chris Lema.
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!
What Do You Do?
I recommended a course of action to help them get their existing site back online.
- Put up a temporary maintenance page.
- Have the site scanned and cleaned for malware. I use and highly recommend Sucuri.
- 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.
- Export the data from the clean site for the new site.
- 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.Handy Bootstrap template for when things go wrong and you need an emergency maintenance page.Click To Tweet
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.
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.
BONUS: Grab a free copy of the template
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.
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.