The right way to create custom 404 error page in WordPress, create custom 404 error page easily, just two steps! with PHP example code.

How To Create Custom 404 Error Page In WordPress

Very easy, we need is_404() function and template_redirect action.

Create Custom 404 Error Page

Create new function for custom page template, in “functions.php” file, example:

function WPTime_custom_404_page_template(){
    ?>
        <!DOCTYPE html>
        <html <?php language_attributes(); ?>> <!-- not important, you can use html tag like this <html> -->
            <head>
                <meta charset="<?php bloginfo('charset'); ?>"> <!-- not important, you can custom charset -->
                <title>404 - <?php bloginfo('name'); ?></title> <!-- not important, you can use custom title -- >
                <link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); ?>/custom-404.css"> <!-- example to include css -->
                <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/custom-404.js"></script> <!-- example to include javascript -->
            </head>
            <body>
                <h2>Custom 404 Error Page</h2>
                <p>Sorry! page not found.</p>
            </body>
        </html>
    <?php
}

Now we will redirect user to our custom page template, copy function code and paste it in your “functions.php” file:

function WPTime_redirect_to_custom_404_page(){

    if( is_404() ){ // Check if error page
        WPTime_custom_404_page_template(); // Display custom 404 error page
        exit(); // IMPORTANT!
    }

}
add_action("template_redirect", "WPTime_redirect_to_custom_404_page");

Done.

Note

You can create page template in “New PHP” file and display it in “template_redirect” action, for example, create “custom-404.php” in your theme folder, and inside “custom-404.php” enter your HTML template, like this:

<!DOCTYPE html>
<html <?php language_attributes(); ?>> <!-- not important, you can use html tag like this <html> -->
    <head>
        <meta charset="<?php bloginfo('charset'); ?>"> <!-- not important, you can custom charset -->
        <title>404 - <?php bloginfo('name'); ?></title> <!-- not important, you can use custom title -- >
        <link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); ?>/custom-404.css"> <!-- example to include css -->
        <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/custom-404.js"></script> <!-- example to include javascript -->
    </head>
    <body>
        <h2>Custom 404 Error Page</h2>
        <p>Sorry! page not found.</p>
    </body>
</html>

Now in your “functions.php” file, enter this code:

function WPTime_redirect_to_custom_404(){

    if( is_404() ){ // Check if error page
        include (get_template_directory() . '/custom-404.php'); // Display custom 404 error page
        exit(); // IMPORTANT!
    }

}
add_action("template_redirect", "WPTime_redirect_to_custom_404");

Enjoy.