How to Create a Custom 404 Page in WordPress - P4 - Using Meta Box and Breakdance

I have encountered situations where users felt frustrated and left the site upon seeing the default error message. Then, I started focusing on creating a unique and user-friendly 404 page. It provides useful links and a friendly message to guide users back to the main content. As a result, the on-site time increased, the bounce rate significantly decreased, and users had a more positive perception of my website.

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

This is a custom 404 page I created as an example. The page may include any kind of content that you think is useful for the visitors.

Video Version

Before Getting Started

To make all the content on your 404 page dynamic and flexible, you should use custom fields to store them. In my case, they are the image, message, and button, as well as the link on the button. Then, you can change any of them to have a new 404 page.

So, these are tools we need in this practice.

First, we need the Meta Box core plugin to have a framework to create custom fields. You can download it directly from wordpress.org.

Also, you may need some advanced features from Meta Box extensions. You can install them separately, or use Meta Box AlO to get them all.

• MB Settings Page: to create a settings page to input all the information that we want to be on the 404 page;
• Meta Box Builder: to have a UI on the back end to create custom fields to save that information 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 Meta Box Tabs, Meta Box Conditional Logic, or Meta Box 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.

And the last one, Breakdance to build the page.

Now, let’s go step by step.

Create a New Settings Page

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

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

For the position of the settings page, you can put it on every place in the menu. We have the Menu Type section to set where to access the page. In this practice, I’ll set it as a submenu of the Settings menu.

The page is still blank now since we haven’t added any content to it.

We’ll do it in 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.

Just add field types one by one corresponding to the kind of content.

For the buttons, I’ll group the label and URL together. So, add a Group field 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 for the button.

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

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

Now, 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 Breakdance.

Navigate to Breakdance > Templates, and add a new template.

Breakdance supports a specific template for the 404 page.

Just choose that option. Then, edit it in Breakdance.

Based on your desired 404 page, just add a new section and choose the suitable structure for it. In my case, I add a Column element, and select the two-column layout.

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

Inside the first column, I’ll add an Image element.

Since it was saved in the custom field created with Meta Box, click on the dynamic data button to choose where we get data from.

Then, in the appeared pop-up, look for the Meta Box section, and choose the name of the field that we save the image.

In the second column, add a Text element for the message.

Also, use the dynamic data button, and select the field for the message.

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

Add a Code Block element.

Then, add the following code:

<?php
$group = rwmb_meta( 'button', ['object_type' => 'setting'], '404-page' );
foreach ($group as $value) :
    echo $value['title'];
    echo $value['url'];
endforeach;
?>

Specifically:

• $group = rwmb_meta( 'button', ['object_type' => 'setting'], '404-page' );: is to get data from a group in the settings page through the rwmb_meta() function provided by Meta Box.
• button: is the ID of the group.
• 404-page: is the ID of the settings page.
• foreach ($group as $value) … endforeach;: is a loop to list all the items since the group is cloneable. Inside the loop, we’ll use the echo function to display data from two subfields with IDs as title and url.

That’s done for getting content.

Now, on the frontend, the data of the 404 page is displayed. But, the button is in the text format.

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

Style the Page

Back to edit the created template with Breakdance, change some settings in the Style tab of each element to have the desired look.

In the code block where we display the button, I also add some div tags and classes. Also, modify it.

In there, to embed the URL on the label of the button, I modify the code like this:

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

Finally, use CSS to style the button. You can add the CSS to the Code Block as well. There is no need to create another one.

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 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. This is exactly the strength of the dynamic content for the 404 page, as well as any page on your site.

You can change it regularly to find out which content will be most sufficient for your visitors.

Last Words

An interesting 404 page may help keep the visitors on your site, even when they can’t find the content that they’re looking for, or simply lessen the discomfort. Along with this tutorial, we hope the series of custom 404 pages is helpful for creating your unique one.

Alternatively, consider a 301 redirect to keep visitors on your site if you’d rather not use a 404 page. Don't forget to regularly check the links on your site to minimize the broken links. We highly recommend using a plugin to save time and effort.

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