Customizing 404 Landing Page

Tagged: 

This topic contains 2 replies, has 2 voices, and was last updated by  Themosaurus 3 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #2375

    eyebrandit
    Participant
    • 20 Posts
    @eyebrandit

    Hello, how do we change the photo and text on the 404 landing page? Thank you.

    #2417

    Themosaurus
    Keymaster
    • 1665 Posts
    @themosaurus

    Hi @eyebrandit,

    Unfortunately there is no settings to edit the 404 page at the moment.
    We are actually searching for the best solution to implement this feature in our themes and plugins.

    Anyway, to edit this page you can simply add the following code snippet to your website:

    /**
     * Override the template for displaying 404 pages (not found).
     *
     * @link https://codex.wordpress.org/Creating_an_Error_404_Page
     */
    function gwangi_custom_template_redirect() {
      if ( is_404() ) :
        get_header(); ?>
    
          <div id="primary" class="content-area col-12 p-0">
              <main id="main" class="site-main">
                  <div class="section grimlock-section region grimlock-region region--6-6-cols-left region--container-fluid">
                      <div class="region__container p-0">
                          <div class="region__row align-items-center m-0">
                              <div class="col-left region__col region__col--2 pl-0 d-none d-md-block">
                                  <div class="section__thumbnail" style="background-image: url('<?php echo esc_url( get_stylesheet_directory_uri() . '/assets/images/pages/page-404.jpg' ); ?>');"></div><!-- .section__thumbnail -->
                              </div><!-- .region__col -->
                              <div class="col-right region__col region__col--3 pt-2 pb-2">
                                  <?php do_action( 'gwangi_breadcrumb' ); ?>
                                  <h1 class="page-404-title"><?php esc_html_e( 'My 404', 'gwangi' ); ?></h1>
                                  <h4 class="page-404-subtitle"><?php esc_html_e( 'Page not found.', 'gwangi' ); ?></h4>
                                  <p class="page-404-text"><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try one of the links below or a search?', 'gwangi' ); ?></p>
                                  <?php get_search_form(); ?>
                                  <a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="btn btn-primary btn-lg col-12 col-sm-auto"><?php esc_html_e( 'Go back to homepage', 'gwangi' ); ?></a>
                              </div><!-- .region__col -->
                          </div><!-- .region__row -->
                      </div><!-- .region__container -->
                  </div><!-- .region -->
              </main><!-- #main -->
          </div><!-- #primary -->
    
        <?php
        get_footer();
        die;
      endif;
    }
    
    add_action( 'template_redirect', 'gwangi_custom_template_redirect', 10 );
    

    Then you will be able to stretch all the texts and links. The main image link should be replaced as follows:
    <?php echo esc_url( get_stylesheet_directory_uri() . '/assets/images/pages/page-404.jpg' ); ?>
    by your url:
    ‘https://mysite.com/wp-content/uploads/2018/09/myimage.png’

    To add this code snippet to your site, we recommend that you use a the Code Snippets plugin (https://wordpress.org/plugins/code-snippets/). If you have never activated this plugin, please read the following post:

    Adding Custom PHP Without Changing Your Child Theme

    We hope this will solve your issue. 🙂

    All the best,

    #4207

    Themosaurus
    Keymaster
    • 1665 Posts
    @themosaurus

    Hi @eyebrandit,

    Great news! 🙂

    The 404 page is now available for further customization. First, please update Grimlock and Gwangi to their latest version. Then, just open your Customizer and navigate to Pages > 404 Page. All new theme options will be located there.

    Regards,

Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘Customizing 404 Landing Page’ is closed to new replies.