RAY MORTIMER

UK Web Developer

Create an Editable Custom 404 Page in Wordpress (NO Plugin)

Surprisingly Difficult

Recently while finishing off a custom theme for one of my own projects, I realised I had forgotten to make a 404 page.

Turns out it isn't that straightforward to create a 404 page that users can edit through the WP editor, at least not without a plugin or lots of custom functions.

I did come up with a simple workaround though, which I've not seen anybody else suggest!

Note: this article is focussed on creating an editable 404 page for your custom Blocks or Classic theme site without having to resort to yet another plugin. (Some other page builders will have custom 404 editing built-in).

Many Different Suggestions

When I searched for best practices on this, I was surprised to find a lot of suggestions that involved hard coding content, creating 301 redirects or using various third-party plugins.

I was kind of expecting something built-in by now where you would assign a standard page to be the 404 page.

The most commonly mentioned way to create a 404 page is to copy the page template and strip out all the post loop stuff. Then hardcode all the HTML for the 404 message you want to convey to users.

This is all very well, but what if you want to edit that in future? A developer will most likely have to be involved to make those changes. Besides, it has always been a bit of a no-no to hard code content like this whether in a template or Javascript.

Some other suggestions talked about creating 301 redirects (which will confuse search engines and send out the wrong message) or modifying the .htaccess file which won't work either because these rules are executed before Wordpress.

Possible Cleaner Approach

I think it is possible to trap the 404 error at a lower level via a hook or similar, which should neatly redirect to the name of the custom 404 page you have created.

I haven't fully looked into this option as it will require a bit more research and testing.

My Workaround Hack

My simple hack was a modified version of the most popular suggestion of using a 404 template page.

Instead of hardcoding the content into the page, we will retrieve the content for a specific page that holds the content we want.

Although we are hardcoding the post ID which is not totally ideal, it should never change. We can however access the content of that page in the WP editor and modify it just like any other page.

Template Code

Here are my steps to producing your own custom editable 404 page in Wordpress:

<?php
    // get content of page/post with ID 999 (title= Page Not Found)
    $post = get_post(999); // specific post
    $the_content = apply_filters('the_content', $post->post_content);
    echo $the_content;
?>

Note that the 404.php page is a standard template file that Wordpress looks for when it encounters a 404 error. We do not need to create our "Page Not Found" page with this template, we can just use our standard page template.

We are essentially creating a "mash-up" of our "Page Not Found" page content wrapped within the 404 page template that Wordpress needs.

It is not possible to make the 404 a template page and then create a new page from that in the WP editor.