Wordpress Custom Query displayed into 3 different DIVs

Question

Hi guys,

I'm working on a news slider based on the well-known jQuery Tool Scrollable.

On the header of my site, I would like to create a new Query (only sticky posts with a maximum of 12 posts), display like this :

<!-- 1-4 -->
<div>
   <div>POST 1</div>
   <div>POST 2</div>
   <div>POST 3</div>
   <div>POST 4</div>
</div>
<!-- 5-8 -->
<div>
   <div>POST 5</div>
   <div>POST 6</div>
   <div>POST 7</div>
   <div>POST 8</div>
</div>
<!-- 9-12 -->
<div>
   <div>POST 9</div>
   <div>POST 10</div>
   <div>POST 11</div>
   <div>POST 12</div>
</div>

Any help or advices would be much appreciated!

Cheers,

Jk_

Answer 1

Get your posts from the db using your preferred method (get_posts, query_posts, $WP_Query) and put them into an array. For our purposes, lets call it $posts.

Then use array_chunk() to split $posts into an array of the size you specify.

$chunked_posts = array_chunk($posts,4);

where $chunked_posts is an array containing arrays each containing 4 posts. Then you can use a foreach loop on $chunked_posts in your template to display each chunk in it's own div.

<?php foreach($chunked_posts as $posts):?>
    <div>
        <?php foreach($posts as $post):?>
            <div><?php //display your post here ?></div>
         <?php endforeach;?>   
    </div>
<?php endforeach;?>