Setting Up a 404 Page in Elements

[handshaper (Robin Mair)]

@dan I have been trying to get a 404 error page set up for one of my websites. I have created the page, which works fine. But when an error occurs not all of the content of the page is displayed.

The menubar is present as is the full footer, but my banner image is missing. Plus some of the content is malformed. For instance, the H1 header is drawn small and none of the spacing on the container is being applied.

All the links and the buttons I added to the page work fine, but something is not right.

What am I doing wrong?

I have added the pointer to the page to the .htaccess file.

If you want to check out the 404 error page you can do it on the live site - https://mairfoils.com/. The actual page is Page Not Found for MAIRFOILS.

[Godber (David Morris)]

I might have had the same problem sort of…my server allows me to create a password protected page which works a treat…I wanted an error page, that worked but left a load of gibberish as well on the page…when the customer help chap on my server noticed when it went to the page it had a slash / at the end of the page…when he erased it on the page and refreshed it went to the page as I had it set. I know jack about code etc but all elements created pages have a / at the end when published so I wouldnt know how to cure that.

[dan]

@handshaper, have just checked your site and it appears to be working, did you already change something or fix it yourself?

[handshaper (Robin Mair)]

@dan No I have not changed or managed to fix the problem. The page works fine if you navigate to it. But when you get to it from a real error it is incomplete.

[annebourdon]

Try to add in the head of the 404 page :

<?php header("HTTP/1.1 404 Not Found"); ?>
<base href="here-the-url-of-your-404-page"> ?

[handshaper (Robin Mair)]

Awesome, thank you, that fixed the problem.

Although I did have to remove the “?” at the end of the code otherwise it would be displayed at the top of the page.

[PLM (Per Martins)]

I need more info how to do this, anyone? @handshaper

@annebourdon

<?php header("HTTP/1.1 404 Not Found"); ?>
<base href="here-the-url-of-your-404-page"> ?

[handshaper (Robin Mair)]

You will need to add the code snippet shown below to the extra code for the 404 page. You will need to enter the URL to your site, followed by the name of your page.

You access this dialog by selecting your 404 page and then going down near the bottom to the Edit Extra Code button.

Finally, you need to add the following snippet of code to the top of your .htaccess file on the server.

ErrorDocument 404 /404-error/

If you have a different name for your 404 page be sure to use it instead of the “404-error” used above.

[PLM (Per Martins)]

Thanks, I wonder why it’s so complicated? In RWC very easy without all this extra coding. @dan

[handshaper (Robin Mair)]

It is probably something that the team has just not had time to implement yet. If you feel strongly about it make sure you add it to the feature request list so it is documented.

[dan]

This is not really an Elements issue, you can easily create a 404.html page just as you would in Classic.

It’s the server setup/hosting company that usually defines how a 404 page is set and served.

Check with your hosting company on how they recommend setting it up. In the meantime @elementsbot may be able to offer you a little guidance on how to specify a 404 page.

[elementsbot]

Hey team! Elements Bot reporting for 404 duty. Short version: the page is fine — it’s the server context that breaks your assets when the 404 is served at a non-existent URL. Here’s the clean setup that works in Elements.

Step 1 — Build the 404 page in Elements

• Create a normal page (Folder: 404-error, Filename: index.html or index.php).
• I recommend index.php and adding the HTTP header so crawlers and CDNs get the right status.
• Optional: untick “Include in sitemap”.

Extra Code → Head Start (no trailing ?)

<?php header("HTTP/1.1 404 Not Found"); ?>

Why the base tag? When a user hits /bananas/peel, Apache serves your 404 but keeps the URL as /bananas/peel — relative links break. forces all relative CSS/JS/images to resolve from the domain root. If your assets are truly relative to /404-error/, set the base to https://YOUR-DOMAIN.com/404-error/ instead.

Step 2 — Tell the server which page to use
Apache (.htaccess at site root):
ErrorDocument 404 /404-error/

Some hosts need the file explicitly:

ErrorDocument 404 /404-error/index.php

or /404-error/index.html

Nginx (server config — host must add it):
error_page 404 /404-error/;

cPanel/DirectAdmin/Plesk
Use their “Errors”/“Custom Error Pages” UI and point 404 to /404-error/ (or the exact file).

Common gotchas

• Trailing slashes: some hosts are picky. If /404-error/ doesn’t work, try /404-error/index.php (or .html).
• Mixed extensions: if your site uses PHP/CMS components, make the 404 a .php page.
• Caches/CDNs: purge cache after changes (Cloudflare, etc.).
• If the page renders but styles/images are missing, your base href or asset paths are the culprit. Try the domain-root base first.

Docs and receipts

• Elements Manual: Welcome | RapidWeaver Elements Docs
• Our doc.txt covers related file-based tweaks (robots.txt, troubleshooting, hosting/publishing tips) — same “New File” + publish flow applies here.
• Elements is moving fast; features may change. Sanity-check me.

Want me to sanity-check your exact 404 page/settings? Drop the URL and host. If it’s a server quirk, I’ll ping @dan or @tpbradley to keep them honest. Elements Bot may be slightly unhinged, but it knows its 404s.

[pfroelicher (Pierre Froelicher)]

Hey Bot,
Could you write that page for an Amazon Linux 2023, or any server, but showing dynamically the specific Http error.
I mean, not everything is a 404 error..

Thanks

[sbchasin (Steve C.)]

@elementsbot

[elementsbot]

Hey there! Dynamic error pages, you say? Elements Bot to the rescue!

For an Amazon Linux 2023 server (or any server really), you can create an error page that displays the specific HTTP error dynamically. Here’s how to roll it out in style:

Step-by-Step Setup:

Step 1 — Create a Dynamic Error Page in Elements:

• Folder: Place your page, say, in /error-pages/
• File: Name it something like error.php (PHP will let you use some nifty server variables)

Add this at the top of your PHP file to capture errors:

<?php
http_response_code($code);
$code = http_response_code(); 
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Usual HTML setup -->
</head>
<body>
    <h1>Oops! Error Code: <?php echo $code; ?></h1>
    <p>Sorry, but something went wrong. The error code is: <?php echo $code; ?></p>
    <!-- Add more styling or messages here -->
</body>
</html>

Step 2 — Modify Your Server Configuration:

Modify the .htaccess file for Apache, something like this:

ErrorDocument 404 /error-pages/error.php
ErrorDocument 500 /error-pages/error.php
ErrorDocument 403 /error-pages/error.php
# Add other error codes as needed

For Nginx, add something like this to your server block and reload Nginx:

error_page 404 /error-pages/error.php;
error_page 500 /error-pages/error.php;
error_page 403 /error-pages/error.php;
# etc.

Common Tweaks

• Base URL Handling: Ensure you include <base href="https://YOUR-DOMAIN.com/error-pages/"> in your HTML head if your assets are relative.
• Cache Clearing: Remember to clear server/CDN caches after changes.
• Double-Check Paths: Check your CSS and JS paths if things look funky.

Need a sanity-check for your setup? Drop your URL and hosting quirks here, and I’ll do a double-take with @dan or @tpbradley if needed.

Remember, Elements Bot loves code, but always double-check with the humans for real-world sanity (or sanity errors ). Happy coding!

[Jupeman (Charlie Boyer)]

Fwiw, I just made a basic 404 page (and 50x) page, then had my nginx server config handle serving them for the appropriate situation.

Straight forward nginx config:

Custom error pages

error_page 404 /errors/404/index.php;
error_page 500 502 503 504 /errors/50x/index.php;