Home › Maintenance Mode › How do I create a custom maintenance mode page in WordPress?

How do I create a custom maintenance mode page in WordPress?

Sarah B • Dec 19, 2024 • Maintenance Mode
How can I make a special page that shows a message when my website is down for updates?
What are the steps to implement a custom maintenance mode page in WordPress that temporarily replaces the site content during updates?
Andy answered • Dec 19, 2024

Creating a Custom Maintenance Mode Page in WordPress

Basic Approach

There are three main ways to implement maintenance mode in WordPress:

  1. Using a plugin (easiest)
  2. Manual code implementation (most flexible)
  3. Using .maintenance file (quick but basic)

Method 1: Plugin Solution

For beginners or quick implementation, these plugins work well:

Method 2: Manual Code Implementation

Add this code to your theme's functions.php file to create a custom maintenance mode:

Basic maintenance mode function that checks for admin users:

function custom_maintenance_mode() {
    if (!current_user_can('edit_themes') || !is_user_logged_in()) {
        wp_die(
            '<h1>Website Under Maintenance</h1>
            <p>We are performing scheduled maintenance. We will be back online shortly!</p>',
            'Maintenance Mode',
            array('response' => 503)
        );
    }
}
add_action('get_header', 'custom_maintenance_mode');

Advanced version with custom HTML template:

function advanced_maintenance_mode() {
    if (!current_user_can('edit_themes') || !is_user_logged_in()) {
        header('HTTP/1.1 503 Service Temporarily Unavailable');
        header('Status: 503 Service Temporarily Unavailable');
        header('Retry-After: 3600');
        
        // Path to your maintenance template
        $maintenance_template = get_template_directory() . '/maintenance.php';
        
        if (file_exists($maintenance_template)) {
            require_once($maintenance_template);
        } else {
            wp_die('Website under maintenance', 'Maintenance Mode', array('response' => 503));
        }
        die();
    }
}
add_action('wp_loaded', 'advanced_maintenance_mode');

Method 3: Using .maintenance File

Create a .maintenance file in your WordPress root directory:

<?php
$upgrading = time();

Best Practices & Security Considerations

  1. Always allow admin access

    • Ensure administrators can still access the site
    • Test the login functionality before activating

  2. Set proper HTTP headers

    • Use 503 status code
    • Include Retry-After header

  3. Keep maintenance time short

    • Plan updates in advance
    • Test changes on staging first

  4. Include essential information

    • Expected downtime
    • Contact information
    • Social media links

Common Pitfalls to Avoid

  1. Don't forget to disable maintenance mode after updates
  2. Avoid caching conflicts by clearing cache after enabling/disabling
  3. Don't block search engine bots for extended periods
  4. Test maintenance mode while logged out
  5. Consider mobile device display

Additional Tips

Create a maintenance page template (maintenance.php):

<!DOCTYPE html>
<html>
<head>
    <title>Site Maintenance</title>
    <style>
        body { 
            text-align: center; 
            padding: 50px; 
            font-family: Arial, sans-serif; 
        }
        .maintenance-container {
            max-width: 600px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="maintenance-container">
        <h1>We'll be back soon!</h1>
        <p>We're currently performing scheduled maintenance.</p>
        <p>Please check back in about an hour.</p>
    </div>
</body>
</html>

This template can be customized with your branding, images, and additional information as needed.