404 page is the page that a visitor would land to if they click on an invalid link on your site. Having a defined 404 page is important because visitors would bounce off and leave your site if there is no next course of action.
If you are using a generic WordPress template, you would probably need to configure the 404 page via the Theme Editor. It may pose a challenge if you are not well versed in html and CSS. Another downside is that if you use the text editor, the changes may be lost if you upgrade the theme version.
I use Thesis wordpress theme to create and definite my 404 page. Here is an example:
Above: To test how a 404 page would look like, what I did was just put in a number in between a valid url to have the page display. This site does not have a custom 404 page yet hence visitors would see a blank page with a sidebar.
To create a custom page, first, you must create a 404 page first by going to Pages > Add New as shown above. Please use the Page and not the Post format.
Write the content that you want and then hit “Publish”. After that, open the Thesis section in your Dashboard and scroll down till you see Sitewide Options> 404 page:
There would be a drop down box at the 404 for you to select the page you want. It is displayed based on the page title. Select your 404 page and then press the green button to save the changes:
After that, you can preview the results by going into an invalid page in your site or you can just refresh the invalid link that you have accessed earlier:
Viola! A customized 404 page appears and it is no longer a blank page. But wait a minute… how come the navigation bar is located on top of the header and there is a date on the post?
Personally, I prefer to have my navigation bar located beneath the header. And I do not want to include the date on my 404 page.
In order to achieve that, it is very simple…. just go back to your Dashboard> Thesis> Skin Editor. Open your Skin Editor and then select your 404 page by clicking on Page.
The default navigation bar in the template was located above the header. All I did was drag the navigation bar upwards.
At the same time, I also expanded my Content Column> Byline till I am able to see the Author, Date and Edit link. To remove the Date link, all you need to do is Shift+ drag the Date box to the Grey section as shown in the arrow below.
Remember: Shift to the Grey Box and NOT the pink box. The pink box is for you to permanently delete the function across the entire site so don’t use it.
After that, press the green Save Template. Then go back to your invalid url and preview the page again…
Now my navigation bar has moved downwards and the date has disappeared.
Above is a simple custom 404 page that at least tells visitors they are at the wrong place. I would definitely redo the 404 page again.
If you are using Thesis theme, hopefully this tutorial will help you to design your own page.