The default WordPress maintenance page is uuugggggly!
I might be a techie, but I also care about aesthetics, and nothing has horrified me more about WordPress over the years than seeing that ugly, super-basic message that WordPress displays when you’re in the middle of updating a plugin.
I mean, what if a visitor landed on that page? Ugh!
It’s super duper unprofessional.
And that’s nicer than it used to be. Here’s how the old version looked:
Yuuurrgghh!
Making an attractive maintenance page
So I went looking for a solution many years ago.
I looked at a bunch of plugins, but I don’t trust that they’ll run correctly if WordPress is in the middle of updating things.
So I realised that I needed a solution that didn’t depend on WordPress being functional for it to render correctly.
I discovered a really easy fix that only requires uploading a single non-WordPress page into the website files at my web host.
Once I realised this, I started creating custom maintenance pages for all of my WordPress sites, until I got sick of updating the same details, over and over.
So I turned it into a template, and now it’s a breeze for me to customise and upload a custom WordPress maintenance page.
Here’s how you can create your own, customised, professional-looking WordPress maintenance mode page.
How to change the default maintenance page in WordPress?
When your site goes into maintenance mode during plugin and theme updates, WordPress looks for a file called “maintenance.php” in the /wp-content/ sub-directory of your WordPress install.
If it finds this file, it displays this file as your custom maintenance page.
If, however, WordPress finds nothing there, it will display its default maintenance page, which these days, looks something like this:
To modify how this maintenance page looks, without using a plugin, you’ll have to create your own HTML/PHP page that can be displayed regardless of the current state of WordPress.
Step 1 – Create a custom HTML/PHP page
The first step to customising your WordPress maintenance page is to create a brand new page using HTML and PHP.
You can create a very basic page, just like the WordPress default message, or you can introduce more elements – the choice is completely up to you.
You’ll need to create a new file in your favourite text editor, save it as “maintenance.php” and add the essential elements of an HTML page.
1. Send the right headers
The very first thing you’ll want to is make sure you send the right headers, so that if Google or another bot stumbles across your site while it’s in maintenance mode, it doesn’t think that this is how your site normally looks.
The best server response for this is the 503 – Service Unavailable, which says that the site is not currently available, but that this is only temporary, and to try again shortly.
You can modify the ‘Retry-After value in the code below to a number of seconds that makes sense for your site. That is, how long do you want to bots to wait before trying again?
$protocol = "HTTP/1.0";
if ( "HTTP/1.1" == $_SERVER["SERVER_PROTOCOL"] )
$protocol = "HTTP/1.1";
header( "$protocol 503 Service Unavailable", true, 503 );
header( "Retry-After: 900" );
Make sure to enclose the above in PHP tags and place it right at the start of your document.
2. Add standard HTML headers
Every HTML page includes standard tags, for both the headers and the body content.
NOTE: I can’t include these in code directly in the document, because that confuses the heck out of the WordPress editor.
At a minimum, you’re going to need a DOCTYPE declaration, the opening html tag and the opening head tag.
You’ll also want to add meta tags for:
- Character set e.g. <meta charset=”utf-8″>
- Viewport e.g. <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
- Title e.g. <title>Maintenance Mode</title>
- Description e.g. <meta name=”description” content=”Site description” />
- Favicon e.g. <link rel=”icon” href=”./favicon.ico” type=”image/x-icon”>
and, of course, the closing head tag.
3. Add styling
You’ll probably also want to include some custom styles, either within <style></style> tags, or in an external stylesheet e.g. <link rel=”stylesheet” href=”./style.css”>, the head of your document.
I prefer to include my styles directly within the page header, so that I only need to manage one file, and almost everything is self-contained.
4. Add your body content
The body of your page is key, because this is where you get to make it match your branding, and make it attractive, and send the right message to your visitors.
Things you might want to include on your customised maintenance page:
- Images e.g. a logo
- Brand colours
- Simple messaging to explain why they’re seeing this page
- Your contact details
Maintenance page creation tips
Some important things to keep in mind when creating your page.
- For any images e.g. a logo, product photo, copy the full URL for the image from your media library, and paste this into your body code.
- Avoid using any WordPress functions in your page content, as you don’t know what will be functional at the point a visitor views this page
- Consider adding an eye-catching feature image that highlights something impressive about your business or brand e.g. a product or screenshot
- Keep it simple and clear. Tell them why they’re there, what to expect and what to do next.
Viewing your custom maintenance page
To view your custom page, you can view in your local browser (but your images may not load) or you can upload it to the root of your site and load the URL:
https://yourdomain.com/maintenance.php
(If you do this, make sure you delete it when you’re done).
If you have a development copy of your site, I’d recommend uploading tour file there instead.
Example of a customised WordPress maintenance page
Here’s an example of how your customised maintenance page could look.
or this….
or this…
or this…
Doesn’t that look so much better?
Step 2 – Upload it to your web server
Once you’re happy with your customised WordPress maintenance page, all that’s left to do is to upload it to your live website.
To do this, you’ll need to
- Connect to your site via FTP OR login to your web host file manager tool
- Navigate to the /wp-content/ directory
- Upload your customised and saved maintenance.php file
That’s it!
Now, when your site is in the middle of updating a plugin or theme, and someone requests a page, they’ll see your beautiful maintenance page instead of the default WordPress one.
Step 3 – Test your page (optional)
If you want to make 100% sure that your new page is working correctly, you can manually put your site into maintenance mode.
The simplest way to do this is to add a file in the root directory of your website named “.maintenance”. This file also needs to contain some code to tell WordPress what’s going on.
A simple version of this might be:
$upgrading = time();
inside some opening and closing PHP tags.
Once you’ve added this file to your website, everyone, including you, will see the maintenance page when they try to load any pages.
In other words, this basic version doesn’t allow you to access the admin back-end at all. (You can go looking for more complex versions if you need it).
But what this basic file allows you to do is see your customised maintenance page, and make sure that’s working correctly.
Make sure you delete the .maintenance file from the root of your site as soon as you’re done!
NOTE: The presence of this file will keep your site permanently in maintenance mode. If your WordPress website ever gets stuck in maintenance mode, the simplest fix is find the .maintenance file in the root directory of your website and delete it.
A pre-built fully customisable maintenance page
If you’re not sure where to start with creating a custom WordPress maintenance page from scratch, I’ve created a ready-to-use and easy-to-customise template.
All you have to do it edit some wording and colours, and you’ll have a completely custom maintenance page for your site.
Learn more about my “done for you” maintenance page template.
Enjoy your stylish WordPress maintenance page
Congratulations! You now have a completely customised maintenance page that matches your brand, and makes your sites look SOOOO much more professional.
Now you can rest assured that no matter who visits your site while you’re updating things, they’ll see a polished version of your brand, and know exactly what’s going on.
Never lose a visitor to an ugly maintenance page again!