[Resolved] Filter for adding new DIV / HTML inside Page Hero

[Marcus]

I’m new to using filters, so I’m sure this is easy/obvious. I’m trying to add the extra overlay div INSIDE the .page-hero div. But in the case of my simple code below, the new div is being written successfully, just not in the correct place.

add_filter( 'generate_page_hero_output', function($output) {
    $extra_div = '<div class="overlay"></div>';
    return $extra_div . $output; 
}, 10, 2 );

How do I output all of the page hero content and then just tack on my new div INSIDE?

[David]

Hi there,

Tom provides the answer here:

https://generatepress.com/forums/topic/inside-hero-hook/#post-927610

[Marcus]

Hi David, yes, I saw (and bookmarked) that post.

I was trying to use that code but without the sprintf, but couldn’t seem to get it to work. I’m sure I’m missing something obvious.

I understand in general that the filter can modify or add to our content, but any additional help or code would be most appreciated.

[David]

Filters functions have to return the correct amount of variables in this case that filter requires 2 – $output and $options. Otherwise it wont work.

You could do this:

add_filter( 'generate_page_hero_output', function( $output, $options ) {
    return sprintf(
        '<div class="%1$s">
            <div class="%2$s">
                %3$s
                <div class="overlay"></div>
            </div>
        </div>',
        trim( $options['container_classes'] ),
        trim( $options['inner_container_classes'] ),
        $options['content']
    );
}, 10, 2 );

[Marcus]

OK, so what if I just want “all of the normal page hero things” + <div class="overlay"></div> ?

What would that look like? I mean, couldn’t I get rid of the sprintf/variables stuff that I don’t need?

[David]

Sorry i re-read your original topic and change the filter snippet here to add the overlay div within the hero container. Is that what you mean?

[Marcus]

No worries! Yes, that’s what I was after. Thank you for hanging in there with me.

I guess what was tripping me up was just not understanding that the sprintf and all of its related code is required to render out all of the necessary blocks and classes to make the page hero work. I just needed to add my div in and leave all of the other code in place. I still have a bit to learn about filters for sure. 😉

Thank you again David!

[David]

You’re welcome. Filters can be a lot more complicated. They still trouble me lol

[Marcus]

Always learning! Upward and Onward!

[David]

Totally 🙂 Have a good day

[Author]

Posts