The “404 Page Not Found” template is the page that is displayed when a user tries to access a page on your website that does not exist. Customizing this template allows you to create a more user-friendly and branded error page for your visitors.
To customize the “404 Page Not Found” template in WordPress, you can create a new template file called 404.php in your theme’s directory. Here’s an example of how you can structure this file:
<?php
/**
* The template for displaying 404 pages (Not Found)
*
* @package WordPress
* @subpackage Your_Theme
* @since Your_Theme 1.0
*/
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<section class="error-404 not-found">
<header class="page-header">
<h1 class="page-title"><?php esc_html_e( 'Oops! That page can’t be found.', 'your-theme' ); ?></h1>
</header><!-- .page-header -->
<div class="page-content">
<p><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try a search?', 'your-theme' ); ?></p>
<?php get_search_form(); ?>
</div><!-- .page-content -->
</section><!-- .error-404 -->
</main><!-- #main -->
</div><!-- #primary -->
<?php get_footer(); ?>
In this example, we have a basic structure for the 404 template. It includes the header and footer of your theme, and a section for the 404 content. The content includes a title and a message, along with a search form.
You can customize the HTML and CSS in this template to match your theme’s design. You can also add additional elements or functionality as needed.
Remember to replace 'your-theme' with your actual theme’s text domain, and modify the content and layout to fit your specific needs.
By customizing the “404 Page Not Found” template, you can provide a more personalized and helpful experience for your visitors when they encounter a page that doesn’t exist on your website.
Examples
Example 1: Customizing the “404 Page Not Found” Template
This use case demonstrates how to customize the “404 Page Not Found” template in WordPress. By creating a custom template, you can design a unique and user-friendly error page for your website visitors.
<?php
/**
* Custom 404 template
*/
function wpsnippets_custom_404_template() {
if ( ! is_404() ) {
return;
}
get_header();
// Custom HTML and CSS for the 404 page
?>
<div class="error-404">
<h1>Oops! Page Not Found</h1>
<p>The page you are looking for does not exist.</p>
</div>
<?php
get_footer();
}
add_action( 'template_redirect', 'wpsnippets_custom_404_template' );
In this code example, we create a custom 404 template by hooking into the template_redirect action. Inside the function, we check if the current page is a 404 error page using the is_404() function. If it is, we include our custom HTML and CSS to display a user-friendly error message. The get_header() and get_footer() functions are used to include the header and footer templates respectively.
Example 2: Adding Dynamic Content to the “404 Page Not Found” Template
This use case demonstrates how to add dynamic content to the custom “404 Page Not Found” template. By displaying related posts or a search form, you can help users find the information they are looking for even if they land on a non-existent page.
<?php
/**
* Custom 404 template with related posts
*/
function wpsnippets_custom_404_template() {
if ( ! is_404() ) {
return;
}
get_header();
// Custom HTML and CSS for the 404 page
?>
<div class="error-404">
<h1>Oops! Page Not Found</h1>
<p>The page you are looking for does not exist.</p>
<h2>Related Posts</h2>
<ul>
<?php
// Display related posts
$related_posts = get_posts( array(
'posts_per_page' => 5,
'post_type' => 'post',
'post_status' => 'publish',
'orderby' => 'rand',
) );
foreach ( $related_posts as $post ) {
setup_postdata( $post );
?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php
}
wp_reset_postdata();
?>
</ul>
</div>
<?php
get_footer();
}
add_action( 'template_redirect', 'wpsnippets_custom_404_template' );
In this code example, we enhance the custom 404 template by adding a section for related posts. Inside the <h2>Related Posts</h2> tag, we use the get_posts() function to retrieve a list of related posts. We then loop through the posts using foreach and display their titles and permalinks. The wp_reset_postdata() function is used to restore the global post data after the loop.
Example 3: Redirecting “404 Page Not Found” to Homepage
This use case demonstrates how to redirect the “404 Page Not Found” to the homepage of your WordPress site. Instead of displaying an error message, this approach ensures that users are automatically redirected to a valid page, improving their browsing experience.
<?php
/**
* Redirect 404 to homepage
*/
function wpsnippets_redirect_404_to_homepage() {
if ( is_404() ) {
wp_redirect( home_url(), 301 );
exit;
}
}
add_action( 'template_redirect', 'wpsnippets_redirect_404_to_homepage' );
In this code example, we use the template_redirect action to check if the current page is a 404 error page. If it is, we use the wp_redirect() function to redirect the user to the homepage of the site. The home_url() function retrieves the URL of the homepage, and the 301 parameter indicates a permanent redirect. The exit statement is used to stop further execution of the script and ensure the redirect takes effect.