How to use a customized page as error 404 page

  • I would like to use the linked page above (https://alexluna.000webhostapp.com/erro) as my site’s 404 error page. In order to do that, I’ve created a child theme and there I’ve created a 404.php file using the content of Bento’s original page.php code, replacing “The WordPress Loop” code with the following:

    <div class=”page-content”>
    <?php
    global $post;
    $post = get_page_by_title(“Erro”);
    if ($post) {
    setup_postdata($post);
    get_template_part( ‘content’, ‘page’ );
    }
    ?>
    </div>

    Now, I’m able to see the content of the customized page, but it isn’t formatted correctly.

    You can check the differences accessing both the page I have linked here and a random URL on the same site, let’s say:

    https://alexluna.000webhostapp.com/bento

    Any clues about what I must add to my 404.php code in order to correct the page formatting when a 404 error happens?

    Thanks,

    Alex

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author satoristudio

    (@satoristudio)

    Hello Alex, thanks for choosing Bento!
    This is how the 404 page looks on my device at the moment: screenshot; could you please point me to the items that do not display as intended?

    Thread Starter alexluna

    (@alexluna)

    Hello,

    Thanks for your reply.

    I’m attaching some screenshots in order to make it easier for you to understand what is happening. (I should have done that in the first message! ;-))

    This is what happens when I directly request the “Erro” page (https://alexluna.000webhostapp.com/erro): screenshot.

    This is what happens when I trigger a 404 error requesting a page that doesn’t exist and then the modified 404.php uses the “Erro” page as described in my first message (https://alexluna.000wehhostapp.com/bento): screenshot.

    I’ve identified another item that isn’t working as expected. The site uses a menu in the header which has a submenu in the “SERVI?OS” item. Normally, there is a small “v” on the side of this item. However, when I use a Bento-Child theme, which only has the 404.php file, in addition to the functions.php and script.css files that you provide in the child template, the “v” is replaced by a generic square. I have highlighted that as well in the two screenshots regarding the error 404 page above. This also happens when the site is using the mobile menu, where the small “x” on the top, which is used to close it, is also replaced by a generic square.

    Then, I realized that when I am logged to the site’s “wp-admin” this issue doesn’t happen as you can see in this screenshot. Moreover, if I use the Bento theme (not the Bento-Child) and replace the original 404.php with my modified version, both the “v” and the “x” are correctly shown, either logged or not to “wp-admin”.

    I’m looking forward to your comments.

    Thanks,

    Alex

    Theme Author satoristudio

    (@satoristudio)

    Thanks for the details, now it’s clear! ?? I’ll go through the questions in the same order below:

    1. For customizing the 404 error page, it is strongly recommended to edit (and style) the 404.php template file itself, without trying to call a different page object from inside it – this messes with the theme’s sidebar logic (hence the extra space on the right) as well as the 404 page’s DOM structure (hence the extra space above and below the main content block).

    2. Indeed, the “down chevron” menu icon does not appear because of issues with the child theme – please make sure the child’s functions.php are formatted correctly: here’s the official WP info page, and here and here are some specific threads on this on this Bento support forum.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to use a customized page as error 404 page’ is closed to new replies.