404 Page

The 404 Page Addon replaces your theme’s “page not found” screen. When a visitor opens an address that doesn’t exist on your site, they see your own message, a layout you build, or a page you choose.

Demos: Text display and Page display.

Requirements

Go to SiteOriginPremium Addons and activate 404 Page.

Set Up Your 404 Page

  1. Go to SiteOriginPremium Addons.
  2. On the 404 Page card, click Settings. The Addon Settings dialog opens.
  3. Turn on Enable Custom 404 Page.
  4. Select a Display and add your content.
  5. Click Save.

To check the result, open an address that doesn’t exist on your site, for example /no-page-here/. Everyone sees the custom 404 page, including logged-in users. The server still sends a 404 status code, so search engines know that the address doesn’t exist.

Settings

Enable Custom 404 Page
Shows your custom 404 page instead of the theme’s. Default: off.

Display
Where the content comes from. Default: Text.

  • Text: the message in the Text field.
  • Layout Builder: a layout you build with Page Builder rows and widgets. This option shows only when Page Builder and the Widgets Bundle are active.
  • Page: a page from your site.

Text and Layout Builder show the content in a box on its own screen, without your theme’s header, footer or sidebar. Your theme’s styles still load. The Design settings style the screen. Page shows the chosen page with your theme’s page template, so the header, footer and sidebar stay.

Title
The browser tab title for the Text and Layout Builder displays. Default: 404 Not Found – followed by your Site Title. At the moment, the form shows this field only when Display is Page, and the Page display uses the page’s own title. To change the title for Text or Layout Builder, select Page, edit Title, then select your display again and click Save.

Content
Shows when Display is Layout Builder. Add rows and widgets as you do in Page Builder.

Page
Shows when Display is Page. Click Select Content, type part of the page title, and select the page.

Text
Shows when Display is Text. A visual editor for your message. It starts with a sample message that begins “Page Not Found”. Heading tags in the text use the Heading design settings.

The Assigned Page

When you use the Page display, the page you select gets the label SiteOrigin 404 Page in the Pages list. When you edit it, the SiteOrigin Premium box shows “You’re editing the assigned 404 error page.” The page also stays at its own address, so keep it out of your menus.

Design

The Design section shows when Display is Text or Layout Builder. Click a group to open it.

Body

Background Color
The color of the whole screen. Default: #ffffff.

Background Image
An image that covers the whole screen, behind the content box. Default: none.

Background image opacity
Shows when you select a background image. Values from 10 to 99 set the image opacity in percent, so the Background Color shows through. Default: 100. At the moment, 100 shows the image at 10% opacity. For a full-strength image, set 99.

Content Container

The content container is the box that holds your text or layout.

Margin
The space around the box: top, right, bottom and left. Default: 30px 0px 0px 0px.

Box Shadow
Turn on to add a shadow to the box. Default: off. When it is on, you can set:

  • Color: default rgba(0, 0, 0, 0.07).
  • Horizontal Offset: default 0.
  • Vertical Offset: default 2px.
  • Blur: default 12px.
  • Spread: default 0.

Border Radius
Rounds the corners of the box: top, right, bottom and left. Default: 16px on each corner.

Background
The background color of the box. Default: #ffffff.

Padding
The space inside the box: top, right, bottom and left. Default: 35px 40px 20px 40px.

Alignment
The position of the box on the screen: Left, Center or Right. Default: Center.

Width
The width of the box. On small screens, the box is never wider than the screen. Default: 820px.

Heading

These settings apply to all headings in the content.

Font
The font family. Default: Helvetica Neue.

Font Size
Default: 32px.

Color
Default: #131313.

Text

Font
The font family of the text. Default: Helvetica Neue.

Font Size
Default: 16px.

Color
Default: #1b1b1b.

Link Color
The color of links. Default: empty. At the moment, this setting has no effect, and links keep their normal color.

Link Hover Color
The color of links when the pointer is over them or they have focus. Default: empty.

Advanced Customizations

The siteorigin_premium_404_page_show filter decides if the custom 404 page shows. Return false to show your theme’s normal 404 page instead. This example keeps the theme’s 404 page for addresses under /shop/:

add_filter( 'siteorigin_premium_404_page_show', function( $show ) {
	global $wp;
	if ( strpos( $wp->request, 'shop/' ) === 0 ) {
		return false;
	}
	return $show;
} );

Add custom code with a child theme or a code snippets plugin.