[Resolved] Is there anyway to add block hook element inside post content?

[Trạng]

Hi there,

As title, I want to place a block hook element inside post content with Display rule is “Post – Post category”? Is there anyway allow me to do that?

The block I want to place is a container with text & button. The place I want it appear in everypost is below Table of content, before first heading.

Please help me to do this. I already searched related topic in this forum but can’t figure out how to do it in simple way.

[David]

Hi there,

Hooks are baked into a theme template or function, they don’t exist inside your post content. But there is one method, that requires creating a shortcode that you insert into your post content to create your own custom hook, see here:

https://generatepress.com/forums/topic/hook/#post-1038253

[Trạng]

So let’s say, in this screenshot about your method, I will do step by step as:

#1 – I will use Code Snippet plugin => Add new => Add this code

#2 – In every post I want the block container be displayed, I will place the shortcode [hooky_shortcode] wherever I want it appeared, right?

#3 – I will create my block element and then when choosing Custom Hook for that block, I will add [custom_shortcode_hook], right?

So with this method, I will manually add shortcode to display container box, there is no way to automatic make it appeared somewhere in content?

Thank David 🙂

[David]

Thats correct.

To dynamically insert the shortcode just adds another layer of complexity. Instead of #2 you will need another PHP Snippet to filter the_content() to add that shortcode in for you.

Heres an example of a filter to add Shortcode after the 3rd paragraph in your posts:

add_filter( 'the_content', 'insert_content_after_paragraphs', 20 );
function insert_content_after_paragraphs( $content ) {
    $html = do_shortcode( '[your-shortcode]' );
    if ( is_single() && ! is_admin() ) {
        return prefix_insert_after_paragraph( $html, 3, $content );
    }
    return $content;
}
// Parent Function that makes the magic happen
function prefix_insert_after_paragraph( $insertion, $paragraph_id, $content ) {
    $closing_p = '</p>';
    $paragraphs = explode( $closing_p, $content );
    foreach ($paragraphs as $index => $paragraph) {
        if ( trim( $paragraph ) ) {
            $paragraphs[$index] .= $closing_p;
        }
        if ( $paragraph_id == $index + 1 ) {
            $paragraphs[$index] .= $insertion;
        }
    }
    return implode( '', $paragraphs );
}

Notes:
a) This line you edit to add your shortcode:

$html = do_shortcode( '[your-shortcode]' );

b) And on this line is where you specify the paragraph after which it is to be inserted:

return prefix_insert_after_paragraph( $html, 3, $content );

ie. the number 3 equals the third paragraph.

c) And this line is what specifies the paragraph element as the insertion point:

$closing_p = '</p>';

You would need to change the </p> for the closing element you wanted it inserted after. And adjust point a) to match.

But – i cannot say for certain if this will work correctly, and its most certainly not the most performant way, as you’re filtering the content, inserting a shortcode, which adds a hook that runs a callback from the Block Element function.

And if you post content changes from post to post you may end up with different results.

[Trạng]

Wow, thank you so much David. Your support is insane :D. I am low tech in coding so it makes me a little bit confused but I will try to apply your first advise & let’s see what’s going on.

Thank you again!

[Trạng]

Hi David, just apply this code you provided.

But the output is not formartted like I did before in block elements.

What I built in block elements is like this

But the output is plain text without any styling (Screenshot)

I add shortcode hook as you guided (Screenshot)

Please advise!

[David]

Yeah, as i said above i cannot say for certain if this will work correctly – i think the problem is using the_content filter, to add in the shortcode. The system doesn’t know the Block Element exists before this in order to generate the necessary styles.

To test this theory what happens if your manually add the shortcode to the page?

[Author]

Posts