Custon Content within WordPress Loop

Question

Custon Content within WordPress Loop

Milan Bastola

2018年7月28日 12:06

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.

Topic custom-content loop wp-query custom-post-types Wordpress

Category Web

Krzysiek Dróżdż · Accepted Answer · 2018年7月28日 12:06

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();
?>

Andrea Somovigo · Accepted Answer · 2018年7月27日 22:38

<?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();
?>

Custon Content within WordPress Loop

About