WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Help with grid loop pagination (5 posts)

  1. adamrobertson
    Member
    Posted 1 year ago #

    I'm using the following code to display a grid loop with the first post being a main post that's styled differently than the rest. However, every paginated page follows the same format with the main post up top. What would I need to add to the code so all paginated pages just display the smaller post styling?

    <?php if (have_posts()) : ?>
        <?php
            /* Custom loop to show n main posts (title + excerpt) then
               finish with remainder as small posts (just title) in markup that allows
               columns of unequal mini-posts in rows.
    
               Here one main post then subsequent mini-posts in rows of 3.
               Total number per page defined in WP options
    
            */
            $count = 0; //start the counter
            $main_posts = 1; //set the number of main posts
        ?>
    
        <?php // find out how many posts so we can close this thing properly at the last post
        $totalposts = sizeof($posts); ?>
    
        <?php while (have_posts()) : the_post(); ?>
        <?php $count++; //increment counter by 1 ?>
        <?php $small_posts_count = ($count - $main_posts) ; // calculate the number of small posts ?>
          <?php if ($count < ($main_posts + 1)) : // if within the range of main post set above then...  ?>
                    <div <?php post_class('sheet') ?> id="post-<?php the_ID(); ?>">
                        <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
                        <div class="entry">
                            <?php the_content('Read more') ; ?>
                        </div>
                    </div>
            <?php else : // if loop is at small_posts start a wrapper div.loop2 for next row of posts ?>
                <?php // if (count-1)/3 is an integer then it's first in the row: open the wrapper
                    if (($small_posts_count - 1) % 3 == 0 ) { echo '<div class="loop2 clearfix">';} ?>
                    <div class="sheet<?php if ((isset($small_posts_count)) && ($small_posts_count % 3 == 0 )) { echo ' last';} // same logic to add class of last to last item in row of three ?>" id="post-<?php the_ID(); ?>">
                        <h4><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h4>
                    </div>
                <?php //close the row if multiple of three (using same logic as above) or if it's the last post
                    if (($count == $totalposts) || ($small_posts_count % 3 == 0 )) { echo '</div><!-- .loop2 -->';} // if is multiple of three ?>
    
          <?php endif; ?>
    
            <?php endwhile; ?>
    
            <?php if (!is_page()) { // get older and/or newer posts links (not for single posts) ?>
            <?php include( TEMPLATEPATH . '/tpl.nav.posts.php' );  ?>
            <?php ; } ?>
    
            <?php else : ?>
            <?php include( TEMPLATEPATH . '/tpl.search.404.php' ); // get 404 error message ?>
        <?php endif; ?>
  2. alchymyth
    Forum Moderator
    Posted 1 year ago #

    use the conditional tag is_paged() http://codex.wordpress.org/Function_Reference/is_paged

    example:

    <?php if ( !is_paged() && $count < ($main_posts + 1)) : // if within the range of main post set above then...  ?>
  3. adamrobertson
    Member
    Posted 1 year ago #

    Thanks. I added this but not the posts on the paginated pages are messed up. Furthermore, pagination works fine on my local (although the formatting is still off) but pagination isn't working on the live version:

    http://inspirato.hellomynameisad.am/

    Any ideas? Thanks so much.

  4. adamrobertson
    Member
    Posted 1 year ago #

    Got the issue of pagination working on the live version fixed. All I'm left with is the formatting not working correctly on paginated pages:

    http://inspirato.hellomynameisad.am/

  5. adamrobertson
    Member
    Posted 1 year ago #

    Here's my new code. Everything works as expected except the formatting for the paginated pages is off (I think the 2 featured posts on the first page is throwing the counter off). Any help?

    http://inspirato.hellomynameisad.am/

    <?php
    					global $wp_query;
    
    					$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    
    					if ( get_query_var('paged') ) {
    
    					    $paged = get_query_var('paged');
    
    					} elseif ( get_query_var('page') ) {
    
    					    $paged = get_query_var('page');
    
    					} else {
    
    					    $paged = 1;
    
    					}
    
    					query_posts(array('posts_per_page' => '5','paged'=>$paged,'category_name'=>'uncategorized')); ?>
    
    					<?php if (have_posts()) : ?>
    					    <?php
    					        /* Custom loop to show n main posts (title + excerpt) then
    					           finish with remainder as small posts (just title) in markup that allows
    					           columns of unequal mini-posts in rows.
    
    					           Here one main post then subsequent mini-posts in rows of 3.
    					           Total number per page defined in WP options
    
    					        */
    					        $count = 0; //start the counter
    					        $main_posts = 2; //set the number of main posts
    					    ?>
    
    					    <?php // find out how many posts so we can close this thing properly at the last post
    					    $totalposts = sizeof($posts); ?>
    
    					    <?php while (have_posts()) : the_post(); ?>
    					    <?php $count++; //increment counter by 1 ?>
    					    <?php $small_posts_count = ($count - $main_posts) ; // calculate the number of small posts ?>
    					      <?php if ( !is_paged() && $count < ($main_posts + 1)) : // if within the range of main post set above then...  ?>
    
    					                <div class="sixcol feature<?php if ((isset($count)) && ($count % 2 == 0 )) { echo ' last';} // same logic to add class of last to last item in row of two ?>" id="post-<?php the_ID(); ?>">
    					                    <article id="post-<?php the_ID(); ?>" role="article">
    
    					                    	<div class="thumb-wrapper mobile">
    					                    	<?php if(has_post_thumbnail()) { $image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),'post-thumb' ); echo '<img src="' . $image_src[0] . '" width="100%" class="post-thumb" />'; } ?>
    
    					                    	    <header class="post-thumb-header">
    					                    		    <h2 class="post-title"><?php the_title(); ?></h2>
    					                    	    </header> <!-- end article header -->
    					                    	    <p class="meta"><?php the_category(', '); ?></p>
    					                    	</div>
    
    					                    	<section class="mobile-content">
    					                    		<?php the_excerpt(); ?>
    					                    	</section>
    
    					                        </article> <!-- end article -->					                </div>
    					        <?php else : // if loop is at small_posts start a wrapper div.loop2 for next row of posts ?>
    					            <?php // if (count-1)/3 is an integer then it's first in the row: open the wrapper
    					                if (($small_posts_count - 1) % 3 == 0 ) { echo '<div class="loop2 clearfix">';} ?>
    					                <div class="fourcol small<?php if ((isset($small_posts_count)) && ($small_posts_count % 3 == 0 )) { echo ' last';} // same logic to add class of last to last item in row of three ?>" id="post-<?php the_ID(); ?>">
    					                    <article id="post-<?php the_ID(); ?>" role="article">
    
    					                    	<div class="thumb-wrapper mobile">
    					                    	<?php if(has_post_thumbnail()) { $image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),'post-thumb' ); echo '<img src="' . $image_src[0] . '" width="100%" class="post-thumb" />'; } ?>
    
    					                    	    <header class="post-thumb-header">
    					                    		    <h2 class="post-title"><?php the_title(); ?></h2>
    					                    	    </header> <!-- end article header -->
    					                    	    <p class="meta"><?php the_category(', '); ?></p>
    					                    	</div>
    
    					                    	<section class="mobile-content">
    					                    		<?php the_excerpt(); ?>
    					                    	</section>
    
    					                        </article> <!-- end article -->
    					                </div>
    					            <?php //close the row if multiple of three (using same logic as above) or if it's the last post
    					                if (($count == $totalposts) || ($small_posts_count % 3 == 0 )) { echo '</div><!-- .loop2 -->';} // if is multiple of three ?>
    
    					      <?php endif; ?>
    
    					        <?php endwhile; ?>
    
    					        						        <nav class="wp-prev-next">
    					        							        <ul class="clearfix">
    					        								        <li class="prev-link"><?php next_posts_link(_e('&laquo; Older Entries', "bonestheme")) ?></li>
    					        								        <li class="next-link"><?php previous_posts_link(_e('Newer Entries &raquo;', "bonestheme")) ?></li>
    					        							        </ul>
    					        					    	    </nav>
    
    					    <?php endif; ?>

Topic Closed

This topic has been closed to new replies.

About this Topic