Simple Maintenance Redirect
Settings
In the admin area of your site, navigate to Settings > General.
- Enable Maintenance Mode Redirect: Turns maintenance mode on or off.
- Disabled
- Enable Redirect to Page
- Enable Redirect to External URL
- Maintenance Mode Redirect Page: Choose the page you want to use for your maintenance mode page.
- Maintenance Mode Redirect External URL: Enter the URL of the webpage you want the user to be redirected to during maintenance.
Setting Up Your Page
It's easy! Just create a new page in your admin area and put whatever you want on there. Here are some examples:
1. Coming Soon (Launch Preparation)
- Example Text: "Exciting things are coming! Our website is under construction, but stay tuned — we’ll be launching soon!"
- Reason: You’re getting ready to launch a new product, feature, or site redesign.
2. Major Site Overhaul/Redesign
- Example Text: "We’re working on something new! Our site is getting a fresh new look. Check back soon to see the exciting changes!"
- Reason: You’re redesigning your website to enhance the user experience or update branding.
3. Testing New Features
- Example Text: "We’re testing something cool! Our site is in maintenance mode while we try out new features. We’ll be back soon with an improved experience!"
- Reason: You’re adding or testing new features before they go live.
4. Technical Difficulties/Server Issues
- Example Text: "Oops, something went wrong! We’re experiencing temporary technical difficulties and are working quickly to fix them. Thanks for your patience!"
- Reason: Temporary issues that require maintenance.
5. Upgrading to a New Platform or System
- Example Text: "We’re upgrading to a better experience! We’re switching to a new platform/system, and we’ll be back shortly."
- Reason: Migrating to a new hosting platform or updating the core backend infrastructure.
6. Security Updates
- Example Text: "We’re upgrading our security to protect your data. The site is temporarily unavailable while we make sure everything is secure. We’ll be back shortly!"
- Reason: Performing important security patches and updates to ensure the site remains safe.
7. Maintenance for Bug Fixes/Performance Improvements
- Example Text: "Our site is getting faster and better! We’re fixing some bugs and optimizing performance for a smoother experience."
- Reason: You’re addressing bugs, performance issues, or other problems to improve the user experience.
8. Rebranding
- Example Text: "We’re rebranding and making improvements to our site. Please stay tuned for a fresh new look and feel!"
- Reason: Changing the site’s branding or updating the visual identity (logo, color scheme, etc.).
9. Site Migration or Domain Change
- Example Text: "We’re moving to a new home! Our website is being migrated to a new server or domain. We’ll be back online shortly!"
- Reason: Migrating your site to a new server or domain, which temporarily takes the site offline.
10. Legal/Compliance Updates
- Example Text: "We’re updating our site to comply with the latest regulations. We’ll be back shortly with the updated legal and compliance information."
- Reason: Updating privacy policies, terms of service, or other legal requirements in response to changes in regulations.
Page Appearance
While in maintenance mode, users will only see the content of your page without the header and footer. This means your navigation bar and likely your logo will be removed, too. Here are some tips for customizing the appearance of your page:
Logo
It's best practice to add your logo inside the content so people know they are still on your site.
Background Color or Image
Changing the background color or background image can be done with CSS.
- Visit the page on the front end.
- Open your WordPress Customizer by clicking on the paintbrush icon in the admin bar.
- Click on Additional CSS (or CSS Organizer if you have our CSS Organizer plugin installed)
- Add a CSS snippet using the
.maintenance-mode
class selector (which will only target this page):
/* Background color and text color */
body.maintenance-mode {
background-color: #0C1117;
color: #ffffff; /* white */
}
/* Background image with light background color */
body.maintenance-mode {
background-color: #f5f5f5; /* Light background color (should match the tone of your background image) */
color: #000000; /* black */
background-image: url('path-to-your-image.jpg'); /* Add your background image URL */
background-size: cover; /* Ensures the image covers the entire body */
background-position: center; /* Centers the image */
background-repeat: no-repeat; /* Prevents the image from repeating */
}
Other Customizations
The sky is the limit! The point of this plugin is to give you the freedom to customize the page just like you would any other page on your website without all of the limitations and having to pay for more options.