Great Looking Custom 404 Page in Oxygen

by 
mcampagnini
 on 
March 29, 2019

Great Looking Custom 404 Page in Oxygen

Creating a custom 404 page in Oxygen and WordPress should only take a few minutes and will help users deal with misspelled URL's, deleted content (read our article on 301 Redirects), or old links. 

How does a 404 Status Code affect SEO?

Fortunately, a 404 Status Code does not affect your SEO Ranking. It will, however, affect your user experience in a negative way. Any incoming links from external sites should be 301'd to a new relevant page. Any deleted content should also be redirected to an appropriate url. This will help your users have continuity in navigating your page.

What is a 404?

A 404 status code (wiki) tells the browser that the requested url, media, favicon, or script was not found on the server. By default, the 404 error page is very generic looking and does not retain the branding of the parent site.

By creating your own custom 404 in WordPress, you can tell the user the page does not exist and provide them with a suggestion on where to go.

How to Create a Custom 404 Page in Oxygen

Create a custom 404 page in Oxygen is as straightforward as it gets. In two steps you can create a stunning 404 page that will guide your users to an alternate option. Many times, 404 pages are created with a little humor, check out this list of creative 404 pages.

Step One: Create a New Template

To start, in your WordPress dashboard, go to Oxygen, followed by Templates, and finally Add a New Template. Give your template a name, publish the new template or save it as a draft, then click the big blue Edit with Oxygen button.

Step Two: Design your 404 Page

Using Oxygen Builder as normal, design your custom 404 page and provide some direction for your users. I recommend adding a search field, popular blog posts, or a call to action. Give your visitors a few suggested links so they can get back on track and stay on your domain. The average time a user spends on your website is a factor in page ranking, do your best to keep them there!

Other Important Templates

In addition to the 404 page, you should also build the following:

  • A Blog Post Index Page to display all of your posts
  • A Search Results page if you have a search bar
  • A Template for all Pages and Posts that include your header and footer.

Following the Video?

The SVG graphics below were used in our 3.5 minute video to create a custom 404 page in Oxygen with the CSS clip-path property. If you are not using Oxygen, the SVG code can still be pasted into your web design and the CSS can be placed in your default CSS file.

404 SVG Image - Large

The SVG code on the right is for a large 404 clip-path for you to use. The size of this SVG is 1000px wide and 400px tall.

404 SVG Image - Small

The SVG code on the right is for a small 404 clip-path for you to use. The size of this SVG is 400px wide and 170px tall.

Great Looking Custom 404 Page in Oxygen Conclusion

Creating a custom 404 Page in Oxygen and WordPress is a simple step, no website should be built without one. Think about your user and provide a seamless experience even if they stumble across a bad URL. Interested in checking your own site for bad links? Use the W3C Link Checker for a detailed report on link health. Similar features are available from the Google Search Console and various SEO Plugins.

Did you find this post helpful?

SmugBits specializes in WordPress development in Chester County, Pennsylvania. Check out our other posts about WordPress, Oxygen, Plugins and more. Follow us on Facebook or Subscribe to us on YouTube!

Posted by 
mcampagnini
on 
March 29, 2019
SmugBits provides web design and development services from southeastern Pennsylvania. Contact us to find out more.

One comment on “Great Looking Custom 404 Page in Oxygen”

Leave a Reply

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

About Us

SmugBits is all about web development and related fields. From web pages to web apps, we are always following the pursuit of learning something new and exciting. Along our adventure, we publish reviews, tutorials, and other bits of information we find along the way.

© 2019 SmugBits. All Rights Reserved.
Share This