0

I'm trying to make a WP Query with 2 HTML Templates (patterns).

I need

  • A (Content)
  • B (Content)
  • then Content (c)
  • and finally Content (D)

I manage to make the first template (A and B), but I'm having troubles with the 2nd (C and D), because it just get stuck in that template and keeps looping the rest of posts with that same template.

My code is the following:

<?php 
          $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
          $custom_args = array(
              'post_type' => 'causas_p',
              'posts_per_page' => 99,
              'order'      => 'ASC',
              'orderby'      => 'menu_order',
              'paged' => $paged
            );
          $custom_query = new WP_Query( $custom_args ); ?>                  
          <?php if ( $custom_query->have_posts() ) : ?>
            <?php $counter = 0; ?>
            <!-- the loop -->
            <?php while ( $custom_query->have_posts() ) : $custom_query->the_post(); ?>
            <?php $counter ++; ?>
            <div id="c<?php echo $counter;?>"  class="col-lg-3 col-md-6 center col-padding">
            <div class="max-height">
                <div class="common-height clearfix" style="max-width:130px; margin:0 auto">
                    <div class="col-md-4 nopadding"><img class="vertical-middle" src="<?php bloginfo("template_url"); ?>/imagenes/hojita-home-1.png"></div>
                    <div class="col-md-8 nopadding"><h2 class="LunchBoxBold vertical-middle "><?php the_title(); ?></h2></div>
                </div>    
                <p><?php the_field('contenido_causasp');?></p>
                <a class="boton" href="<?php the_permalink(); ?>">Únete</a>
            </div>
              </div>
              <div class="col-lg-3 col-md-6 col-padding" style="background: url('<?php the_field('imagen_causa');?>') center center no-repeat; background-size: cover;">
              </div>
                       <?php if ( $counter >= 2 ) {
                        break;
                        } ;?>

            <?php endwhile; ?>

<?php while ( $custom_query->have_posts() ) : $custom_query->the_post(); ?>
            <?php $counter ++; ?>
 <div class="col-lg-3 col-md-6 col-padding" style="background: url('<?php the_field('imagen_causa');?>') center center no-repeat; background-size: cover;">
</div>
<div id="c<?php echo $counter;?>" class="col-lg-3 col-md-6 center col-padding">
    <div class="max-height">
        <div class="common-height clearfix" style="max-width:130px; margin:0 auto">
            <div class="col-md-4 nopadding"><img class="vertical-middle" src="<?php bloginfo("template_url"); ?>/imagenes/hojita-home-1.png"></div>
            <div class="col-md-8 nopadding"><h2 class="LunchBoxBold vertical-middle "><?php the_title(); ?></h2></div>
        </div>    
        <p><?php the_field('contenido_causasp');?></p>
        <a class="boton" href="<?php the_permalink(); ?>">Únete</a>
    </div>
</div>
<?php if ( $counter >= 4 ) {
            $counter = 0;

            break;
            } ;?>

           <?php endwhile; ?>
            <?php wp_reset_postdata(); ?>
        <?php endif; ?>

How I can keep these 2 patterns with the rest of the posts?...

Sorry for my english, is not my native language.

Thanks in advance!

I had no luck :(

I didnt have any luck, but I used to update the code. Anyways it's actually showing the same post 4 times and then go to the other one, repeats itself 4 times, and to the other, and go on.

I don't know how to fix this. I think 'if' statement is resetting the loop :/. I don't know, please help.

'causas_p', 'posts_per_page' => 99, 'order' => 'ASC', 'orderby' => 'menu_order', 'paged' => $paged ); $custom_query = new WP_Query( $custom_args ); ?> have_posts() ) : ?> have_posts() ) : $custom_query->the_post(); ?> /imagenes/hojita-home-1.png">

">Únete ') center center no-repeat; background-size: cover;"> 

                    <?php ( $counter % 4 == 1 ) ;?>
                        <div id="c2"  class="col-lg-3 col-md-6 center col-padding">
                            <div class="max-height">
                                <div class="common-height clearfix" style="max-width:130px; margin:0 auto">
                                    <div class="col-md-4 nopadding"><img class="vertical-middle" src="<?php bloginfo("template_url"); ?>/imagenes/hojita-home-1.png"></div>
                                    <div class="col-md-8 nopadding"><h2 class="LunchBoxBold vertical-middle "><?php the_title(); ?></h2></div>
                                </div>    
                                <p><?php the_field('contenido_causasp');?></p>
                                <a class="boton" href="<?php the_permalink(); ?>">Únete</a>
                            </div>
                              </div>
                              <div class="col-lg-3 col-md-6 col-padding" style="background: url('<?php the_field('imagen_causa');?>') center center no-repeat; background-size: cover;">
                              </div>

                      <?php if( $counter % 4 == 2 ) ;?>
                <div class="col-lg-3 col-md-6 col-padding" style="background: url('<?php the_field('imagen_causa');?>') center center no-repeat; background-size: cover;">
                </div>
                <div id="c3" class="col-lg-3 col-md-6 center col-padding">
                    <div class="max-height">
                        <div class="common-height clearfix" style="max-width:130px; margin:0 auto">
                            <div class="col-md-4 nopadding"><img class="vertical-middle" src="<?php bloginfo("template_url"); ?>/imagenes/hojita-home-1.png"></div>
                            <div class="col-md-8 nopadding"><h2 class="LunchBoxBold vertical-middle "><?php the_title(); ?></h2></div>
                        </div>    
                        <p><?php the_field('contenido_causasp');?></p>
                        <a class="boton" href="<?php the_permalink(); ?>">Únete</a>
                    </div>
                </div>
                <?php if( $counter % 4 == 3 ) ;?>
                <div class="col-lg-3 col-md-6 col-padding" style="background: url('<?php the_field('imagen_causa');?>') center center no-repeat; background-size: cover;">
                </div>
                <div id="c3" class="col-lg-3 col-md-6 center col-padding">
                    <div class="max-height">
                        <div class="common-height clearfix" style="max-width:130px; margin:0 auto">
                            <div class="col-md-4 nopadding"><img class="vertical-middle" src="<?php bloginfo("template_url"); ?>/imagenes/hojita-home-1.png"></div>
                            <div class="col-md-8 nopadding"><h2 class="LunchBoxBold vertical-middle "><?php the_title(); ?></h2></div>
                        </div>    
                        <p><?php the_field('contenido_causasp');?></p>
                        <a class="boton" href="<?php the_permalink(); ?>">Únete</a>
                    </div>
                </div>
                <?php wp_reset_postdata(); ?>
               <?php if ( $counter >= 4 ) {
                            $counter = 0;
                            } ;?>



                           <?php endwhile; ?>
                            <?php wp_reset_postdata(); ?>
                        <?php endif; ?>
Improve this question
1
  • Hint: You are resetting your counter to 0 in *each* loop. Take a look at the examples in the answers below.
    – kaiser
    Aug 22, 2017 at 6:12

1 Answer 1

Reset to default
1

I know that you are ESL but I think we will need a few more details. You need to better comment your code, it is very confusing.

I will take a guess though.

Have a look a the Modulo % operator.

# Helper to simulate the while, replace this with `$wp_query->get_posts()` or similar
$posts = function() {
    static $posts = 20;
    $posts--;
    return $posts < 0 ?: $posts;
};
$counter = 0;
echo "Looping Posts".PHP_EOL;
while( $posts() ) {
  $counter++;
  echo "Post: {$counter}".PHP_EOL;
  if( $counter % 4 == 1 ) {
    /* template A? */
    echo ' (A)~~> Posts: 1, 5, 9, 13, 17, etc…'.PHP_EOL;

  } elseif( $counter % 4 == 2 ) {
    /* template B? */
    echo ' (B)~~> Posts: 2, 6, 10, 14, 18, etc…'.PHP_EOL;

  } elseif( $counter % 4 == 3 ) {
    /* template C? */
    echo ' (C)~~> Posts: 3, 7, 11, 15, 19, etc…'.PHP_EOL;

  } elseif( $counter % 4 == 0 ) {
    /* template D? */
    echo ' (D)~~> Posts: 4, 8, 12, 16, 20, etc…'.PHP_EOL;
  }
}

Example here on 3v4l.org, that you can try interactively.

Output:

Looping Posts
Post: 1
 (A)~~> Posts: 1, 5, 9, 13, 17, etc…
Post: 2
 (B)~~> Posts: 2, 6, 10, 14, 18, etc…
Post: 3
 (C)~~> Posts: 3, 7, 11, 15, 19, etc…
Post: 4
 (D)~~> Posts: 4, 8, 12, 16, 20, etc…
Post: 5
 (A)~~> Posts: 1,
Improve this answer
2
  • didn't work for me :(. Elseif is giving me syntax errors in my code. Tried with If but they keep repeating the same post four times before moving into the other post.
    – Krieg
    Aug 22, 2017 at 5:13
  • you must be making some other syntax error, can you paste the exact error you are getting from the server?
    – deflime
    Aug 22, 2017 at 7:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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