Dynamic 404 page content while still keeping 404 status code?

Question

I used Divi to build the layout for a custom 404 page. I'm using this plugin https://wordpress.org/plugins/redirect-404-error-page-to-homepage-or-custom-page/ to redirect 404 errors to this page. It works, but when I run tools like screaming frog, it returns broken pages as 301 redirects, which I guess is expected.

What I would prefer however is for my 404.php template to include the page I built, so that I can still accurately track my 404 errors. I'm thinking of something like:

#404.php
<?php 

require(/*Some function to get my entire custom 404 page by slug or ID*/;)

?>

What I tried:

//Redirect to our custom 404 page
function wf_404(){
//Check if custom 404 page exists to protect against infinite loop
   if (is_404() && get_page_by_path('/404-page/', OBJECT)){
       wp_safe_redirect(get_site_url() . '/404-page/', 404);
       exit;
   } 
}

add_action('get_header', 'wf_404');

This gives me a general browser 404 error.

Answer 1

You could copy the php/html from your singular.php/page.php to 404.php. Then replace the content loop with echo apply_filters('the_content', $page->post_content); as mrben522 suggested.

Using the code from codex as an example,

<?php
/**
 * The template for displaying 404 pages (Not Found)
 *
 * @package WordPress
 * @subpackage Twenty_Thirteen
 * @since Twenty Thirteen 1.0
 */

get_header(); ?>

<div id="primary" class="content-area">
    <div id="content" class="site-content" role="main">

        <header class="page-header">
            <h1 class="page-title"><?php _e( 'Not Found', 'twentythirteen' ); ?></h1>
        </header>

        <div class="page-wrapper">
            <div class="page-content">
                <?php 
                    $page_id = get_post(100); // change ID;
                    echo apply_filters('the_content', $page->post_content); // This is where the magic (should) happen
                ?>
            </div><!-- .page-content -->
        </div><!-- .page-wrapper -->

    </div><!-- #content -->
</div><!-- #primary -->