Support » Theme: Twenty Nineteen » How to add my own “error 404” page to Twenty Nineteen?

  • Resolved isadoe

    (@isadoe)


    Hi 🙂
    I think it’s a very basic question, sorryyyy. I did online searches looking for an answer but didn’t find what I need..

    Until very recently, I was using another wordpress theme (‘Sueva Free’ (I created a child theme from it to add my custom codes)).
    I had a customized “Error 404 page” here: https://www.dreamsonearth.com/erreur-404/ that I used instead of the default one. I coded the redirection following a tutorial that made me add the following code to my child-theme’s “function.php” :

    <?php
    function page404_redirection()
    {
     global $mapage;
     if(is_404())
     {
     wp_redirect(home_url("erreur-404"));
     exit;
     }
    }
     
    add_action('wp', 'page404_redirection',1);

    and it worked perfectly.

    But recently I changed my parent theme and I am now using Twenty Nineteen instead of Sueva Free (again, I’ve created a child theme of Twenty Nineteen to add my custom codes). I’ve added the same above code to my new “function.php” file but it doesn’t work anymore and I don’t know why? (see by yourself with this random non-existing page https://www.dreamsonearth.com/abcde/ > it doesn’t redirect you to my 404 page anymore).

    Is there something more specific (or different) to do to have a 404 redirection when using the Twenty Nineteen theme?
    I see that Twenty Nineteen has a 404.php file that is maybe overwriting my function.php child code, but I don’t know what to do with it.

    Thank you for your help and sorry for my bad english 🙂

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Hi, the 404.php file is what is displayed when a 404 error is returned by the server. So all you would have to do is modify the content of the 404.php file on your child theme to your liking. No need to worry about trying to use a redirect in your functions.php file.

    Hi Jarret, and thank you for your answer! ^^

    I thought about this indeed but since I’m a newbie to html I wasn’t sure how to do it.
    I’m going to create a 404.php file in my child theme to overwrite the Twenty Nineteen one, but what code do I write inside to “call” my 404 error page please?

    Best regards,
    Isabelle

    Hi Isabelle, I’m no expert (in fact I was hoping to learn something here) but I can tell you that you need to put the HTML code from your erreur-404 into the 404.php file.

    To make it simple, just take a closer look at that 404.php file and replace the text that will appear with the text you want. You can see the stuff I mean? Like “Oops! That page can’t be found.”

    HTML is not too difficult – although @jarretc might be able to help you more with the penguin picture you’re using as the background 🙂

    Hi, WordPress will see the 404.php file in your child theme directory and use that automatically for any 404 HTTP status. However, you may want to take a look at the 404.php file provided with TwentyNineteen for a better idea of what the file should contain at a minimum.

    Having get_header(); and get_footer(); in there will be helpful as it’ll help to display your 404 page like it should be part of your site. You can then choose how the HTML is displayed between those 2 functions to whatever you’d like. Though I would recommend copying the following HTML

    <div id="primary" class="content-area">
    		<main id="main" class="site-main">

    From the default 404.php file to ensure that your error message/content is displayed properly within the layout of the theme. You’ll also want to remember to include the closing tags as well after your custom content

    </main><!-- #main -->
    	</div><!-- #primary -->

    Thank you both for your answers!

    I tried to edit the existing 404.php file (after duplicating it to my child theme) as you said but didn’t know how to import my whole ‘already-customized’ page in there without having to create a new different page (h1, paragraph, etc.) between your tags.

    I found another solution that seems to work >> my 404 page was customized with Elementor. I deleted it and created it again with the exact same design but as a template this time, and not as a single page. I could choose it to be an “error-404 template design” and with all the magic of codes I’ve no idea of, it is now displayed as my 404 page ^^’

    So thank you again very much for your help, even if I did not use your tips at the end I now know how to edit the 404.php file too.
    Have a beautiful day,
    Isabelle

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.