25% off ProSNIPC25OFF

Custom 404 Page

Replaces the default WordPress 404 template with a styled, on-brand error page including a home link.

Module2 parts · by SnipCraft

PHPLogic

php
<?php
add_action( 'template_redirect', function () {
    if ( ! is_404() ) {
        return;
    }
    status_header( 404 );
    nocache_headers();
    get_header();
    echo '<div class="scseed-404-wrap"><div class="scseed-404-inner">';
    echo '<span class="scseed-404-code">404</span>';
    echo '<h1 class="scseed-404-title">' . esc_html__( 'Page Not Found', 'default' ) . '</h1>';
    echo '<p class="scseed-404-msg">' . esc_html__( 'The page you are looking for might have been moved or no longer exists.', 'default' ) . '</p>';
    echo '<a href="' . esc_url( home_url( '/' ) ) . '" class="scseed-404-btn">' . esc_html__( 'Back to Home', 'default' ) . '</a>';
    echo '</div></div>';
    get_footer();
    exit;
} );

CSSStyles

css
.scseed-404-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 55vh;
    padding: 40px 20px;
    text-align: center;
}
.scseed-404-inner { max-width: 480px; }
.scseed-404-code {
    display: block;
    font-size: 100px;
    font-weight: 800;
    line-height: 1;
    color: #7c5cff;
    margin-bottom: 16px;
}
.scseed-404-title { font-size: 26px; margin: 0 0 12px; }
.scseed-404-msg   { font-size: 16px; color: #666; margin: 0 0 28px; }
.scseed-404-btn {
    display: inline-block;
    padding: 11px 26px;
    background: #7c5cff;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s;
}
.scseed-404-btn:hover { background: #6244e0; color: #fff; }
#branding#ux#templates#404