Creating a maintenance page with the block editor and redirecting visitors to it in WordPress

Discover in this tutorial how to create a maintenance page with the WordPress block editor and redirect all visitors to it, except for administrators.

Do you have to make a quick modification to your website but you don’t feel like installing and uninstalling a “Coming soon” plugin or similar?

Sometimes you just need to make small changes that won’t take a lot of time. However, you also don’t want the website to be visible while you make them.

I already explained how you can do this by creating an HTML file and modifying the .htaccess, but in this case you have the option to design the maintenance page with the full power of the block editor.

In this tutorial you are going to see how to achieve it in a simple way in any WordPress theme, applying several CSS classes and a little bit of code.

Interested? Let’s get started.

Steps to create a maintenance page with the block editor and redirect visitors in WordPress

1. Create a page and add a CSS class to it

Create a page with the title “Maintenance” (it is important that the slug is /maintenance) and give it a specific CSS class.

If you are using Genesis Framework you have it easy. Just go to Genesis sidebar > Custom Classes and add maintenance in “Body Class”:

If you are using another theme you can look for a section that allows you to do the same or follow the tutorial to add a CSS class to a given page in WordPress.

On the other hand, you can use the option to hide the title of Genesis or your theme

Or, failing that, hide it using CSS:

/* Hide page title */
.maintenance .entry-title {
    display: none;
}

2. Create a background block with the structure of your choice

In this step you only have to create the design you want to be displayed directly in the block editor.

For this example we use the same one from the tutorial on how to create block patterns in WordPress, which consists of:

• 1 background block
• 1 header block
• 1 paragraph block

Choose the background color you want to use for the page and in the “Dimensions” section put 100vw, to make sure the block uses the full width.

Inside the background block you can add any block you want, the limit is your imagination.

But if you don’t want to get your head too hot you can use this design as a base. Just copy and paste it into the editor:

3. Customize the CSS of the maintenance page

Now you just need to assign the styles to make it look the way you want it to look.

To do this, insert this block at the end of the style.css file:

Inserting these CSS lines hides the header and footer.

If your theme has a landing template you may be able to save this CSS as they usually hide both elements.

4. Enables page redirection

Now all you need to do is send non-administrator visitors to the maintenance page.

Add the following code at the end of functions.php or in your functionality plugin:

With this code you use the wp_redirect function to send visitors to the URL /maintenance/.

That’s it!

Can you see how easy it is to create your own maintenance page without plugins?

Conclusions

Now you know how to create a custom maintenance page with the block editor and redirect visitors to it with a little bit of code.

You can use this tutorial in any WordPress theme. To make it to your liking you will only need to make a few small CSS adjustments.

If you don’t succeed, send me the details and the name of the child theme you are interested in applying it through the contact form so I can create a custom tutorial with your question.

Benefits of being a subscriber. 🙂