Create a 404 page with editable content in WordPress

In most cases default content on a 404 page is all that would ever be needed, in a default 404.php it would look some thing like this:

<div class="page-content">
    <p><?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'your-textdomain' ); ?></p>

    <?php get_search_form(); ?>
</div>

However, occasionally there is a need to give the site owner the flexibility to change the content displayed on the 404 page.

This can be done in a number of different ways, but the simplest implementation I found is to search to see if a 404 page has been created in the admin and if so display the content of that page.

First of all, in functions.php add the following function:

function get_404_page() {
    $page_exists = get_page_by_title( '404' );

    if ( ! empty( $page_exists->ID ) ) {
        return $page_exists;
    } else {
        return;
    }
}

Let’s look at this a bit more closely.

$page_exists = get_page_by_title( '404' );

First, we are searching through the pages created in the admin to see if a page with the title of 404 has been created. Next we do a check to see if this page has been found or not.

if ( ! empty( $page_exists->ID ) ) {

If the page ID is not empty then we need to return the page as WP_Post object so that we can later use the post_content in our 404.php.

return $page_exists;

By using the function get_page_by_title() to find the page, we get the WP_Post object directly, which we then return for later use.

} else {
    return;
}

Otherwise we return nothing to prevent any php errors occurring when we use the function within our page.

Finally, to implement the function, open your 404.php in your theme and add the following line to the top of the file.

$error_content = get_404_page();

If the 404 page exists in the admin the value of $error_content will be the WP_Post object, otherwise it will be empty.

All that is left now is to display the editable content on the page if it exists.

<div class="page-content">
    <?php
    if ( $error_content ) {
        echo apply_filters( 'the_content', $error_content->post_content );
    }
    ?>
    <p><?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'your-textdomain' ); ?></p>

    <?php get_search_form(); ?>
</div>

And that’s it! You can of course, remove the default text and search form. You could also add in other content from the post object and customise it as much or as little as you want.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a free website or blog at WordPress.com.

Up ↑

%d bloggers like this: