0

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.

enter image description here

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();
?>
  • This is well explained answer. I will surely give a try. Thanks – Milan Bastola Jul 30 '18 at 14:26
1
<?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();
?>
  • 1
    You don't need custom index variable... And you certainly don't need wp_reset_query() in there... – Krzysiek Dróżdż Jul 28 '18 at 11:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.