{"id":139794,"date":"2018-10-23T10:00:59","date_gmt":"2018-10-23T15:00:59","guid":{"rendered":"https:\/\/getflywheel.com\/?p=30143"},"modified":"2025-05-13T15:50:37","modified_gmt":"2025-05-13T20:50:37","slug":"custom-404-page-wordpress-child-theme-how-to","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/custom-404-page-wordpress-child-theme-how-to\/","title":{"rendered":"How to Make a Custom 404 Page in a WordPress Child Theme"},"content":{"rendered":"\n

No matter how well-designed and architected your website is, users will likely encounter a 404 page at some point.<\/p>\n\n\n\n

It can be something as simple as typing in a URL with a spelling error. For example, if you have a contact page found at www.website.com\/contact<\/strong> and someone tries to land on www.website.com\/contacts<\/strong>, there\u2019s a good possibility they\u2019ll be redirected to the 404 page.<\/p>\n\n\n\n

Also, website content adjustments may not always account for pages that could have been moved without links being redirected. Hopefully, this experience doesn\u2019t happen too often to your users, but when it does, it\u2019s an opportunity to offer help and make something unique to your brand.<\/p>\n\n\n\n

Make sure to check out our guide to creative 404 pages<\/a> for some design tips. Design can be anything from serious to funny, text-heavy or minimalist, or somewhere in between, as long as it suits your brand.<\/p>\n\n\n\n

Below are a couple of our favorites. They\u2019re good examples of how creativity is used in the design of the page.<\/p>\n\n\n\n

Figma<\/a><\/h2>\n\n\n\n
\"figma<\/a><\/figure>\n\n\n\n

Figma uses a simple 404 page, but the graphic is very fitting with the vector points. We like how simple and bold it is; it\u2019s really all that is needed..<\/p>\n\n\n\n

MailChimp<\/a><\/h2>\n\n\n\n
\"mailchimp<\/a><\/figure>\n\n\n\n

The design is always fun on the MailChimp site, especially with the recent redesign. It has an element of humor in both the text and illustration.<\/p>\n\n\n\n

Creating a WordPress custom 404 page<\/h2>\n\n\n\n

There are several ways to create a WordPress custom 404 page for your website, including plugins, Full Site Editing (FSE), and manually coding the page in a child theme. We\u2019ll cover plugins and FSE briefly before we dive into manual coding.  <\/p>\n\n\n\n

Plugins for WordPress custom 404 pages<\/h3>\n\n\n\n

The plugin ecosystem is one reason WordPress is so flexible. If you can imagine it, there\u2019s probably at least one plugin for it. Some redirection plugins may include the ability to create custom 404 pages for WordPress, but there are also plugins that make it their focus. We\u2019ve included a selection of them below. While this is by no means a complete list, it should help you get started. <\/p>\n\n\n\n

Smart Custom 404 Error Page<\/a> helps users create branded 404 pages via the WordPress Customizer, offering pre-built templates and basic tools to redirect visitors or add search functionality.<\/p>\n\n\n\n

Custom 404 Pro<\/a> is designed for advanced users, featuring A\/B testing, detailed analytics, and granular control over 404 page design to optimize user retention after broken-link encounters.<\/p>\n\n\n\n

Colorlib 404 Customizer<\/a> focuses on visually appealing, mobile-friendly error pages through intuitive drag-and-drop editing and modern templates, making it a good choice for beginners seeking polished designs without technical complexity.<\/p>\n\n\n\n

Using Full Site Editing to create WordPress custom 404 pages<\/h3>\n\n\n\n

Creating a custom 404 page with FSE in WordPress leverages block themes and the Site Editor to design a cohesive error page that aligns with your site\u2019s overall style. This method requires a block theme, as the Site Editor (where template editing happens) is exclusive to block-enabled themes. We\u2019re using the Twenty Twenty-Five theme for purposes of illustration, but this basic method should work with any block theme. <\/p>\n\n\n\n

The first step is to edit or create the 404 template. In the WordPress admin, navigate to Appearance > Theme<\/strong>, and click Customize<\/strong> on your active theme. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Next, navigate to Templates<\/strong> and select the 404 template (or create one if your theme doesn\u2019t include it). Use blocks (e.g., headings, images, buttons, search bar) to craft a user-friendly page, ensuring it matches your site\u2019s design.
<\/p>\n\n\n\n

\"A<\/figure>\n\n\n\n

If you\u2019re building the template from scratch, add contextual elements like a “Return Home” button, suggested content links (manually or via a Query Loop<\/a> block), or a search form. Note that if you\u2019re using an existing template in your theme, it may already have some of these features.\u00a0<\/p>\n\n\n\n

Next, customize typography, spacing, and colors using block settings while maintaining responsiveness across devices. Don\u2019t forget to save your changes. <\/p>\n\n\n\n

Finally, preview the page and test by visiting a broken or nonexistent URL (e.g., yoursite.com\/404-test). Clear caching plugins if the old 404 page persists.<\/p>\n\n\n\n

\"A<\/figure>\n\n\n\n

Building a WordPress custom 404 page manually<\/strong><\/h2>\n\n\n\n

Customizations to your WordPress theme should generally be done in a child theme<\/a>. This prevents modifications from being overridden by updates to the parent theme, ensures you don\u2019t break your theme, and keeps your custom code organized.    <\/p>\n\n\n\n

Also, remember to do this in a test or staging environment<\/a> before you roll it out to your production site. When theme files are being changed, there\u2019s always the possibility of syntax errors that may bring the site down.<\/p>\n\n\n\n

1. Create 404.php<\/h3>\n\n\n\n

The first step is to create a new file in your child theme called\u00a0404.php<\/code>. This file should be created in the child theme\u2019s root directory (e.g., \/wp-content\/themes\/your-child-theme\/<\/code>). You can also copy over an existing 404.php<\/code> file if your parent theme has one.<\/p>\n\n\n\n

2. Edit 404.php<\/h3>\n\n\n\n

Pasting the following code into your file will create a basic 404 page with text and a spot for an image.\u00a0<\/p>\n\n\n\n

<?php get_header(); ?>\n\n<div id=\"main-content\">\n  <div class=\"container\">\n    <div id=\"content-area\" class=\"clearfix\">\n      <div id=\"left-area\">\n        <article id=\"post-0\" <?php post_class('post-not-found'); ?> aria-label=\"<?php esc_attr_e('Page not found', 'text-domain'); ?>\">\n          <?php\n          \/\/ Using attachment ID from Media Library\n          $image_id = 123; \/\/ \u2190 REPLACE THIS NUMBER\n          if ($image_url = wp_get_attachment_image_url($image_id, 'full')) :\n          ?>\n            <img \n              src=\"<?php echo esc_url($image_url); ?>\" \n              alt=\"<?php esc_attr_e('404 Error Image', 'text-domain'); ?>\"\n              width=\"600\" \n              height=\"400\"\n            >\n          <?php else : ?>\n            <p><?php esc_html_e('Error: Image not found', 'text-domain'); ?><\/p>\n          <?php endif; ?>\n          \n          <h1><?php esc_html_e('Error 404: Page Not Found', 'text-domain'); ?><\/h1>\n          <h2><?php esc_html_e('Oops, this page cannot be found.', 'text-domain'); ?><\/h1>\n          <?php get_search_form(); ?>\n          <a href=\"<?php echo esc_url(home_url('\/')); ?>\" class=\"button\">\n            <?php esc_html_e('Return Home', 'text-domain'); ?>\n          <\/a>\n        <\/article>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<?php get_footer(); ?>\n<\/code><\/pre>\n\n\n\n
At this point, our WordPress site is displaying our custom 404 page, but there\u2019s no image and the text is dull and generic.\u00a0
<\/p>\n\n\n\n
\"A<\/figure>\n\n\n\n
To set an image, we need to modify the file, specifically this part: $image_id = 123; \/\/ \u2190 REPLACE THIS NUMBER<\/code>. You can use any image from your WordPress Media Library. There are various ways to find the image_id<\/code>, but the easiest way is to click on the image in the Media Library and look at the URL. It should say something like ?item=9<\/code> right at the end. That number is the image_id<\/code>.<\/p>\n\n\n\n
Changing the text is much simpler. Just replace the text that\u2019s currently in the file (i.e., Error 404: Page Not Found<\/code> or Oops, this page cannot be found<\/code>) with your desired text.<\/p>\n\n\n\n
\"The<\/figure>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
A well-crafted 404 page is an opportunity to retain visitors, reinforce your brand\u2019s identity, and turn a frustrating experience into a helpful one. Whether you choose plugins for simplicity, Full Site Editing for seamless integration with block themes, or manual coding in a child theme for full creative control, the goal remains the same: guide users back to your content with clarity and style.<\/p>\n\n\n\n
By following the steps outlined above, you can ensure your WordPress site\u2019s 404 page aligns with your brand\u2019s tone, whether playful, professional, or minimalist. Remember to prioritize usability with elements like a search bar, home button, or suggested content links. Test thoroughly, keep design responsive, and don\u2019t shy away from injecting personality. After all, even a dead end can leave a lasting impression. With these strategies, your custom 404 page will not only fix a broken moment but elevate your site\u2019s user experience.<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
No matter how well-designed and architected your website is, users will likely encounter a 404 page at some point. It can be something as simple as typing in a URL with a spelling error. For example, if you have a contact page found at www.website.com\/contact and someone tries to land on www.website.com\/contacts, there\u2019s a good…<\/span><\/span><\/p>\n","protected":false},"author":1,"featured_media":140899,"template":"","resource-topic":[1396,912],"resource-role":[1397,896],"resource-type":[916],"class_list":["post-139794","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\nHow to Make a Custom 404 Page in a WordPress Child Theme<\/title>\n<meta name=\"description\" content=\"Learn how to create a custom 404 page for your WordPress site. No matter how well-designed your website is, users will likely encounter one at some point.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Make a Custom 404 Page in a WordPress Child Theme\" \/>\n<meta property=\"og:description\" content=\"Learn how to create a custom 404 page for your WordPress site. No matter how well-designed your website is, users will likely encounter one at some point.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/custom-404-page-wordpress-child-theme-how-to\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-13T20:50:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2018\/10\/custom-404-pages-wordpress_1200x627.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"627\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2018\/10\/custom-404-pages-wordpress_1200x627.png\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/custom-404-page-wordpress-child-theme-how-to\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/custom-404-page-wordpress-child-theme-how-to\/\",\"name\":\"How to Make a Custom 404 Page in a WordPress Child Theme\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2018-10-23T15:00:59+00:00\",\"dateModified\":\"2025-05-13T20:50:37+00:00\",\"description\":\"Learn how to create a custom 404 page for your WordPress site. No matter how well-designed your website is, users will likely encounter one at some point.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/custom-404-page-wordpress-child-theme-how-to\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/custom-404-page-wordpress-child-theme-how-to\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/custom-404-page-wordpress-child-theme-how-to\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Make a Custom 404 Page in a WordPress Child Theme\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085\",\"name\":\"WP Engine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"caption\":\"WP Engine\"},\"sameAs\":[\"https:\/\/wpengine.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Make a Custom 404 Page in a WordPress Child Theme","description":"Learn how to create a custom 404 page for your WordPress site. No matter how well-designed your website is, users will likely encounter one at some point.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"How to Make a Custom 404 Page in a WordPress Child Theme","og_description":"Learn how to create a custom 404 page for your WordPress site. No matter how well-designed your website is, users will likely encounter one at some point.","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/custom-404-page-wordpress-child-theme-how-to\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2025-05-13T20:50:37+00:00","og_image":[{"width":1200,"height":627,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2018\/10\/custom-404-pages-wordpress_1200x627.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_image":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2018\/10\/custom-404-pages-wordpress_1200x627.png","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/custom-404-page-wordpress-child-theme-how-to\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/custom-404-page-wordpress-child-theme-how-to\/","name":"How to Make a Custom 404 Page in a WordPress Child Theme","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2018-10-23T15:00:59+00:00","dateModified":"2025-05-13T20:50:37+00:00","description":"Learn how to create a custom 404 page for your WordPress site. No matter how well-designed your website is, users will likely encounter one at some point.","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/custom-404-page-wordpress-child-theme-how-to\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/custom-404-page-wordpress-child-theme-how-to\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/custom-404-page-wordpress-child-theme-how-to\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"How to Make a Custom 404 Page in a WordPress Child Theme"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085","name":"WP Engine","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","caption":"WP Engine"},"sameAs":["https:\/\/wpengine.com"]}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2018\/10\/custom-404-pages-wordpress_343x245.png","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Designer, Developer","topic":"<strong>Topics:<\/strong> Design, Performance","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/139794","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/140899"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=139794"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=139794"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=139794"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=139794"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}