Wordpress LogoWhenever you update your WordPress site to a new version or mass update multiple plugins at the same time, WordPress automatically places your site in “maintenance mode”. In this tutorial, I’ll show you to how to easily make an awesome “theme” that gets displayed instead of the blank white page that just says the site is undergoing maintenance.

The best part about this is that its all automatically handled by WordPress and they have already built in a “hook” to easily do this. If WordPress finds a file called maintenance.php in your /wp-content directory, it will use that file instead of the default blank white page.

The key thing to note is that while your site is in maintenance mode, you can’t be sure that you will have access to the traditional WordPress theme template tags or functions, such as bloginfo(‘name’) or bloginfo(‘description’) or theme “options” fields that configure the various aspects of a theme. So you’ll need to “hard code” your site name, description,  the text that displays, the URL’s to image and links.

If you are good with HTML, you can code up whatever you’d like. However, the easiest way to do this is to install a theme that you like, configure it, display it in your browser and then “view source” to grab the HTML code. You’ll want to grab the full HTML from the top <HTML> tag through the bottom </HTML> tag. This needs to be a fully-functional standalone HTML page. It really is just about that simple.

The only thing you need to do beyond grabbing the HTML code is to add the following to the maintenance.php file.

At the very top, add the following code. This code will tell the search engines that your site is only temporarily unavailable and to try back in 10 minutes.

<?php
/* DON'T CHANGE THIS - IT TELLS SEARCH ENGINES THE SITE IS ONLY TEMPORARILY UNAVAILABLE */
$protocol = $_SERVER["SERVER_PROTOCOL"];
if ( 'HTTP/1.1' != $protocol && 'HTTP/1.0' != $protocol )
     $protocol = 'HTTP/1.0';header( "$protocol 503 Service Unavailable", true, 503 );
header( 'Content-Type: text/html; charset=utf-8' );
header( 'Retry-After: 600' );
/* END DON'T CHANGE THIS */
?>

At the very bottom of the file, add the following line. Since WordPress is including this file into its program that handles the upgrade, its important that you tell WordPress to drop out of this section of the code when its done displaying this maintenance mode page.

<?php
/* DON'T CHANGE THIS - IT PASSES CONTROL BACK TO THE WORDPRESS UPGRADE ROUTINE */
die();
/* END DON'T CHANGE THIS */
?>

Here is a screenshot of the page that I’ve created for XtremelySocial.com.

Here is a link to view the Maintenance Mode Screen for XtremelySocial.com. You can cut and paste the HTML from that page if you’d like to use it as a starting point, but make sure you install the ice-breaker theme from CustomTheme.com that it is based on. My page needs the images, and css from that theme to work.

There are some really great “under construction” WordPress themes that you can use to generate your initial HTML code and paste it into your maintenance.php file. Check out the article Top Themes and Plugins for Under Construction WordPress Blogs from techcats.net.

Update 5/26/10: Note that this seems to only work in WordPress 3.0. Older versions don’t seem to handle automatically placing your site in maintenance mode properly. The code is there to do it, but it doesn’t seem to work. If anyone has a quick fix, let me know.  If I find a fix I’ll post it here.

5 responses to “How to Make an Awesome Maintenance Mode Screen for WordPress”

Comments
  1. 10 Things you did not know about WordPress – Remkus de Vries

    […] do is create a maintenance.php file and place that in your /wp-content/ folder. An example can be found here. Basically, you can use whatever HTML and PHP you like, but no WordPress PHP code as WordPress is […]

  2. wp-popular.com » Blog Archive » How to Make an Awesome Maintenance Mode Screen for WordPress | XtremelySocial.com

    […] more here: How to Make an Awesome Maintenance Mode Screen for WordPress | XtremelySocial.com Tags: howto, […]

  3. L’hebdo WordPress : WordPress 3.0 – BlackBerry – Thèmes | WordPress Francophone

    […] site n’est plus visible pour votre visiteur et n’affiche qu’une page blanche. XtremlySocial.com propose une solution pour personnaliser cette page de maintenance visible par vos visiteurs. Cette technique ne […]

  4. WordPressハッカーズ

    How to Make an Awesome Maintenance Mode Screen for WordPress | XtremelySocial.com…

    この記事は以下サイトで紹介されています。 WordPressハッカーズ…

  5. Tweets that mention How to Make an Awesome Maintenance Mode Screen for WordPress | XtremelySocial.com — Topsy.com

    […] This post was mentioned on Twitter by WPThemeInfo, Matt. Matt said: How to Make an Awesome Maintenance Mode Screen for WordPress: http://ow.ly/1S0nJ […]

Account

Site Contents

Help Support Us