How to Customize the 404 Page with GeneratePress

I am learning so much about SEO these days and I started wondering how a custom 404 page could help improve the user experience.

I started searching articles about how to customize the 404 page in GeneratePress and I discovered that you can do that easily with elements.

To use elements, you need to have GeneratePress Premium on your WordPress site.

In addition to elements you can use add code snippets to remove the default and search form.

Let’s explore all that you need to fully customize your 404 page with the help of GeneratePress Elements and the code snippets plugin

Elements in GeneratePress to have a Custom 404 Page

These are the steps to add content to your 404 page

1. Go to appearance then to Elements
2. Add a new Element
3. Choose “block” from the Element Type Options
4. Write the title that you want
5. Build your page using GenerateBlocks or any other plugins
6. When you finish, go to the display rules section
7. For location, choose “404 Template”
8. In the block element setting choose “Hook” for element type
9. For hook name Choose “after_main_content”

You can play with this section and build a nice 404 page doing what you do with the rest of the pages of your site

Code Snippet to Remove Text and Search Form

This is a code snippet to remove the text before the search form and the search form itself

add_filter( 'generate_404_text','generate_custom_404_text' );
function generate_custom_404_text()
{
    return '';
}
add_filter( 'get_search_form','my_remove_search_form' );
function my_remove_search_form()
{
    $template = $GLOBALS['template'];
    $template_file = substr($template, strrpos($template, '/') + 1);
    if ($template_file === '404.php') {
        return '';
    }
}

I tested it using the Code Snippets Plugin and it works like a charm

By the way, use the Code Snippets Plugin, don’t add code to the functions.php because those codes will be gone when you update your theme

Give credit to Marquis M who made this contribution in the GeneratePress Forum

The steps to do this are:

1. Install the Code Snippets plugin
2. Go to Snippets
3. Then click the “add new” button
4. Enter the title
5. Copy the code from above and paste it in the snippet section
6. Then save changes and activate

Remove 404 Page Title in GeneratePress

If you don’t have any plans for the 404 page title, you can use this code snippet and get rid of it

add_filter( 'generate_404_title','remove_404_title' );
function remove_404_title()
{
      return '';
}

This code snippet is useful is you want to play a little bit with the header element.

Wanna Read More?

These are some posts that you might find helpful if you have a WordPress site

1. Protect your WordPress Site with CloudFlare Firewall Rules
2. SG Security: SiteGround Security Plugin
3. WordPress Security without Plugins
4. How to Optimize GeneratePress for Core Web Vitals [100% Solved]
5. How to Use Flying Scripts to Speed up Your WordPress Site
6. How to Improve the Page Speed of your Adsense Sites
7. ow to Use CloudFlare Full Page Caching With WordPress