While loop making even/odd blocks with uneven number. Hard code second block

2 Views

Probably my title is hard to understand, if you can make it more clear for everyone please edit my post thankyou.

So what i did i created a while loop and wanted the blocks going like a X

Read More

I have two blocks aside eachother everytime. But i want this X form.
So it will be (block 1) [gray] , (block 2) [darkgray]
and then going (block 1) [darkgray] , (block 2) [gray]. In order to achieve this i made inside my while loop a if function and before the if i created a counter++.
Counter starts at 0 and adds 1 till it gets too 3, because the 3 makes it uneven it will make this X form. But the problem is that the first two blocks will remain gray because of the uneven number 3 at the early on.

Does anyone know how i maybe could hardcode the first two blocks ?.

Also in my code i’m taking the information out of the database in a Descending order.

Its created in wordpress but its more about the php function i made here. 

It has to be. 
First = Gray
Second = Dark Gray
Third = Dark Gray
Fourth = Gray.

And this should repeat itself whole the time. 

enter code here

The code that is already been made(because the code is made in a different language i removed it and replaced with comments for easier understanding) : 

      global $wp_query;
      $temp = $wp_query; 
      $args = (array(
              'post_type' => 'news',
              'posts_per_page' => 9999,
             'post__not_in' => array(835),
             'order' => 'DESC'));
            $wp_query = new WP_Query();
       $counter = 0;
      $wp_query->query($args); 
      while ($wp_query->have_posts()) : 
           $wp_query->the_post(); 
      ?>
      <?php $counter ++; 
      if($counter == 3) { ?>
       /** here comes the dark gray block **/
     <?php $counter = 0; ?>
     <?php }else { ?>
      /** here comes the gray block **/
     <?php } ?>

So after alot of help of the community i found my the solution in the end. I feel so stupid that i did not found this out myself. Using this method you will obtain the (Block 1 = Gray),(Block 2 = Dark Gray),(Block 3 = Gray),(Block 4 = Dark Gray).
Solution 

 <?php $counter ++; 
  if($counter == 1) { ?>
   /** here comes the gray block **/
 <?php }else if($counter == 2 { ?>
  /** here comes the dark gray block **/
 <?php }else if($counter == 3 { ?>
  /** here comes the gray block **/
 <?php }else if($counter === 4 { ?>
  /** here comes the dark gray block **/
 <?php $counter = 0; } ?>

So what i did here in the end is i create the 4 first coloring manual and then i reset it just back to zero and let it loop this. since i have a row of two blocks everytime.

Post Views: 2

Related posts

Leave a Reply

4 comments

  1. instead of using conditions put all the content in parent div and place css for childs like this

    <div class="PARENT_DIV">
     while ($wp_query->have_posts()) : $wp_query->the_post(); 
      ?>
      <div id="CHILD_DIV">
         YOUR CONTENT 
      </div>
     <?php } ?>
</div>

<style>
    .PARENT_DIV:nth-child(odd){ background-color:#eee; }
    .PARENT_DIV:nth-child(even){ background-color:#fff; }
</style>

  2. It’s simple use modulo

    % is modulo operator. 

    <?php
for($counter=0; $counter<10; ++$counter)
echo (!($counter % 3)  ? "gray" : "dark gray").'<br>'; 
?>

    It outputs

    gray
dark gray
dark gray
gray
dark gray
dark gray
gray
dark gray
dark gray
gray

    As you wanted.

    I’ve created fiddle to show you how it works.

    Check fiddle

  3. The other answers have the right ideas but manage to make Zebra stripes, which is not what you asked for. This is a simple solution to show how it works, you need to modify it to suit your style.

    I put the colours in an array and then use the modulus operator but with a base of 4 which will return the value of 0,1,2,3,0,1,2,3,0,1… inside your loop. Use that as an index into the array to get the colour.

    $colours = array("gray","darkgray","darkgray","gray");

$counter = 0;

while (condition) {
    $colour = $colours[$counter % 4];
    //your code here

    $counter++;
}