Create a Custom 404 Page with Page Builder
If a page on your website is missing or a link is broken, visitors will encounter your 404 page. The “404 Not Found” error is an HTTP status code indicating that the requested resource is unavailable but might become accessible later. Users can make further requests without restrictions.
By default, your theme controls the content on your 404 page. Using the SiteOrigin Premium 404 Page Addon 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.
Required Plugins
SiteOrigin Premium
Page Builder by SiteOrigin
SiteOrigin Widgets Bundle
Once SiteOrigin Premium, Page Builder, and the Widgets Bundle plugins are activated, go to SiteOriginPremium Addons to activate the 404 Page Addon. Click the addon’s “Settings” button to configure your custom 404 page.
Configuring Your Custom 404 Page
Go to SiteOriginPremium Addons404 Page: Settings to access the following settings:
Enable Custom 404 Page
Enable this option to activate your custom 404 error page. This setting is disabled by default.
Display
Choose between the following content display options for your custom 404 page:
– Text: Use the Text field to add your error page content directly.
– Layout Builder: Build a layout and add your error page content using the SiteOrigin Layout Builder. Requires SiteOrigin Page Builder to be activated.
– Page: Select an existing page created with Page Builder to be used as your error page. This allows you to take full advantage of Page Builder’s features and widgets.
– 404 Text Demo
– 404 Page Demo
The 404 Page Addon also provides options to customize the design of your 404 page, including the background color and image, content container styling, heading font and color, and text font and color.
Testing Your Custom 404 Page
Finally, test your 404 page by going to a URL you know doesn’t exist, for example, https://demo.siteorigin.com/premium/no-page-exists-here.
With the SiteOrigin Premium 404 Page Addon, you can easily guide visitors to the right content, even when they encounter a 404 error. Build an engaging, useful custom 404 page using SiteOrigin Premium today.
This post was originally written for the Smart Custom 404 error page [404page] plugin, which has since been retired. The SiteOrigin Premium 404 Page Addon now offers the same functionality and much more.
Thanks for reading. If you have any questions, please let us know in the comments below :)
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?
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 :)
Thanks for your response! Here is the site address: respiratoryassociates.com and then heres the 404 page: respiratoryassociates.com/404
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.
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.
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.
Thanks for sharing. Page Builder is an amazing tool for the webmasters who have no knowledge about coding. Thanks once again.
THX!
For sure :)
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.
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 :)
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!
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.
Thanks Andrew! The Jetpack recommendation worked just fine. Much appreciated!
Super :) Glad to hear that helped.
All the best.
I just came across this page. Thanks a lot for mentioning my plugin 404page.
Hi Peter
It was our pleasure. Thanks for reading and for creating your useful and easy to use plugin.
All the best :)
Very Informative and helpful post. thanks
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.
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 :)
Thank you for the advice. I will look into Envato Elements
For sure, hopefully, you find one you like. Cheers :)
The page builder seems very good. Thank you
Can you have more than one 404 and have them randomly rotate?
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.
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.
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/.
Answer to Tori’s Query
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?
Here’s how to solve that problem:
Firstly, any time you don’t add a title, WordPress will end the title space and permalink with a number. You need a title because if you ever need to find that page in your index, you’ll have a difficult time without a title. So, add the title, then edit/change the Permalink below it to agree. (If you don’t change the Permalink Google will lose it and nearly everyone will lose it!) Then scroll down your page past what you’ve written, find Hide Title and check mark there. Now you’ll have the page you wrote, the title is missing and you can add your own, center it or whatever you want to do there. StepheN
Hi Stephen, thanks for taking the time to reply. All the best with your website!
Hi. As the plugin 404page – your smart custom 404 error page has been retired in october 2023, have you any suggestion for an replacement plugin? I really want to fresh up my 404-page. Thanks, Kjetil
Hi Kjetil. Thanks for letting us know about the discontinuation of Smart Custom 404 error page. We’re still using the plugin on our Corp demo without issue (https://demo.siteorigin.com/corp/nopagehere). Unfortunately, I don’t have a recommendation for an alternative at the moment but for now Smart Custom 404 error page seems ok. We’ll be introducing a 404 Addon to SiteOrigin Premium quite soon so that’ll be anther option. Please let us know how you get on.