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; ?> 
  • Hint: You are resetting your counter to 0 in *each* loop. Take a look at the examples in the answers below. – kaiser Aug 22 '17 at 6:12
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,
  • 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 '17 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 '17 at 7:05

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.