Maintenance Mode

5 min read Updated

The Maintenance Mode Addon shows a maintenance screen to visitors while you work on your site. You, your editors and your authors still see the normal site.

View the Maintenance Mode demo.

Requirements

Go to SiteOriginPremium Addons and activate Maintenance Mode. The Addon Settings dialog opens at once. Later, open it with the Settings button on the Maintenance Mode card.

Turn On Maintenance Mode

  1. In the Addon Settings dialog, turn on Enable Maintenance Mode.
  2. Select a Display and add your message.
  3. Click Save.

To turn maintenance mode off, clear Enable Maintenance Mode and click Save. Deactivating the addon also turns it off.

Who Sees the Maintenance Screen

  • Visitors who aren’t logged in see it on every front-end address.
  • Logged-in users who can’t edit posts, for example Subscribers, also see it.
  • Logged-in users who can edit posts, for example Contributors, Authors, Editors and Administrators, see the normal site.
  • The admin screens and the login page always stay open, so you can’t lock yourself out.
  • Scheduled tasks (WP-Cron), Ajax requests, XML-RPC and WP-CLI keep working.

The maintenance screen sends a 503 Service Unavailable status and tells browsers not to cache it. Search engines treat a 503 as a short break. If you use a page cache or a CDN, clear it after you turn maintenance mode on and again after you turn it off.

Admin Bar Indicator

While maintenance mode is on, the admin bar shows Maintenance Mode Active with a bell icon. Only users who see the normal site get it. Click it to open the Maintenance Mode settings.

Settings

Enable Maintenance Mode
Shows the maintenance screen. Default: off.

Display
Where the content comes from. Default: Text.

  • Text: the message in the Text field.
  • Layout Builder: a layout you build with Page Builder rows and widgets. This option shows only when Page Builder and the Widgets Bundle are active.

Both displays show the content in a box on its own screen, without your theme’s header, footer or sidebar. Your theme’s styles still load.

Title
The browser tab title. Default: Under Maintenance – followed by your Site Title.

Content
Shows when Display is Layout Builder. Add rows and widgets as you do in Page Builder.

Text
Shows when Display is Text. A visual editor for your message. It starts with a sample message that begins “Site Under Maintenance”. Heading tags in the text use the Heading design settings.

Design

Open the Design section, then click a group to open it.

Body

Background Color
The color of the whole screen. Default: #f1f1f1.

Background Image
An image that covers the whole screen, behind the content box. Default: none.

Background image opacity
Shows when you select a background image. Values from 10 to 99 set the image opacity in percent, so the Background Color shows through. Default: 100. At the moment, 100 shows the image at 10% opacity. For a full-strength image, set 99.

Content Container

The content container is the box that holds your text or layout.

Margin
The space around the box: top, right, bottom and left. Default: 50px 0px 0px 0px.

Box Shadow
Turn on to add a shadow to the box. Default: off. When it is on, you can set:

  • Color: default rgba(0, 0, 0, 0.07).
  • Horizontal Offset: default 0.
  • Vertical Offset: default 2px.
  • Blur: default 12px.
  • Spread: default 0.

Border Radius
Rounds the corners of the box: top, right, bottom and left. Default: 24px on each corner.

Background
The background color of the box. Default: #ffffff.

Padding
The space inside the box: top, right, bottom and left. Default: 40px 40px 20px 40px.

Alignment
The position of the box on the screen: Left, Center or Right. Default: Center.

Width
The width of the box. On small screens, the box is never wider than the screen. Default: 820px.

Heading

These settings apply to all headings in the content.

Font
The font family. Default: Helvetica Neue.

Font Size
Default: 32px.

Color
Default: #131313.

Text

Font
The font family of the text. Default: Helvetica Neue.

Font Size
Default: 15px.

Color
Default: #1b1b1b.

Link Color
The color of links. Default: empty. At the moment, this setting has no effect, and links keep their normal color.

Link Hover Color
The color of links when the pointer is over them or they have focus. Default: empty.

Advanced Customizations

The siteorigin_premium_maintenance_mode_show filter decides if a logged-in user who can edit posts sees the normal site. Return false to show them the maintenance screen too. This example lets only Administrators see the normal site:

add_filter( 'siteorigin_premium_maintenance_mode_show', function( $show ) {
	return current_user_can( 'manage_options' );
} );

The siteorigin_premium_maintenance_mode_request_bypass filter lets other requests through. It gets false and the $_SERVER values. Return true to skip the maintenance screen for that request. At the moment, the addon also blocks REST API requests from visitors who aren’t logged in. This example lets REST API requests through:

add_filter( 'siteorigin_premium_maintenance_mode_request_bypass', function( $bypass, $server ) {
	if ( ! empty( $server['REQUEST_URI'] ) && strpos( $server['REQUEST_URI'], '/wp-json/' ) !== false ) {
		return true;
	}
	return $bypass;
}, 10, 2 );

Add custom code with a child theme or a code snippets plugin.