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:

The custom 404 page was built by MB Views.

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.

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.

Set the 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.

The page is in the Settings menu, it’s still blank

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.

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.

Some fields that I’ll create for the page as examples

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.

Add Group field 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.

Inside the group, add two subfields for the content and URL

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.

Name the title of the groups

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

Set the group is cloneable to have more than one button

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.

In the Settings tab, set the location as the created settings page to apply the fields to it

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

The custom fields are displayed in the settings page

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.

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.

You can add code to the box or use the Insert Field button to insert fields

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

Turn to the Site section to see fields being on a settings page.

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

For the image of the 404 page, insert the Image field

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

Insert the Message field

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

For the button, insert the Button field.

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

Insert the button name, and its url

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.

Set type of the template to apply it for the 404 page

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

The 404 page information displays without styling

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.

Include some div tags and classes

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

Add some code to the CSS tab for styling the page

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

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.

Change the content of the 404 page in the settings page

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

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!

Leave a Reply

Your email address will not be published. Required fields are marked *