HomeUncategorizedCreating Custom WordPress 404 Error Pages

Nothing too much going on just yet. This is just some boilerplate code to get your page set up. It brings in the WordPress header, footer, and sidebar just like any other page in your theme. In the middle I added a little bit of text, apologizing to the user for the error, and suggesting they try searching for the content they want. Making sure a search form is accessible from your 404 page is essential and a good start, but we can do better. A lot better.

What Content Should Go Into Your 404 Page

In order to determine what content you should add to your 404 page, you first have to assess what kind of site you are running. Your goal is to get the user to relevant content quickly without overloading them with too many choices. Search is useful, but if you’re doing things right, there will be a search bar on every page on your site. On your 404 page, you have to narrow things down a bit.

If you, for instance, are running a blog, then it might be good to provide a list of recent posts. If your site showcases a product, you can direct users to the feature list or FAQ. Or it might be best to simply provide a way for users to contact you if they ran into a problem. Try to get into the mind of your users to figure out what the most likely page to direct them to is. And if all else fails, use analytics to determine what your most popular pages are, and direct users there.

GitHub, for instance, keeps things very simple. Their 404 page has a huge search bar which searches their entire site. Below that, they have included three links to Contact Support or get the status of GitHub, guiding their users to a new page.


Dropbox takes a similar approach, directing users to areas of the site where they can get support, or back to the home page. Logical options, but not too many.


The New York Times takes a more comprehensive approach. In addition to a search bar and a contact link, they also provide a list of recent posts that are particularly popular, hoping to get the reader interested again.


You’ll also want to add your brand’s style to the page so users feel a little more at ease. Elegant Themes, for instance, has a expressive picture on their 404 pages that let users know they feel their pain. Their main navigation is enough to direct users wherever they want to go.


The key takeaways here are:

Once you’ve figured out how what you want to put on the page, the next step is to actually implement it. Rather then re-invent the wheel, and hardcode all of our additions from scratch, we are going to use a built-in WordPress feature that has been around for quite a while: the Widget.

Adding a 404 Widgetized Sidebar

A strategy I saw first proposed by Justin Tadlock, we can use widgets to our advantage when constructing our 404 pages. For those that are unfamiliar, widgets are blocks of content that can be added through a drag and drop interface in the WordPress admin. There are different widgets for different features, such as Recent Posts, plain text, and an RSS feed. Some are included with WordPress and others bundled with plugins and themes. Elegant Themes, for instance, gives you access to a few extra widgets. Widgets are generally placed in sidebars, but they can actually go anywhere on your site.

In other words, most of the building blocks of a solid 404 page come in the form of widgets. If we set up a separate widget area just for our 404 page, then we can easily add images, text and other content in a simple, visual interface, and make changes on the fly.

Setting up the Widget Area

The first thing we need to do is register a widget area so we can begin using it. Luckily, Elegant Themes makes it dead simple to add new widget areas to WordPress. All you have to do is go to Appearance -> Widgets in the WordPress admin. At the bottom of the right sidebar, you’ll see a box which lets you create new Widget Areas. Simply enter in the name “404″ in the provided text field, and then click the Create button. Just like that, a new widget area will be added that you can start using right away.


Just type in the name of your widget

If you aren’t using a theme from Elegant Themes, you’ll have to add a widget with WordPress’ register_sidebar function. This code will need to be added to the functions.php file of your child theme. If you don’t have one, simply create a file named “functions.php” in your child theme’s directory, and add the following code:

function widget_area_404() {

	register_sidebar( array(
		'name' => '404 Page',
		'id' => '404',
		'description'  => __( 'Widgets placed here will be shown on the 404 Not Found.' ),
		'before_widget' => '
', 'after_widget' => '
', 'before_title' => '

', 'after_title' => '

', ) ); } add_action( 'widgets_init', 'widget_area_404' );

This sets up a simple function which registers our sidebar with WordPress and adds some default HTML.

We can start adding widgets to this area in the WordPress admin, but they won’t show up on our page just yet. For that, we have to add our new widget area to the 404 page.

Adding the Widget Area to the Page

Let’s go back to our 404.php file. Right underneath the block of text we added, we are just going to add a single line of code:

Dynamic_sidebar is a function provided by WordPress which allows you to display a widget area. Simply pass it a name, and any widgets in a widget area will be automatically displayed wherever the code was placed. Now it’s time to start adding to the page.

Adding Widgets to the Page

With our widget area all set up, the only thing left to do is actually start adding content. Login to the WordPress dashboard and navigate again to Appearance -> Widgets in the menu. You will see your new 404 Page Widget Area on the right side. On the left side, you will see a list of widgets you can use.

My theme already includes a search bar and navigation in the header and search in the sidebar, so I don’t need to add either of those elements. If your theme doesn’t include that, it would be a good idea to add a search widget.

Next, we’ll add some useful links. Let’s say I’m running a blog. I want to show a few recent posts so users can quickly navigate to the content they were trying to find. Simply drag and drop the “Recent Posts” widget to the 404 box and change the settings to match your taste. For me, I gave it a simple title and added 3 posts.

Configuring my recent posts widget

Configuring my recent posts widget

Next, I want to add a simple line of text with a link to my contact page. For that, I would most likely want to use the Text widget, which accepts plain text and HTML. I can drag the Text Widget to the 404 section, and add a very small block of text:

Can't find what you're looking for? Visit my Contact Page to get in touch right away.

You can also use the Text Widget to add an image that makes the page a little more approachable. In the text widget, leave the title field blank, and use HTML to link the image up.

404 Not Found

Make sure to replace “https://yoursite.com/images/404.png” with a link to the image you want to use.

If you are looking to add a few links, similar to GitHub’s approach, you may also want to consider setting up a custom menu, and adding it with the “Custom Menu” widget.

What you decide to add to your 404 page is up to you, but whatever you are trying to add, there is probably a widget out there that can help you. You can use bundled Elegant Themes “About Me” widget, for instance, in order to share some information about yourself. Simply link up a bio image and add a few sentences about who you are.

When you add content, just make sure that you keep it concise. Give users a few different ways to access your most important content, maybe add a brand image, and then get out of the way. With just a few sentences and a couple of links, you can ensure that users are getting a lot more out of your error page.

My 404 page is looking quite a bit better, and has all of the information my visitors need.

A Final Trick

I’ll leave you with a final pro-tip for those that want to experiment a bit. WordPress gives you access to quite a few query variables that can be accessed on any page. One of these variables is called “name” and contains the fragment of the URL after your site URL. So, if a user types in https://yoursite.com/404, the name query variable would return “404″. This can be useful to you in a number of ways.

The simplest example is to just inform users of the page they were trying to visit, so they can check it for a misspelling or error. On our 404.php page, let’s first retrieve this query variable. At the top of the page, just under the get_header function, store the name query variable.

Then, we can change the Page Not Found header to include this information for users.

Now users will be informed of the link they were trying to visit right away.

Of course, this is just one idea. There is a lot more that can be done with this particular variable, like serving up search results based on the page’s URL, or using it to try and guess what the page might be. As you are adding content to your 404 page, it is worth keeping this in the back of your mind in case there’s a situation where it would help.

The 404 page is far from the most important page on your site, but if you put a little thought into it you can enhance the experience for your visitors, and make sure they stick with your site even if they receive an error. Hopefully, this is enough to get you started.

The post Creating Custom WordPress 404 Error Pages appeared first on Elegant Themes Blog.


Creating Custom WordPress 404 Error Pages — No Comments

Leave a Reply

HTML tags allowed in your comment: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Website Design by Larry Bartley, Image1Plus