Insert custom div between posts

Question

I'm using twenty twelve and I need to insert a div between the posts. I'm not sure how to stop the loop, insert the div, and then restart the loop.

Can anyone shed some light on this? Thanks.

Answer 1

You can check your position within the loop using the current_post var of the $wp_query object, and insert markup at a specific spot or at some interval. A simple example:

while( have_posts() ):
    the_post();

    the_title();
    the_excerpt();

    // if current_post is 1, insert the div
    // note that current_post starts at 0,
    // so this will be after the second post's content

    if( 1 == $wp_query->current_post ):
        echo '<div>My div!</div>';
    endif;

endwhile;

Answer 2

You can add the <div> right after the post is output by modifying index.php of the theme. Take a look at lines 22-25 (http://themes.trac.wordpress.org/browser/twenty-twelve/0.9/index.php), you'd place it right after line 24, which is responsible for pulling the right content type template in and displaying it.

<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
    <?php get_template_part( 'content', get_post_format() ); ?>
    <!-- You could insert your div here -->
<?php endwhile; ?>

If you wanted to get picky about which types of posts (regular posts, image posts, etc.) it comes after, then you could edit the content-*.php files themselves, and place it at the end of those templates.