[Resolved] Show Element after specific paragraph

[Swadhin]

Hi David & Team,

I want to show an ad after a specific number of paragraphs of content. GP hooks currently allows ads/custom element after_entry_header as the only place to show an ad inside the blog post.

I saw this tutorial in the forum that shows how to create a hook for showing ad after the first paragraph. Which is awesome!

Now, I want to ask:

1) Can we create a hook that activates (shows ad) after the reader has scrolled a certain percentage (say 20%) of the article/page? If yes, please share that code with me!

2) If no, can you please tell how to change the paragraph number to something of my choice (say para 6) using the above code?

Thank you,
-Swadhin

[Ying]

Hi Swadhin,

That’s a good found.

Give this a try to add hook after 6th paragraph:

add_shortcode('portable_hook', function($atts){
	ob_start();
        $atts = shortcode_atts( array(
            'hook_name' => 'no foo'
        ), $atts, 'portable_hook' );
		do_action($atts['hook_name']);
	return ob_get_clean();
});

add_filter( 'the_content', 'insert_featured_image', 20 );
function insert_featured_image( $content ) {
    global $post;
    $inserted_hook = do_shortcode('[portable_hook hook_name="after_sixth_paragraph"]');
    if ( is_single() && ! is_admin() ) {
        return prefix_insert_after_paragraph( $inserted_hook, 6, $content );
    }
    return $content;
}
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 );
}

[Swadhin]

Hi Ying,

Thank you so much for the code. It worked!

Best,
-Swadhin

[Ying]

You are welcome 🙂

[Sanjay]

Can I get a similar code for putting something just between the Category Description and Post Lists?

Or if there is a way to do it without any code.

[David]

Hi there,

if its on an Archive Page, then:

1. Create a New Hook Element:

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

2. Add your code to the text area

3. Set the Hook to: generate_after_archive_title

4 Set the priority to: 30

5. Set the Display Rules to: All archives

[Sanjay]

I did that already. You can check.

https://efinancemanagement.com/working-capital-financing

But, I want it to look like following:

https://efinancemanagement.com/investment-decisions/present-value-of-growing-annuity

a completely separate container. I am using the following code given by a friend:

[removed]

Also, I wanted to know If I can bring my social media buttons that are coming using a plugin. Can I bring that plugin’s output also here using a hack or an element?

[Fernando]

Hi Sanjay,

Can you take a screenshot of the element you’re referring to here?: https://efinancemanagement.com/investment-decisions/present-value-of-growing-annuity

Uploading Screenshots: https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots

As for Social Icons, here are a couple of videos you may refer to:

[Andrey]

I used the original code provided above by Ying and it worked for posts. However the hook doesn’t seem to work on the pages.

What needs to be added for the code to also work for pages?

Thank you!

[Ying]

Hi Andrey,

Try change is_single() tois_single() || is_page() .
Let me know if it works!

[Author]

Posts