Support » Plugin: Jetpack by WordPress.com » Add php codes at the end (or after every n-th post) of each infinite scroll page

  • Resolved AndrewL32

    (@andrewl32)


    Following the steps shown here: http://jetpack.me/support/infinite-scroll , I successfully added Jetpack’s infinite scroll to a wordpress site I’m working on http://wyrta.com/ (which is working beautifully btw).

    But the issue I’m having is regarding adding a shortcode or php function after say, every 3 posts of every page appended.

    With the help of a few tutorials online, I managed to come up with the following:

    <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
    	<?php get_template_part( 'content', get_post_format() ); ?>
    	<?php if ($wp_query->current_post !== 0 && ($wp_query->current_post+1)%3 == 0 && function_exists ('adinserter')) {
    	    echo adinserter (3);
    	} ?>
    <?php endwhile; ?>
    <?php endif; ?>

    where in my content.php, I have this:

    <div class="row article-row">
    	<div class="col-md-3 col-sm-4">
    		<?php
    		if ( has_post_thumbnail()) {
    			 echo '<a href="' . get_permalink($post->ID) . '" >';
    			the_post_thumbnail('my_feature_image', array( 'class' => "img-responsive" ));
    			echo '</a>';
    		}
    		?>
    	</div>
    	<div class="col-md-9 col-sm-8">
    		<h3 class="article-list-header"><strong><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></strong></h3>
    		<h4 class="article-list-subheader"><?php the_time('l, F jS, Y'); ?></h4>
    		<p><?php the_content(); ?></p>
    	</div>
    </div>

    Which works fine on the first page but the loop just stops working on the following pages after it.

    Can I please get some advice on how to recall the post count loop on the pages after the first page too?

    I have tried numerous ways to fix this including moving the loop to the template part “content.php” but that caused my homepage to break (and the php code is still not applied to pages other than the first) and also using Jetpack’s js post-load event: $( document.body ).on( 'post-load', function () {} );} )( jQuery ); but it’s not really helping as php can’t be process client-side by js.

    Can someone help me out with adding php codes to pages after page1 please.

    N.B. The php code generates the following html:

    <div class="col-xs-12">
        <img src="http://demo.shillongtitude.com/scroll-site/wp-content/uploads/2015/03/slider3-1920x300.jpg" class="img-responsive" alt="ad1" />
    </div>

    https://wordpress.org/plugins/jetpack/

Viewing 15 replies - 1 through 15 (of 20 total)
  • Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    Since Jetpack’s Infinite Scroll only calls what’s in your loop again to get more posts, everything outside of the loop processed by Jetpack’s Infinite Scroll won’t be triggered again.

    You’ll consequently want to place that ad at the end of the code generating the loop. You can define a specific function that Jetpack’s Infinite Scroll will loop through thanks to the render parameter described here:
    http://jetpack.me/support/infinite-scroll/

    Give that a try, and let me know how it goes.

    If that doesn’t help, could you post the code you used to add Infinite Scroll support to your theme here?

    Thanks!

    “You can define a specific function that Jetpack’s Infinite Scroll will loop through thanks to the render parameter”

    I am currently rendering the posts from an external content.php file Jeremy but I’m not sure what you mean by placing that ad at the end of the code generating the loop.

    Here is the action I’m hooking to:

    function wyrta_infinite_scroll_init() {
    add_theme_support( 'infinite-scroll', array(
        'container' => 'content',
        'wrapper'	=> false,
        'posts_per_page' => 8,
        'footer' => false,
        'footer_widgets' => false,
    ) );
    }
    add_action( 'after_setup_theme', 'wyrta_infinite_scroll_init' );

    Here is my content.php:

    <div class="row article-row">
    	<div class="col-md-3 col-sm-4">
    		<?php
    		if ( has_post_thumbnail()) {
    			 echo '<a href="' . get_permalink($post->ID) . '" >';
    			the_post_thumbnail('my_feature_image', array( 'class' => "img-responsive" ));
    			echo '</a>';
    		}
    		?>
    	</div>
    	<div class="col-md-9 col-sm-8">
    		<h3 class="article-list-header"><strong><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></strong></h3>
    		<h4 class="article-list-subheader"><?php the_time('l, F jS, Y'); ?></h4>
    		<p><?php the_content(); ?></p>
    	</div>
    </div>

    And here is the loop I’m using:

    <?php if (have_posts()) : ?>
        <?php while (have_posts()) : the_post(); ?>
    	<?php get_template_part( 'content', get_post_format() ); ?>
    	<?php if ($wp_query->current_post !== 0 && ($wp_query->current_post+1)%3 == 0 && function_exists ('adinserter')) {
    		echo adinserter (3);
    	} ?>
        <?php endwhile; ?>
    <?php endif; ?>

    P.s. adding the code at the end of each page is good enough. Don’t exactly have to be after every n-th post too though it would be nice if I can do that instead.

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    The problem is that you didn’t specific a render parameter in wyrta_infinite_scroll_init, so Jetpack falls back to a default loop, and jumps into content.php without seeing your special loop.

    Try adding a render parameter pointing to a function containing your special loop, and let me know if it helps.

    There are examples here if needed:
    http://jetpack.me/support/infinite-scroll/

    Jeremy, I’m a tad bit confused regarding the 'render' => 'xx_infinite_scroll_render', part.

    Should I move this:

    <?php if (have_posts()) : ?>
        <?php while (have_posts()) : the_post(); ?>
    	<?php get_template_part( 'content', get_post_format() ); ?>
    	<?php if ($wp_query->current_post !== 0 && ($wp_query->current_post+1)%3 == 0 && function_exists ('adinserter')) {
    		echo adinserter (3);
    	} ?>
        <?php endwhile; ?>
    <?php endif; ?>

    to this:

    function twenty_ten_infinite_scroll_render() {}

    Like this:

    function twenty_ten_infinite_scroll_render() {
        <?php if (have_posts()) : ?>
    					<?php while (have_posts()) : the_post(); ?>
    						   <?php get_template_part( 'content', get_post_format() ); ?>
    					<?php if ($wp_query->current_post !== 0 && ($wp_query->current_post+1)%3 == 0 && function_exists ('adinserter')) {
    						echo adinserter (3);
    					} ?>
    					<?php endwhile; ?>
    				<?php endif; ?>
    }

    Jeremy, I added this function but it doesn’t seem to change anything unfortunately:

    function wyrta_infinite_scroll_render() {
        if (have_posts()){
    		while (have_posts()) : the_post();
    			get_template_part( 'content', get_post_format() );
    			if ($wp_query->current_post !== 0 && ($wp_query->current_post+1)%3 == 0 && function_exists ('adinserter')) {
    				echo adinserter (3);
    			}
    		endwhile;
        }
    }
    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    Did you add wyrta_infinite_scroll_render to the render parameter?

    Yes Jeremy. This is the new function:

    function wyrta_infinite_scroll_init() {
    add_theme_support( 'infinite-scroll', array(
        'container' => 'content',
        'wrapper'	=> false,
        'posts_per_page' => 5,
        'render'    => 'wyrta_infinite_scroll_render',
        'footer' => false,
        'footer_widgets' => false,
    ) );
    }
    add_action( 'after_setup_theme', 'wyrta_infinite_scroll_init' );
    
    function wyrta_infinite_scroll_render() {
        if (have_posts()){
    		while (have_posts()) : the_post();
    			get_template_part( 'content', get_post_format() );
    			if ($wp_query->current_post !== 0 && ($wp_query->current_post+1)%3 == 0 && function_exists ('adinserter')) {
    				echo adinserter (3);
    			}
    		endwhile;
        }
    }
    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    Alright, that seems better.

    What happens when you just echo some test text instead of adinserter?

    I changed this:

    if ($wp_query->current_post !== 0 && ($wp_query->current_post+1)%3 == 0 && function_exists ('adinserter')) {
      echo adinserter (3);
    }

    to this:

    if ($wp_query->current_post !== 0 && ($wp_query->current_post+1)%3 == 0) {
        echo '<div style="width:100%;height:50px;background-color:#000;"></div>';
    }

    And the black 50px div is showing only on the first page again Jeremy.

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    How about trying a different approach, and hook your ads to the_content instead, like so:

    // Insert an ad after every third post
    function jeherve_insert_ad( $content ) {
    	global $wp_query;
    	if ( 2 == $wp_query->current_post ) {
    		return $content . '<div style="width:100%;height:50px;background-color:#000;"></div>';
    	} else {
    		return $content;
    	}
    }
    add_filter( 'the_content', 'jeherve_insert_ad', 99 );

    That seems to work in my tests.

    After adding the above to the functions.php file, I should remove the code below from the home.php right?

    if ($wp_query->current_post !== 0 && ($wp_query->current_post+1)%3 == 0 && function_exists ('adinserter')) {
      echo adinserter (3);
    }
    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    Yes, exactly!

    The wp-admin as well as the webpage just stop responding and I get a blank screen after adding the above to the functions.php file Jeremy.

    This is what I added on the functions.php file:

    // Insert an ad after every third post
    function wyrta_insert_ad( $content ) {
    	global $wp_query;
    	if ( 2 == $wp_query->current_post && function_exists ('adinserter') ) {
    		return $content;
    		echo adinserter(3);
    	} else {
    		return $content;
    	}
    }
    add_filter( 'the_content', 'wyrta_insert_ad', 99 );

    And this is what the home.php looks like:

    <?php if (have_posts()) : ?>
    	<?php while (have_posts()) : the_post(); ?>
    		<?php get_template_part( 'content', get_post_format() ); ?>
    	<?php endwhile; ?>
    <?php endif; ?>

    And the html div as well as the ad code stops displaying even on the first page.

    Also, if i keep return variable and echo on the same line like this:

    ‘return $content . echo adinserter(3);’

    wordpress breaks and I get a blank screen on wp-admin as well as the site.

    What should I do Jeremy? And I really appreciate your patience with this btw. Thank you

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    You’ll need to return adinserter(3);, not echo it. Try something like this:

    // Insert an ad after every third post
    function wyrta_insert_ad( $content ) {
    	global $wp_query;
    	if ( 2 == $wp_query->current_post && function_exists ( 'adinserter' ) ) {
    		return $content . adinserter(3);
    	} else {
    		return $content;
    	}
    }
    add_filter( 'the_content', 'wyrta_insert_ad', 99 );
Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘Add php codes at the end (or after every n-th post) of each infinite scroll page’ is closed to new replies.