Maintenance Mode for WordPress

Word Count: 330
  • Post category:Codings
  • Post last modified:2024-06-07

Set up Maintenance Mode

  • Create directory maintenance_mode to the active theme directory.
  • Create file maintenance_message.php to the directory maintenance_mode. This file contains html for the front end page. See sample codes in below section.
  • Create directory assets to the directory maintenance_mode. This folder contains files for css, fonts, etc. for the maintenance message page.
  • Add codes shown below to the functions.php for the active theme.

Enable / Disable Maintenance Mode

  • To enable, place an empty file with name .maintenance under the root directory.
  • To disable, remove the file .maintenance.

Codes for function.php


/***************************************
 * Maintenance Mode:
 * - To enable maintenance mode, put an empty .maintenance file in the root directory.
 * - This file should be empty otherwise error may occur.
 * - To disable, remove the .maintenace file.
 * - Details in: https://fai-room.tfwtech.com/maintenance-mode-wp/
 * 
 *****************************************/
if (!function_exists('cu_maintenance_mode')) {

	function cu_maintenance_mode() {

		if (file_exists(ABSPATH . '.maintenance')) {
			if (!current_user_can('edit_themes') || !is_user_logged_in()) {
				include_once get_stylesheet_directory(). '/maintenance_mode/maintenance_message.php';
				die();
			}
		}
	}

	add_action('wp', 'cu_maintenance_mode');
}

Sample codes for maintenance_message.php

<!DOCTYPE html>

<?php
$assets_path = get_stylesheet_directory_uri(). '/maintenance_mode/assets';
?>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="<?=$assets_path?>/img/cropped-JU-favicon.jpg">
    <title>Coming Soon - JOY UNION</title>
    <link rel="stylesheet" href="<?=$assets_path?>/style.css">
</head>

<body>
    <div class="all_container">
        <img src="<?=$assets_path?>/img/Hokkaido-Wine.jpg" alt="" class="bgImg">
        <div class="content_container">
            <div class="logo_container">
                <img src="<?=$assets_path?>/img/ju-logo-white.png" alt="" class="ju_logo">
            </div>
            <div class="heading">
                <h1>New website coming soon.</h1>
                <h1>全新網站即將推出。</h1>
            </div>
    </div> <!-- all_container -->
</body>

</html>
Tags: , ,