Before you start: As with all back end changes, we recommend that you backup your site before creating your custom 404 message, in case of any mistakes along the way.

Creating a Basic Message

1. On your WordPress Dashboard, go to 'Appearance' and then 'Editor'

2. Under the list of templates on the right hand side of your screen, select '404 Template'. You'll then be presented with the error page's template.

3. Find the line: <h1 class="page-title"><?php _e( '[default error message title]', '[theme name]' ); ?></h1>

4. Change your error headline to match your own personalised headline. If you don't want your 404 message to have a headline then simply delete the line.

5. Next, find the line: <p><?php _e( '[default error message text]', '[theme name]' ); ?></p>

6. Insert your own personalised message instead of the default error message text.

7. Hit 'Update'

And voila - once you've refreshed your page it should now contain your custom text! However that's just the basics: what about adding your own imagery to the message?  

Adding an image:

1. Upload the image which you'd like to use in your 404 page to the Media Image Library. You'll need to make a note of the image URL for later

2. Visit your 404 page template and find the line of code from earlier, labelled: <h1 class="page-title"><?php _e( '[default error message title]', '[theme name]' ); ?></h1>

3. Underneath this line, add the following line of code: <img src="" alt="" height="XXX" width="XXX"/>

4. Replace with the URL of your image, and replace with the alt text you wish to display.

5. Customise the size to your image to your specific requirements.

6. Hit 'Update'

Your image will now appear directly underneath the page's title. To move the image elsewhere on your page just delete the code, rewrite it on a different line and hit 'update' again. If you aren't used to coding, it may take a bit of trial and error to get the image in the exact position you want it.

Creating the "Go Back" link:

Lots of WordPress themes don't include a "Go Back" link on their default 404 page, so the user has to use the browser to return. This might sound like a trivial difference, but it's actually very important: a annoyed user may not bother with the extra effort of navigating through the browser.

To create a "Go Back" link, simply add the following code within the content tags of the 404 Template Editor:

<script> document.write('<a href="' + document.referrer + '">Go Back</a>'); </script>