How to modify WordPress default 404 page ?

Default 404 in WordPress

Have you visited a dead link OR had a typo in URL and were taken to page with 404 error ? This is standard error code on web if you are trying to access something that does not exists. If it is standard, then why do you want to customise it ? Most of the times, default 404 page looks like some variation of the following in WordPress

default-sanganak-404

Where does user go from here ? Most of the time user is lost. and would just go back to another search result in Google.
What would be the logical next steps in this case ?
User might want to search the site further OR might want to check the archives OR might just want to look at latest blog posts.

Wouldn’t using that as default 404 page improve the user experience ?

404 is an opportunity to not only show your creativity and stand out from the crowd but also an opportunity to delight them by making it easy to find out the information they are looking for .

Example custom 404 for WordPress

How if you see this instead as your site’s 404 ?

wordpress-default-404-modified

How to customise 404 in WordPress

#Option 1 : Use plugin

You can use a plugin to customise your 404 page. As of date there are 851 plugins to choose from . If you need help, follow these simple 8 steps to evaluate WordPress plugins.

#Option 2 : Modify 404 theme template

It is surprisingly simple to get this done by modifying the theme template. Ideally, you would create a child theme and modify 404.php in child theme using following steps

  1. Create child theme
  2. Copy 404.php from parent theme to child theme
  3. Modify 404.php to redirect user to relevant choices e.g search, site map, category list etc.

You can quickly add a search form followed by standard loop with 5 latest or popular posts OR you can use a shortcode plugin like Symple Shortcodes which allows you to do that easily.

This is how you can do it

wordpress-custom-404-example

Update : Customize WordPress Default 404 (video)

I made a video of this process, with direct code instead of using short code as shown above.

Enjoy !

 

Leave a Reply

Your email address will not be published. Required fields are marked *