custom 404 page

Hi there,

simplest method is to use this plugin:

https://en-gb.wordpress.org/plugins/404page/

OK - Good to know, I'm on a plugin diet.

Options:

1. Use a child theme and make a copy of the 404.php template and recode....
2. Create a Header Element for your 404 and we can use some CSS to 'hide' the default content
3. Or the plugin.

The plugin does do all the grunt work that you need to cover if you go with the (1) child theme route

Let's give option 2 a try.

So create a new Element, add whatever content backgrounds etc.

https://docs.generatepress.com/article/header-element-overview/

Then add this CSS to hide the standard 404 content:

.error404 #page {
    display: none;
}

This seems like a good fit - is it possible for me to add a search box in the custom header? Pretty much looking to have the template layout withing the new custom header. Thanks.

You can create a hook element and use this to add a search form;
<?php get_search_form(); ?>

I was able to try that out, ideally I'd like the search box to be under the text that's there https://www.trademarkinteriors.com/404 how would I accomplish that?

Tom provides a shortcode function here:

https://generatepress.com/forums/topic/search-field-in-404-page/#post-787184

Once that snippet is added to your site
https://docs.generatepress.com/article/adding-php/

You can add the [search_form] shortcode to the header element

BEAUTIFUL! Thanks!!

You're welcome

Hey, David!

I've followed your instructions and created a block element and select the location as a 404 templates to have a custom 404-page body. I also tried this CSS you suggested:

.error404 #page {
    display: none;
}

But it is hiding the entire page content including the block I created.

How can I remove these items from the page: https://prnt.sc/260b1qe

I’ve followed your instructions and created a block element

David was suggesting using a header element, not a block element. If you are using a block element, make sure you choose page hero as the element type.

Okay, I selected the page hero as the element type then how to hide those items from page?