ARTICLE AD BOX
404 pages amusement erstwhile users effort to entree resources that don’t exist.
Like a misspelled URL.
Or a leafage that was deleted.
And you tin make a customized 404 leafage successful WordPress (even if you can’t code).
Why You Need a Custom 404 Page successful WordPress
Custom 404 pages tin amended the idiosyncratic acquisition by helping users find what they need.
And you tin tailor your 404 leafage to bespeak your brand. Through elements similar personalized transcript and imagery.
Take this default 404 page:
This leafage is unhelpful. And doesn’t constituent users successful the close absorption done elements similar utile links. Or a tract hunt box.
This mightiness origin radical to permission your tract and spell elsewhere. Which tin thrust up bounce rates.
The solution?
Create a customized 404 leafage that reflects your brand. And helps users determination done your tract with ease.
How to Create a Custom 404 Page successful WordPress
Here are 3 methods to marque your ain 404 leafage successful WordPress:
Option 1: Theme File Editor
Many WordPress themes travel with a premade 404 page.
However, if you’re not comfy moving successful PHP—a scripting language—consider different enactment to physique your 404 page. Like a page builder.
But if you bash privation to spell this route, you tin edit your premade 404 leafage utilizing your taxable record editor. WordPress’s taxable record exertion is simply a substance exertion that lets you edit files for your site’s theme.
To bash this, log into your site. Click “Appearance” and “Theme File Editor.”
Your taxable record exertion contains a drop-down wherever you tin prime which taxable you’d similar to edit.
It besides contains your theme’s files and a substance container with each file’s code.
Changes you marque done your kid taxable stay adjacent erstwhile you update your genitor theme. So, make a kid taxable to support immoderate changes to your 404 page.
You tin usage plugins similar the Child Theme Configurator to make a kid taxable successful a fewer clicks. Or travel WordPress’s instructions to make a kid taxable without a plugin.
Once you person a kid theme, usage an FTP lawsuit oregon your web host’s record manager to adhd files to your kid theme.
The pursuing tutorial volition amusement you however to adhd files with your site’s record manager.
To start, log successful to your big and find your record manager.
Find your 404 leafage file. It volition apt beryllium nether your basal folder (often named “/” oregon “public_html”). Then spell to “wp-content” > “themes” > “your theme.”
Our illustration has 2 404 leafage files:
- A record named 404.php for the wide format of the 404 page
- A record named content-404.php that includes the contented of the 404 leafage (like substance and images)
For our example, we’ll marque a transcript of the content-404.php file. To edit the substance and imagery for this page.
Double click this to unfastened your 404 leafage file.
Then transcript the contents into a plain substance editor. Like a notepad app connected your computer.
Next, click your kid theme’s folder and make a caller record wrong it. Name this record the aforesaid sanction arsenic your 404 leafage (in our case, “content-404.php”).
Then, paste the codification from your plain substance exertion into your caller file, and click save.
Next, edit the contents of your 404 page.
For example, we could alteration the highlighted substance (below) to thing that’s much aligned with our brand voice.
After redeeming your changes, your customized 404 leafage should present show erstwhile idiosyncratic tries to entree a leafage that doesn’t exist.
Option 2: Page Builder
Page builders similar Elementor, Beaver Builder, and Divi Builder are no-code solutions for gathering a customized 404 page.
While leafage builders often person escaped options, you whitethorn request to upgrade to the paid mentation to physique a customized 404 page.
Here’s however to marque a customized 404 leafage with Elementor.
First, instal and activate Elementor Pro.
Click “Templates” and “Theme Builder.”
Then click the “Add new” button.
A model volition popular up. Select “Error 404” from the drop-down, and springiness your template a name. Click “Create Template.”
You tin prime from premade templates. Or plan 1 from scratch.
Add elements similar text, imagery, and a tract hunt container to your 404 page. So your users tin easy navigate elsewhere.
Publish your leafage erstwhile you’re ready. Make definite the “Include” drop-down says “404 Page.” Then click “Save & Close.”
Your customized 404 leafage volition present show erstwhile idiosyncratic lands connected a URL that doesn’t exist.
Option 3: 404 Page Plugin
Plugins are different enactment to make a customized WordPress 404 leafage without code.
Some plugins to see are 404page (also listed arsenic “Smart Custom 404”) and Colorlib 404 Customizer.
We’ll usage the 404page plugin for our example.
Install and activate the plugin. Then make your 404 mistake leafage by clicking “Pages” > “Add New Page.”
Make your leafage utilizing your leafage builder. We’ve made the mistake leafage beneath with Gutenberg, WordPress’s autochthonal leafage builder.
Update the URL slug—the past portion of the URL—to thing similar “404.”
Publish your page. Then click “Appearance” and “404 Error Page.”
Head into the “General” tab and prime your 404 leafage from the drop-down. Click “Save Changes.”
Your website volition present load your customized 404 leafage erstwhile idiosyncratic navigates to a leafage that doesn’t exist.
Custom 404 Page Examples
Here are 4 customized 404 mistake leafage examples to animate your own:
Netflix
Netflix tailors their 404 leafage to fashionable shows with an representation successful the background. Which helps them beforehand their merchandise portion directing users to their homepage.
Wendy’s
Wendy’s includes a elemental crippled connected their 404 page. Which adds a spot of amusive to a leafage that is different frustrating to onshore on.
Plus, this 404 leafage has links straight beneath the game. To assistance users find what they need.
Ryanair
Ryanair leans connected their travel-based marque for their 404 leafage with a applicable representation background. They besides see links to assistance users proceed on their journey.
Cadbury
Cadbury includes links to their homepage connected their 404 page, on with a playful, applicable “Oh, Crumbs!” message. And encourages users to scope retired to fto them cognize if they proceed to brushwood issues.
Best Practices for 404 Pages
These tips volition assistance you trade up a large 404 leafage for your site. Improving the idiosyncratic acquisition and perchance reducing bounce rates.
Explain What Happened
A speedy mentation helps users recognize wherefore they got an error. So they tin troubleshoot connected their own.
For example, Microsoft's 404 leafage explains that the URL whitethorn beryllium misspelled oregon the leafage nary longer exists:
Stay connected Brand
Your 404 leafage shouldn’t consciousness disjointed from your website. So, inject your marque and property into your 404 page.
Tripadvisor uses clever connection that reflects their marque connected their 404 page:
Help Users Find What They Need
Keep users flowing done your tract by adding elements similar a hunt barroom to your customized 404 page. Or links to fashionable pages. Or links to your apical products.
This way, users tin transportation connected with their journey.
Amazon includes a hunt barroom and a nexus to their homepage wrong their 404 leafage (along with an representation of 1 of galore imaginable dogs):
How to Check Your Website for 404 Errors
Use Semrush’s Site Audit to check—and monitor—your tract for unwanted 404 errors.
Open Site Audit, participate your domain, and click “Start Audit.”
Configure the tract audit. (Our configuration guide tin assistance if you get stuck.) Click “Start Site Audit” erstwhile you’re ready.
You’ll past get a study outlining your site’s wellness on with an overview of issues, warnings, and notices.
Inside the study click “Issues.”
Under “Errors” look for “# pages returned 4XX presumption code.” Click the “# pages” portion to presumption which pages connected your tract amusement a 4XX error.
Look for pages with a 404 error. Click “View breached links” to spot which pages nexus to the leafage with the 404 error.
Remove oregon alteration these broken links to different applicable (and working) link. So that radical don’t extremity up connected a 404 leafage erstwhile they click them. And truthful hunt engines don’t brushwood imaginable crawl errors.
Then, determine however you’d similar to attack the leafage with the 404 error. You person 2 options:
Leave the Error
404 errors tin beryllium useful. As they bespeak that definite pages nary longer exist. And you mightiness privation to pass this to users.
For example, accidental you deleted a merchandise leafage due to the fact that you nary longer merchantability that product. You’d privation to permission the 404 mistake truthful users cognize the product’s leafage nary longer exists.
Redirect Traffic to a New Page
Redirects—like a 301 imperishable redirect—can automatically nonstop users from 1 leafage to different erstwhile they entree a link. You mightiness bash this if you replaced a leafage with a caller one. And you privation to nonstop users from the aged leafage to the caller page.
Imagine you changed your astir leafage from example.com/about to example.com/about-us. You’d apt privation to redirect postulation from /about to /about-us. Because the leafage inactive exists, but it has moved. And truthful you wouldn't privation to support the 404 page.
Improve Your Website Experience with a Custom 404 Page
Create a customized 404 leafage to assistance users find what they request without immoderate roadblocks.
Then, usage Semrush’s Site Audit instrumentality to show your 404 errors. And guarantee that users don’t get stuck portion browsing your site.
Try Site Audit for escaped today.
English (US)