How to Create a Custom 404 Page - P3 - Using MB Views

From my experience managing websites, I think that a well-designed 404 page can help keep visitors on your site even when they can't find what they're looking for, and reduce bounce rates. That's why we should have decent-enough content for it to encourage visitors to stick around. You may not know how it is at the first time, but you can change it regularly to find out which content will be most sufficient. In today’s practice, I’ll show you how to create a better 404 page with flexible content that you can change anytime without affecting the design using the MB Views extension from Meta Box.

Here is my example:

Video Version

Before Getting Started

The page may contain any kind of information that you think is useful for visitors. You can add an image, a message, buttons to redirect them to other relevant pages, or anything else. All of them should be regulated by content in custom fields. By using custom fields, you can simply change the content in those fields, and the page will automatically display the updated version.

Let’s look for the detailed list of tools we need for this practice.

First, we need the Meta Box plugin to have a framework to create a settings page and custom fields for the 404 page content. This plugin is available on wordpress.org.

Additionally, for the advanced features for custom fields, we need some Meta Box extensions:

• MB Settings Page: to create a settings page to input the 404 page’s information;
• Meta Box Builder: to have a UI on the backend to create the custom fields visually;
• MB Views: to create a template for displaying the 404 page’s content.

Besides, you can make the most of some other extensions to have your own field structure that fits your page’s content. They may be Meta Box Tab, Meta Box Conditional Logic, and so on. However, they are just optional. In this practice, I’ll use Meta Box Group to organize custom fields into groups for simpler management and display.

You can install them individually or just use Meta Box AIO.

That’s all. Let’s start now.

Create a Settings Page

The 404 page is not a specific page, so we’ll use a settings page to include all the content and other settings for it.

Go to Meta Box > Settings Pages and create a new page.

For the position of the settings page, you can put it on every place in the menu. I’ll set this page as a submenu, and choose the Parent menu as the Settings.

Then, go to the page in the Settings menu. It’s still blank since we haven’t added any content to it yet.

Let’s move to the next step.

Create Custom Fields for the 404 Page’s Content

Instead of directly adding specific content to the page, I'll use custom fields to store all the information.

Go to Meta Box > Custom Fields and create a new field group.

These are some fields that I’ll create for the page as examples. Feel free to add more fields if you want additional content on the page.

For the button, I’ll group the label and URL together, then we’ll have a bundle for each button. So, add a Group field type for the button.

Inside this group, add two subfields: one for the label, and another for the URL, where you want the visitors to arrive.

You can set the group as collapsible to see buttons in a clear structure. And, to see the buttons apart, you can name the title of the groups as well. Here, I use {name} to name the button as the label for management purposes only.

If you want to add more than one button to the page, it's advisable to set this group as cloneable.

After creating all the fields, move to the Settings tab, set the Location as Settings page, and choose the created settings page to apply the fields to it.

Then, on your settings page, you will see custom fields displayed.

Just input some content to the fields. They will be used to display on the 404 page later.

Create a Template for 404 Page

Go to Meta Box > Views to create a new template for the 404 page.

With MB Views, you can add some lines of code to the box or insert fields by clicking the Insert Field button, then choosing fields on the right sidebar to get data from custom fields.

Since our fields are on a settings page, turn to the Site section to see them.

First, for the image of the 404 page, insert the Image field. And, you can choose an image size that fits your page style.

Next, to display the message, choose the corresponding one.

For the button, insert the Button field. Since it’s cloneable, a loop will be generated in the Template section.

Inside the loop, we’ll insert the button name, and its url as well.

Now, go to the Settings section to apply this template for the 404 page. Since it is a special page, we need to use a conditional tag provided by WordPress to set the location for this template. First, set the view type as Code. Then, put in a tag on the box. With the is_404() tag, we show this template only on pages not found.

Now, if you access any broken link of your website, you’ll see the 404 page information displayed.

You can see that it might not look nice as you'd like, so you may need to style it a bit.

Style the 404 Page

Back to the created template with MB Views, include some div tags and classes to make styling easier.

Also, add some code to the CSS tab for styling the page.

Then, the 404 page displays with a better look already.

From now on, whenever visitors go to an unavailable page on your site, they’ll find the 404 page. Also, the buttons will help drive them to another page that may have some helpful content.

Change 404 Page Content in Daily Use

Someday, when you want to change the content of the 404 page, including the image, message, or button, simply go back to the settings page, change the data saved in the custom fields.

Then, you will have a new 404 page with fresher content.

That way, you can test which content will match and be good enough to keep the visitor staying longer on your site.

Last Words

With the MB Views extension from Meta Box, you can make a custom 404 page with unique content, making your site more engaging. For those using a different page builder, this series offers guidance. Alternatively, consider a 301 redirect to keep visitors on your site if you’d rather not use a 404 page.

Also, for better SEO, check out our series on analyzing content in custom fields. Feel free to suggest any tutorials by leaving a comment and following our blog. Thanks for reading!

• How to Create a Custom 404 Page in WordPress - P1 - Using Meta Box and Elementor
• How to Create a Custom 404 Page in WordPress - P2 - Using Meta Box and Bricks
• How to Create a Custom 404 Page - P3 - Using MB Views