0

I've found some information about how to loop through posts but I haven't found exactly what I'm looking for.

Basically I'm looking to output 4 rows of posts (max of 10 post) on my home page.

First row:

<div class="tiles">
    <div class="tile"></div>
    <div class="tile large"></div>
</div>

Second row:

<div class="tiles">
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
</div>

Third row:

<div class="tiles">
    <div class="tile large"></div>
    <div class="tile"></div>
</div>

Fourth row:

<div class="tiles">
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
</div>

Here's a wire frame showing the desired layout. enter image description here

0

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.

  • I get your concept for sectioning the content into 2 blocks of 5 post each but I'm confused by your code. When I add this to the page as you suggest I don't get any output. – user3063628 Feb 12 '18 at 20:22
  • Where do you added this code? – Maxim Sarandi Feb 12 '18 at 20:23
  • I'm using the blankslate theme and I added this to page.php. I replaced <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> – user3063628 Feb 12 '18 at 20:34
  • This will work only in home.php. – Maxim Sarandi Feb 12 '18 at 20:34
  • I dont have a home.php file – user3063628 Feb 12 '18 at 20:35

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.