0

As I'm using the jQuery Tool "Scrollable" for my Related Posts section (see example here), I was wondering how I can implement an offset so that in the first loop it'll show the first 4 posts, then the next 4 related posts etc. I'm thinking about creating 3 loops like that right now, displaying the latest 12 related posts overall.

My current setup looks like this: (updated!)

           <h2>Related Posts</h2>                       
            

<!-- "previous page" action -->
<a class="prev browse left"></a>

<!-- root element for scrollable -->
<div class="scrollable" id=chained>   
   
   <!-- root element for the items -->
   <div class="items">


                            <?php 
                            $backup = $post;
                            $tags = wp_get_post_tags($post->ID);
                            if ($tags) {
                                $tag_ids = array();
                                foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
                            
                                $args = array(
    'tag__in' => $tag_ids,
    'post__not_in' => array($post->ID),
    'posts_per_page'=> 12
);

                                $my_query = new WP_Query( $args );
if( $my_query->have_posts() ):
?>  


   
  
      <div>


 <?php
    while ( $my_query->have_posts() ) : $my_query->the_post();

        the_title();

        // if this is not the last post
        // and remainder of current post plus one then divided by four is zero
        // close the container and open a new one
        if( $my_query->current_post != ( $my_query->post_count - 1 ) && ( ( $my_query->current_post + 1 ) % 4 ) == 0 ):
            ?>
            </div>

<div>
  <?php
        endif; 

 endwhile;
    ?>

            </div>



</div></div>

<!-- "next page" action -->
<a class="next browse right"></a>


<br clear="all" />

However, I just don't know how to implement it into the existing code. Not sure if that's even possible or if I first have to use a different way to create my loop to make it work?

Thanks a lot in advance! :)

EDIT: Last updated on October 16th. I still haven't figured this out, please help!

1 Answer 1

2

doing 3 separate queries is unnecessary and inefficient, do one query for all 12 posts and output your container markup every fourth post.

$args = array(
    'tag__in' => $tag_ids,
    'post__not_in' => array($post->ID),
    'posts_per_page'=> 12
);
$my_query = new WP_Query( $args );
if( $my_query->have_posts() ):
?>  
    <div class="container">
    <?php
    while ( $my_query->have_posts() ) : $my_query->the_post();

        the_title();

        // if this is not the last post
        // and remainder of current post plus one then divided by four is zero
        // close the container and open a new one
        if( $my_query->current_post != ( $my_query->post_count - 1 ) && ( ( $my_query->current_post + 1 ) % 4 ) == 0 ):
            ?>
            </div>
            <div class="container">
            <?php
        endif;

    endwhile;
    ?>
    </div>        
<?php
endif;
5
  • Thank you very much. I tried to implement your code suggestion (see my updated question), however I keep getting error messages. I guess I got the syntax wrong somewhere. I tried to play around a bit, but I just can't seem to find the mistake.
    – japanworm
    Sep 30, 2011 at 0:31
  • @japanworm - you're missing a closing ?> tag after $my_query->the_post();, then you need <?php again after the html in that section. also, your <div class="relatedPosts"> in my example is <div class="container">, so you should remove those from within the loop and change container to relatedPosts.
    – Milo
    Sep 30, 2011 at 1:27
  • Hello again. I tried to apply the modifications you suggested (see my updated question), but there's still some kind of syntax error I suppose?
    – japanworm
    Oct 1, 2011 at 10:26
  • Hello. It's been 2 weeks now and I still haven't figured it out. Do you mind modifying my original code so that it will work with your suggested modifications? Thanks so much.
    – japanworm
    Oct 14, 2011 at 5:29
  • I'd really like to mark your answer as accepted answer, however the code you provided doesn't seem to work no matter what I try. I've tried EVERYTHING. I keep getting various syntax errors. There must be another way to do this.
    – japanworm
    Oct 16, 2011 at 6:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.