How to customize a 404 page in WordPress

Most WordPress themes ship a 404 page that says something like “Oops! That page can’t be found.” and not much else. Replacing it takes minutes once you know which part of your site controls it. Most failed attempts go wrong because they edit the wrong part.

“Customize 404 page” covers two jobs. One is design: what a visitor sees when a URL doesn’t exist. The other is status: what the server tells browsers and Google. This guide covers both, because a polished 404 page that sends the wrong status code is worse than the stock one.

Which method fits your site?

First, work out what kind of theme you run. Open Appearance in the dashboard. If you see Editor, you have a block theme. If you see Customize, Widgets or Menus, you have a classic theme. When a tutorial’s menu path doesn’t match your dashboard, it was usually written for the other kind of theme.

Your setup	Where the 404 lives	Code needed
Block theme	Appearance > Editor > Templates > 404	No
Classic theme	404.php in a child theme	Some PHP
Elementor Pro	Templates > Theme Builder > Error 404	No
Any setup	A plugin that assigns an ordinary Page	No

One approach doesn’t work at all: publishing a normal Page titled “404”. WordPress gives it a URL like /404/ and does nothing else with it. It only becomes the error page if a plugin or a template tells WordPress to use it. If you’re not sure which template files your theme actually uses, our guide to editing themes without losing work shows how to find out.

How to edit the 404 template in a block theme

Block themes keep the 404 page as a template you edit with blocks. You don’t need a plugin or any code.

1. Go to Appearance > Editor > Templates.
2. Open the 404 template. Recent versions list it as “Page: 404”. If your theme doesn’t include one, use Add New Template and pick the 404 option.
3. Replace the heading and message. Add a Search block and links to your homepage and your main sections. Keep the header and footer template parts so visitors can tell they’re still on your site.
4. Save, then open a URL that doesn’t exist on your site to see the result.

One detail catches developers out. Once you save a template in the Site Editor, WordPress uses that saved version instead of the theme’s file. According to the Theme Handbook, a saved template takes priority, so editing the theme’s 404.html afterwards changes nothing on screen. To go back to the file, reset the template from the Templates list. Learn WordPress has a short lesson on personalizing your 404 template if you want a walkthrough.

How to customize 404.php in a classic theme

Classic themes use a PHP file. WordPress’s template hierarchy looks for 404.php and falls back to index.php if it doesn’t exist. Don’t edit the parent theme’s copy, because the next theme update overwrites it. Put your version in a child theme. Our guide to theme customization that survives updates covers setting one up.

1. Create or activate a child theme.
2. Copy the parent’s 404.php into the child theme folder, or create a new one. You need SFTP or your host’s file manager.
3. Edit the content between the header and footer calls.
4. Upload the file and test with a nonexistent URL.

A minimal version looks like this:

<?php get_header(); ?>
<main id="primary" class="site-main">
  <h1>Page not found</h1>
  <p>This page has moved or never existed. Search the site or start from one of these pages.</p>
  <?php get_search_form(); ?>
  <ul>
    <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>">Home page</a></li>
    <li><a href="<?php echo esc_url( home_url( '/services/' ) ); ?>">Our services</a></li>
  </ul>
</main>
<?php get_footer(); ?>

Some themes keep the visible text somewhere else. In one wordpress.org support thread, the Hestia theme’s 404.php only called a theme action, and the site owner couldn’t find where “Oops!” was coming from. If your 404.php contains no text, check the theme’s options panel. You can also replace the file entirely in your child theme. If you’d rather describe the page than build it, SiteSelf handles design changes to your WordPress site like this one. It needs hosting access for a 404.php edit, and it doesn’t edit templates owned by Elementor, Divi or Beaver Builder.

How to use an ordinary page as your 404

A plugin lets you design the 404 as a regular Page in the block editor, without touching theme files. Smart Custom 404 Error Page, maintained by NerdPress, is the most widely installed option. Its WordPress.org listing shows more than 100,000 active installs.

1. Create and publish a Page with your 404 content.
2. Go to Appearance > 404 Error Page, select that Page and save.

Its listing notes three things. It doesn’t work with the “Plain” permalink structure. It sends a proper 404 status and creates no redirects. And by default, visiting the assigned Page directly returns a 404 too, so test with a made-up URL, not the Page’s own address. The changelog records a security fix in version 11.4.8 in October 2024, after NerdPress took over the plugin. Check “Last updated” and “Tested up to” before you install it.

Not every “404 plugin” does the same job. Some redirect missing URLs somewhere else instead of showing a page with a 404 status. Read what the plugin does before choosing it.

How to build a 404 page in Elementor

Elementor’s documented route is Templates > Theme Builder > Error 404. Elementor’s help center says this needs Elementor Pro. Design the template, publish it, and set its display condition to 404 pages. A draft template, or one without that condition, never appears. The official route doesn’t exist in free Elementor. The plugin method above works with any setup.

What should a good 404 page include?

Google’s Search Central guidance recommends a clear, friendly message, your site’s usual look and navigation, and links to popular content or the homepage. It also suggests a way to report the broken link. Practitioners add a search box near the message and ask you to keep the page light.

• Say what happened in plain words. “We couldn’t find that page” beats a joke the visitor has to decode.
• Put search near the top. The visitor came looking for something specific.
• Link to where people actually go. A publisher links recent articles, a service business links its services and contact page, and a store links search, categories and a few featured products.
• Keep it accessible. The usual WCAG 2.2 rules apply: a descriptive page title (2.4.2), clear headings (2.4.6), link text that makes sense (2.4.4) and a labeled search field (3.3.2).

How to test it, and why the status code matters most

Open a URL that can’t exist, such as yoursite.com/this-page-does-not-exist-123. Don’t test with the assigned Page. Check that your design shows up, then check the status code. In a terminal, run:

curl -I https://yoursite.com/this-page-does-not-exist-123

The first line should say 404. You can also open your browser’s developer tools, go to the Network tab and reload the page. If it says 200, you have a problem. Google defines a page that says “not found” but returns 200 as a soft 404, and it flags blank or nearly blank pages the same way. Google’s guidance is plain: a custom 404 page should still return HTTP 404.

Why isn’t my custom 404 page showing?

These causes are ranked roughly by how often they come up in WordPress docs and support threads. Start at the top.

1. Stale rewrite rules. Go to Settings > Permalinks and click Save Changes without changing anything. That rebuilds the rules, and it’s the first fix WordPress’s common-errors handbook gives. If it doesn’t help on Apache, check .htaccess and mod_rewrite, or ask your host. Nginx doesn’t use .htaccess at all. Our guide to adding pages and getting them seen covers this reset in more detail.
2. The wrong part was edited. A Page called “404” was published but never assigned. A saved Site Editor template is overriding the file. An Elementor template is still a draft. The plugin has no Page selected, or permalinks are set to Plain.
3. Cache or CDN. Purge your caching plugin, your host’s cache and your CDN, then test in a private window. If you use Cloudflare and nothing else works, pause it, resave permalinks, then unpause.
4. A theme or plugin conflict. In one support thread, a Sensei email template replaced the 404 template. Switch to a default theme, then deactivate plugins one at a time, preferably on staging. The steps for isolating a plugin conflict apply here too.
5. The server answers before WordPress runs. If you see your host’s branded error page instead of anything from your theme, the request never reached WordPress. Nginx try_files and Apache ErrorDocument rules live on the server. Nothing you change in the dashboard fixes them, so ask your host.

Should you redirect missing URLs instead?

Only when there is a real replacement. Google’s guidance is to return 404 when content is gone, 410 when it was removed on purpose and won’t come back, and 301 when it moved to a clear replacement. A discontinued product can point to its successor or its category. An old article can point to the updated version.

Redirecting every missing URL to the homepage is the mistake practitioners warn about most. Google may treat those redirects as soft 404s, and visitors land somewhere that has nothing to do with what they clicked. Avoid redirect chains and timed “meta refresh” redirects too. For URLs you never replaced, a helpful 404 page is the honest answer.

WooCommerce stores need two extra checks. WooCommerce’s permalink docs say the product base must not clash with the category or tag bases. Old product URLs return 404 after a permalink change unless you redirect them.