Home>Blog>Create a Custom 404 Page with Page Builder

Create a Custom 404 Page with Page Builder

If a page on your website no longer exists or if a link is incorrect, your users will see your 404 page. 404 Not Found is an HTTP response status code that means the requested resource could not be found but may be available in the future. Subsequent requests by the client are permissible. Ref: Wikipedia.

By default, your theme controls the content on your 404 page. Using 404page plugin and Page Builder by SiteOrigin, creating a custom 404 page is much quicker and easier than you might think. Adding useful links, a search form and perhaps even a contact form is a great way to engage your users and hopefully help them find the content they were looking for.

View the demo.
Download the demo JSON layout (Right click and Save As).

Required Plugins

404page – your smart custom 404 error page
Page Builder by SiteOrigin
SiteOrigin Widgets Bundle

Once Page Builder and the Widgets Bundle plugins are activated, go to PluginsSiteOrigin Widgets to activate the widgets you’d like to make use of. Not all of the widgets are activated by default.

Assigning a Custom 404 Page

Go to PagesAdd New to create your custom 404 page if you haven’t done so already. Next, with 404page plugin activated, go to Apppearance404 Error Page. Use the General: Page to be displayed as 404 page setting to choose the page to be used as your custom 404 page.

Use the drop-down menu provided to choose your page. Your page can be named anything, we chose 404 for ours but that isn’t necessary.

Editing Your Custom 404 Page

Go to Pages and edit the page you’ve chosen to be your custom 404 page. Click on the Page Builder tab to edit your page using Page Builder by SiteOrigin. If you’d like to start with our demo page, download the demo JSON layout (Right click and Save As). Click LayoutsImport/Export to import the layout.

Our custom 404 error page build in Page Builder.

Finally, test your 404 page by going to a URL you know doesn’t exist. For example http://demo.siteorigin.com/corp/nopagehere. You can also go to Appearance404 Error Page and click the Test 404 error button.

Additional Features and a Helping Hand with SiteOrigin Premium

SiteOrigin Premium is a plugin that adds additional settings and functionality to SiteOrigin widgets, Page Builder and SiteOrign themes. SiteOrigin Premium also includes our next level email support service. If you need expert advice and quick replies, consider SiteOrigin Premium.

Leave a Reply

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


  1. 2 years, 7 months ago Andrew Misplon Hi, I Work Here

    Thanks for reading. If you have any questions, please let us know in the comments below :)

  2. 2 years, 6 months ago Tori

    Hello, I just made a custom 404 page for my site using this template. It looks great! However, for some reason on my 404 page (and not on any other pages on the website), a few of my menu items say the page number instead of the name that is usually there. For example, one of my main menu items says “Pricing”, but on my 404 page it says “#49710 (no title)”. I don’t have titles on these pages because it messes up the format, so I just put the titles of the pages in the appearance > menu area under “Navigation Label”. Any ideas on why this is happening?

    • 2 years, 6 months ago Andrew Misplon Hi, I Work Here

      Hi Tori

      Thanks for posting. I’m not quite sure why your menu would be rendering differently on your 404 page. Can you perhaps send a link to your site so we can take a look? Thanks :)

      • 2 years, 6 months ago Tori

        Thanks for your response! Here is the site address: respiratoryassociates.com and then heres the 404 page: respiratoryassociates.com/404

        • 2 years, 6 months ago Andrew Misplon Hi, I Work Here

          Thanks :) I wish I knew why that was the case. Unfortunately, I don’t have any ideas at the moment. I’ll ask Alex here at SiteOrigin if he has any ideas and come back to you.. You could also try posting here: https://wordpress.org/support/plugin/404page.

  3. 2 years, 5 months ago sourabh

    After creating new page,we cannot edit this page with siteorigin page builder. we are only able to edit that page which is prebuild during demo installation.we need instant help from you.

    • 2 years, 5 months ago Andrew Misplon Hi, I Work Here

      Hi :) Thanks for giving our post a read. If you’d like instant help, it’s best to make use of email support offered as part of SiteOrigin Premium. You can find out more about SiteOrigin Premium here: Download: SiteOrigin Premium. If you’re using WordPress 5.0.2 and are seeing the Block Editor you can either insert a SiteOrigin Layout Block or you can install the Classic Editor (https://wordpress.org/plugins/classic-editor/) plugin which will make it easier to click over to the Page Builder tab. Hope that helps. If you need more in-depth assistance and would prefer not to make use of email support, please open a support thread on the forum: https://siteorigin.com/thread.

  4. 2 years, 5 months ago Megri

    Thanks for sharing. Page Builder is an amazing tool for the webmasters who have no knowledge about coding. Thanks once again.

  5. 2 years, 5 months ago NKURUNZIZA


    • 2 years, 5 months ago Andrew Misplon Hi, I Work Here

      For sure :)

  6. 2 years, 4 months ago Maz

    Hi. I have installed SiteOrigin accompanied with ProfileGrid membership plugin. Problem is, some function of ProfileGrid become non function, and user blog that submitted from profilegrid page fall into 404 error page. ;;… /blog/profilegrid_blogs/..
    Some case the blog was appeared after I edited it in pagebuilder mode. but its not consistence.

    • 2 years, 4 months ago Andrew Misplon Hi, I Work Here

      Hi Maz

      Sorry to hear about the hassle. This blog post is about creating a custom 404 page so it, unfortunately, isn’t related to the problem you’ve described. Please, open a support topic on the forum https://siteorigin.com/thread. Thanks :)

  7. 2 years, 3 months ago FM

    Hey there, thanks for this great tutorial! Everything works GREAT except for one issue: when the 404 page loads by directing to a nonexistent URL, a portion of default sidebar content also loads on the page. The 404 page is set at full width, and displays perfectly when previewed, so I’m not sure where this sidebar artifact is coming from–perhaps a template of some kind? Any help is appreciated!

    • 2 years, 3 months ago Andrew Misplon Hi, I Work Here

      Hi FM

      If your theme offers page settings or page templates, you could select full-width or no-sidebar on that page to remove the sidebar. Another option is to install Jetpack and enable Widget Visibility. Then go to Appearance > Widgets > Sidebar and create rules for all of your sidebar widgets to say “Don’t display if page = 404”. Finally, you could reach out to theme support and ask them what is the best method to remove sidebar widgets from a given page. Hope that helps.

      • 2 years, 3 months ago FM

        Thanks Andrew! The Jetpack recommendation worked just fine. Much appreciated!

        • 2 years, 3 months ago Andrew Misplon Hi, I Work Here

          Super :) Glad to hear that helped.

          All the best.

  8. 2 years, 2 months ago Peter

    I just came across this page. Thanks a lot for mentioning my plugin 404page.

    • 2 years, 2 months ago Andrew Misplon Hi, I Work Here

      Hi Peter

      It was our pleasure. Thanks for reading and for creating your useful and easy to use plugin.

      All the best :)

  9. 2 years, 2 months ago WP Methods

    Very Informative and helpful post. thanks

  10. 2 years, 2 months ago MikeWizouskiy

    Thanks for this guide, was helpful. But I still need help. Look at https://under-the-open-sky.com/404/ you see this custom 404 page? Tell me how was this made? I would like to know as I will do something similar for my website.

    • 2 years, 2 months ago Andrew Misplon Hi, I Work Here

      Hi Mike

      Thanks for reaching out.

      My recommendation would be to purchase an HTML 5 or CSS animation like that. You could try searching Envato Elements or ThemeForest for an animation you could insert into your 404 page.

      Good luck :)

      • 2 years, 2 months ago MikeWizouskiy

        Thank you for the advice. I will look into Envato Elements

        • 2 years, 2 months ago Andrew Misplon Hi, I Work Here

          For sure, hopefully, you find one you like. Cheers :)

  11. 1 year, 10 months ago Janet

    The page builder seems very good. Thank you

  12. 1 year, 10 months ago Mona

    Can you have more than one 404 and have them randomly rotate?

    • 1 year, 10 months ago Andrew Misplon Hi, I Work Here

      Hi Mona, 404page plugin doesn’t have the ability to assign multiple 404 pages and rotate them, at least as far as I’m aware.

  13. 1 year, 1 month ago Miguel Espinoza

    Hola, acabo de leer la publicación y seguí todos los pasos según se indicaba, sin embargo, no logro hacer que funcione. Me aparece la pagina 404 por defecto, de hecho no me aparece ni me barra de navegación ni footer, etc. Quería a que se debía y cual es una posible solución por favor. Estaré atento a su respuesta, muchas gracias.

    • 1 year, 1 month ago Andrew Misplon Hi, I Work Here

      Hi Miguel

      Thanks for reading.

      At Appearance > 404 Error Page, ensure that you’ve assigned the page to be displayed as your 404 page. There shouldn’t by anything else required. If you have assigned a page at Appearance > 404 Error Page and that page isn’t displaying as your 404 page, you could perhaps open a support issue with the plugin authors https://wordpress.org/support/plugin/404page/.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More