Creating a custom 404 page using MB Views

Today, 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

Preparation

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.

• The Meta Box plugin: to have a framework to create a settings page and custom fields for the 404 page content;
• 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.

1. Creating 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.

2. Creating 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.

3. Creating 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.

4. Styling 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.

5. Changing 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.