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 5 replies - 16 through 20 (of 20 total)
  • Jeremy it seems to be working!! Thank you so much! But I need help with just one more thing. The div seems to be appearing right below the post text instead of below the thumbnail and post-text and post thumb. Should the changes be made on the function wyrta_insert_ad Jeremy?

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    That seems to be caused by your theme’s structure. The post thumbnail is in a different container, and the content container cannot come below that image.
    http://i.wpne.ws/c3SC

    I’d suggest trying to use a single container inside of two, and add the post thumbnail image in that container, floated left. The ad will then be as large as the container, and will be able to placed below the post thumbnail.

    Unfortunately, they are kept in separate columns so they’ll be responsive Jeremy. Also, how can the_post_thumbnail and the_content be combined on same div btw?

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    If both the image and the content container are floated left, you should be able to keep a responsive structure, even if the image is in the same container as the content.

    how can the_post_thumbnail and the_content be combined on same div btw?

    You’d have to edit your theme to make that change, and move the_post_thumbnail inside the same div as the_content.

    I have edited the html for the thumbnail a bit and it’s working beautifully now Jeremy. Thank you so much for your patience and help with this issue!!

    Regards,
    Andrew

Viewing 5 replies - 16 through 20 (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.