Custon Content within WordPress Loop

Question

I have created a WP loop to display Services from 'Services' Custom Post Type:

Here is the code:

<?php
    $services_loop = new WP_Query( array( 'post_type' => 'service', 'posts_per_page' => -1 ) );
    if ( $services_loop->have_posts() ) :
        while ( $services_loop->have_posts() ) : $services_loop->the_post(); ?>
          <section class="single-service">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <?php the_post_thumbnail('full', array('class' => 'img-fluid w-100', 'alt' => get_the_title(), 'title' => get_the_title())); ?>
                    </div>
                    <div class="col-md-6">
                        <h3><?php the_title(); ?></h3>
                        <?php the_content(); ?></div>
                    </div>
                </div>
            </div>
        </section>
        <?php endwhile;
    endif;
    wp_reset_postdata();
?>

It display the list of services. But what I want is, I want to have a custom section within middle of the loop and I am not finding any solution for this. Here I will visualize my problem.

Answer 1

You can use current_post field of WP_Query to check inside the loop, or you can break the loop in two loops. Here are code samples:

<?php
    $services_loop = new WP_Query( array( 'post_type' => 'service', 'posts_per_page' => -1 ) );
    while ( $services_loop->have_posts() ) : $services_loop->the_post();
?>
    <section class="single-service">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <?php the_post_thumbnail('full', array('class' => 'img-fluid w-100', 'alt' => get_the_title(), 'title' => get_the_title())); ?>
                </div>
                <div class="col-md-6">
                    <h3><?php the_title(); ?></h3>
                    <?php the_content(); ?></div>
                </div>
            </div>
        </div>
    </section>
    <?php if ( 1 == $services_looop->current_post ) : ?>
    <div>
        Custom Content
    </div>
    <?php endif; ?>
<?php
    endwhile;
    wp_reset_postdata();
?>

Or the solution that splits the loop into two loops:

<?php
    $services_loop = new WP_Query( array( 'post_type' => 'service', 'posts_per_page' => -1 ) );
    while ( $services_loop->have_posts() && $services_loop->current_post < 2 ) :
        $services_loop->the_post();
?>
    <section class="single-service">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <?php the_post_thumbnail('full', array('class' => 'img-fluid w-100', 'alt' => get_the_title(), 'title' => get_the_title())); ?>
                </div>
                <div class="col-md-6">
                    <h3><?php the_title(); ?></h3>
                    <?php the_content(); ?></div>
                </div>
            </div>
        </div>
    </section>
<?php endwhile; ?>
<div>
    Custom Content
</div>
<?php while ( $services_loop->have_posts() ) : $services_loop->the_post(); ?>
    <section class="single-service">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <?php the_post_thumbnail('full', array('class' => 'img-fluid w-100', 'alt' => get_the_title(), 'title' => get_the_title())); ?>
                </div>
                <div class="col-md-6">
                    <h3><?php the_title(); ?></h3>
                    <?php the_content(); ?></div>
                </div>
            </div>
        </div>
    </section>
<?php
    endwhile;
    wp_reset_postdata();
?>

Answer 2

<?php
$services_loop = new WP_Query( array( 'post_type' => 'service', 'posts_per_page' => -1 ) );
$index=0;
if ( $services_loop->have_posts() ) :
    while ( $services_loop->have_posts() ) : $services_loop->the_post(); ?>
      <section class="single-service">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <?php the_post_thumbnail('full', array('class' => 'img-fluid w-100', 'alt' => get_the_title(), 'title' => get_the_title())); ?>
                </div>
                <div class="col-md-6">
                    <h3><?php the_title(); ?></h3>
                    <?php the_content(); ?></div>
                </div>
            </div>
        </div>
    </section>
    <?php 
    if($index==3){ //this will output your content after the 4th post of the loop
    ?>
      <div class="inner_content">your content</div>
    <?php
    }
    $index++
  endwhile;
endif;
wp_reset_query();
?>