How to Create a Custom 404 Page in WordPress - P5 - Using Meta Box and Oxygen

I noticed that some users would leave the site immediately after encountering the default error message, feeling frustrated. To improve their experience, I focused on designing a more user-friendly 404 page with helpful links and a friendly message to guide them back to the main content. This change led to increased on-site time and a more positive perception of my website.

So, let’s explore an interesting way to have a custom 404 page with flexible content using custom fields created with Meta Box and displaying them with Oxygen.

Here is my custom 404 page as an 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 another page that makes sense to them, or anything else. All of them should be regulated by content in custom fields.

Therefore, in this practice, we will use the following tools:

First, we need the Meta Box plugin to have a framework to create custom fields and a settings page. It’s available on wordpress.org.

Besides, 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;
• MB Builder: to have a UI on the backend to create the custom fields visually;

Besides, you can leverage the power of some other extensions to have your own structure of fields that fit your page’s content. They may be MB Tabs, MB Conditional Logic, or MB Group, and so on. However, they are just optional. In this practice, I’ll use the Meta Box Group to organize custom fields into groups for better management and display.

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

Lastly, and obviously, we use Oxygen to build the page.

Now, let’s start!

Create a New Settings Page

Since the 404 page is not a specific page as usual, we’ll use a settings page to include all the content of the 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.

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

As I mentioned before, instead of adding any specific content to the 404 page, we’ll use custom fields to have dynamic content for it. These custom fields will be set on the created settings page.

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. Simply add more fields if you want to have more content on the page.

For the button, we’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 the group, add two subfields with the corresponding field type.

In my specific case, I set the group as collapsible and named it for the button.

If you want to add more than one button, make the group cloneable by enabling the corresponding option.

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, go to your settings page, and you will see custom fields displayed.

Just input content for the page there.

Next, we’ll get and display these input data on the frontend.

Create a Template for the 404 Page

We’ll get and display the content of the 404 page in a template created with Oxygen.

Go to Oxygen > Templates to add a new template.

And, choose any option to inherit its design.

Oxygen supports a specific template for 404 page. Just choose that option.

Then, edit it in Oxygen.

Based on your own design, just add a new section and choose the suitable layout for it.

In my case, first, add a new section.

Then, I add a Column component and choose the suitable layout.

Next, just add some components into two columns to get and display data for the 404 page.

Inside the first column, I’ll add an Image component. Move to the Image URL tab because I saved the image in the url format.

Since it was saved in the custom field created with Meta Box, click on the Data button, look for the Meta Box Field section, and choose the name of the field that we saved the image to get data from it. Then, you can see the image appears immediately.

In the second column, select a Text component for the message. And connect it to the corresponding field by clicking the default text, and choosing Insert data.

Now, we’ll see the options in the Post section. Choose the Meta Box Field option, and select the message field. After that, you’ll see the message of the 404 page.

The last one is the buttons. Their label and URLs are saved in the cloneable group. However, Oxygen hasn’t supported getting that kind of data on the settings page directly. So, we should use code to get them.

Opt for a Code Block component and add some code in the PHP & HTML section.

Explanation:

$group = rwmb_meta( 'button', ['object_type' => 'setting'], '404-page' );

This line of code is to get data from a group in the settings page. rwmb_meta is the function provided by Meta Box to get data. button is the ID of the group. And 404-page is the ID of the settings page.

Since the group is cloneable, we need to have a loop to list all the items. Inside the loop, we’ll display data from two subfields: the title and URL.

foreach ($group as $value) :
    echo $value['title'];
    echo $value['url'];
endforeach;

That’s done for getting content.

Go to the page on the frontend. You will see the data is displayed all. But the button is in text format.

Now, we need to modify it a little bit to have a better look. So, let’s move to the next step.

Style the 404 Page

Back to edit the created template with Oxygen, change some settings of each component to have the desired look.

In the Code Block where I display the button, I add some div tags and classes, then modify it a little bit.

In there:

<a class="mb_button" href="<?php echo $value['url'];?>"><?php echo $value['title'];?></a>

This line of code is to embed the URL on the label of the button.

Finally, use CSS to style the button.

a.mb_button {
    border-radius: 5px;
    margin-right: 30px;
    color: #fff;
    padding: 12px;
    background: #363636;
    text-decoration: none;
}
a.mb_button:hover{
    color: #d39450;
}

And this is the final look of my 404 page.

Then, you will get a 404 page with beautiful, useful, and flexible content that you can change easily without touching the template anymore.

Update the Content for the 404 Page

Somedays, if you want to update the image, message, or button on this page, just go back to the settings page, and change the content in the custom fields.

Then, you’ll have a 404 page with the new content. It’s more convenient for management.

Last Words

With Meta Box and Oxygen, you can make your own 404 page with special content, making your website more interesting and improving visitor retention rate. If you don't want to use a 404 page, you can try a 301 redirect, which helps keep people on your site.

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
• How to Create a Custom 404 Page in WordPress - P4 - Using Meta Box and Breakdance
• How to Create a Custom 404 Page in WordPress - P5 - Using Meta Box and Oxygen