Loop and output 4 rows of posts on home page

Question

Lets see on your structure. You have 2 block, and each block have 2 lines. First line of block have 2 posts, second line – 3 posts.
See screen

First we chunk array to 5 per each chunk;
Next step wee need separate each array with 5 posts to 2 and 3 posts.

Than print all of this and add special class for every second block.

All code will looks like

global $wp_query;
$posts      = $wp_query->posts; // get posts from global query for home page
$chunks     = [];
$i          = 0;
$five_elems = array_chunk( $posts, 5 ); // Split an array into chunks 5 per array

foreach ( $five_elems as $five ) {
    $lines = array_chunk( $five, 2 ); // split our chunked array (5 per array) to 2-2-1
    $res   = array_merge( $lines[1], $lines[2] ); // merge 2-1 to 3 elements
    unset( $lines[1] ); // delete second `2`
    unset( $lines[2] ); // delete last `1`
    $lines[1] = $res; // create chunked array with 2-3 elems

    /*
     * Save all data to this like:
     *
 array (size=2)
  0 =>
    array (size=2)
      0 =>
        array (size=2)
          0 =>
            object(WP_Post)[1286]
              ...
          1 =>
            object(WP_Post)[1287]
              ...
      1 =>
        array (size=3)
          0 =>
            object(WP_Post)[1288]
              ...
          1 =>
            object(WP_Post)[1289]
              ...
          2 =>
            object(WP_Post)[1290]
              ...
  1 =>
    array (size=2)
      0 =>
        array (size=2)
          0 =>
            object(WP_Post)[1291]
              ...
          1 =>
            object(WP_Post)[1292]
              ...
      1 =>
        array (size=3)
          0 =>
            object(WP_Post)[1293]
              ...
          1 =>
            object(WP_Post)[1294]
              ...
          2 =>
            object(WP_Post)[1421]
              ...

 */
    $chunks[] = $lines;
}

foreach ( $chunks as $posts ) {
    ++ $i;

    // create class for every second element and other
    $class = $i % 2 === 0 ? 'small-right' : 'small-left';

    // your line with 2 posts (small and large)
    echo '<div class="tiles ' . $class . '">';
    foreach ( $posts[0] as $block ) {
        echo '<div class="tile">' . $block->ID . '</div>';
    }
    echo '</div>';


    // your 3 per line posts
    echo '<div class="tiles">';
    foreach ( $posts[1] as $block ) {
        echo '<div class="tile">' . $block->ID . '</div>';
    }
    echo '</div>';
}

Insert this code inside your home.php instead while(have_posts())..loop.

And remember – this is a simple example. I think it`s not best solution. I hope this code will help you and you understood me.

Related Posts: