Creating a custom 404 page in WordPress - Meta Box + Bricks

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 Bricks.

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

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

• Meta Box plugin to have a framework to create custom fields. It’s available on wordpress.org.
• 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;
• Meta Box Group (optional): to organize custom fields into the group. In this case, they are the labels and URLs of the buttons;
• Bricks: to build the page.

Now, let’s start!

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

2. Creating custom fields

Instead of adding any specific and static content to the page, I’ll use custom fields to store them all.

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.

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

If you want to add more than one button to the page, you should set this group as cloneable.

Inside the group, add two subfields: one for the label, and another for the URL for the direction.

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 data. Here is my content for example.

3. Creating a template for 404 page

Go to Bricks > Templates and create a new one to display the 404 page.

To regulate the template to be used for 404 pages, you must set the type of this template as ‘Error page’.

And then, edit the template with Bricks, you must set a condition to apply the template to the Error page as well.

Depending on the structure of the content that you want to have on the page, just choose a suitable layout.

Now, we should find some elements that match the kinds of content you saved in the custom fields to display them.

To get the content from the custom fields, we’ll use the Dynamic Data button for the element. Then, look for the name of the field in the Meta Box section. Take the image of the 404 page as an example.

After that, you will see the image displayed in the preview section immediately.

Do likewise for other content.

With the buttons, they are from a cloneable group, so you should use a query loop to get them all. Therefore, add a Div element, then enable the query loop for it, and just set the type of data source as the name of the group.

Now, add a Button element inside the Div element.

We have the label as well as URL for the button saved in custom fields, so we also use dynamic data for this element. We do it in the same way as getting data from other custom fields, click the icon below to set the label, and choose the name of the field where we store the label from the list.

For the links of the buttons, set the type as Dynamic Data. As well, choose the fields where we store the URLs. The links will automatically be embedded into the button.

How much content you put in the custom fields, how many elements you should add to this template to display them all.

After that, you should view the page on the frontend to see how it looks.

This is a simple page that I’ve made. That’s all the content that I want to have on this page. But, you might have more than that. Make sure you get and display them all.

4. Styling the 404 page

The next part is to modify the layout of the page as well as style each element to have a better look. Just go back to edit the 404 page with Bricks to do it.

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

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

In the event that you want to change the content of the 404 page, just go back to the settings page, and change the data saved in the custom fields.

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!