Archived topic
Add shortcode inside Page Hero
3 replies · Started by Philip on October 4, 2020
I have a shortcode that I'm currently adding to individual Posts with this code:
add_shortcode( 'photo_credit', function() {
if( get_field('photo_credit') ):
$post_author = '<div class="photo-credit">' . get_field('photo_credit') .'</div>';
return $post_author;
endif;
} );I'm using a Hook element, and I'm able to get this right after the Page Hero, but I need to get it just within the Page Hero closing
.
I found this post, but couldn't quite get it to do what I need it to: https://generatepress.com/forums/topic/inside-hero-hook/
Is there an approach to accomplish this?
Hi,
Tom mentions the hook you need in this reply. https://generatepress.com/forums/topic/inside-hero-hook/#post-927610
On your Hook Element, change the hook to Custom hook and use generate_page_hero_output. The Hook Element should display inside the page hero div. You can also control where it is displayed by changing its priority value.
Having priority value of 10 or lower will make the hook element display first, having it set to 11 or higher will make it display on the bottom of the page hero div.
Hi Elvin,
I just gave that a try, and instead of displaying inside the page hero div, it completely replaced the page hero div (so the background image, title, etc disappeared), and it only showed my photo_credit shortcode.
I have my Hook settings like this:
Hook: Custom Hook
Custom Hook Name: generate_page_hero_output
Execute Shortcodes: checked
Execute PHP: unchecked
Priority: 10
Am I doing something wrong?
Oh yeah my bad. That topic was using PHP snippets.
You can try this PHP snippet instead of the Hook Element.
add_filter( 'generate_page_hero_output', function( $output, $options ) {
return sprintf(
'<div class="%1$s">
<div class="%2$s">
%3$s
</div>
<div>
%4$s
</div>
</div>',
trim( $options['container_classes'] ),
trim( $options['inner_container_classes'] ),
$options['content'],
do_shortcode( '[photo_credit]' )
);
}, 10, 2 );What this does is, it gets your Header Element settings + it appends a <div> that displays your shortcode inside it.
