0

I'm working on a theme and I am having trouble with loops/pagination breaks when using an offest. I looked online and tried to use only 1 loop (per this post) but I'm having trouble making it work.

I want to have the first 3 posts at the top of the page be the most recent (post 1-3), and then bottom 3 posts to be the next 3 (post 4-6), when you click on the pagination I want it to be at the top (post 1-3), and posts (7-9).

Right now the code works where it shows up properly on the first page, but when I click "back" on the pagination it just shows the exact same 6 posts over and over again on each previous page.

See my code for my Index page below:

<?php get_header(); ?>

<div class="row post-carousel">
<?php
    $args = array(
    'posts_per_page' => '3',
    );

    $query = new WP_query ( $args );
    if ( $query->have_posts() ) { ?>

<?php while ( $query->have_posts() ) : $query->the_post(); /* start the loop */ ?>

<div class="col-xs-12 col-sm-4">
<article id="post-<?php the_ID(); ?>" <?php post_class( 'most-recent' ); ?>>
    <?php if ( has_post_thumbnail() ) { ?>
        <a href="<?php the_permalink(); ?>">
                <div class="post-thumbnail-img"><?php the_post_thumbnail('index-carousel'); ?></div>

        </a>
    <?php } ?>
    <?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>


</article><!-- #post-## -->
</div>

<?php // End the loop.
endwhile;

rewind_posts();

} ?>
</div>

<div class="row newsletter-container">
<div class="newsletter col-sm-12 col-md-6">
    <p>Sign up for my newsletter, for all the latest updates!</p>
</div>
<div class="newsletter col-sm-12 col-md-6">

<!-- Begin MailChimp Signup Form -->
<!-- code goes here -->
<!--End mc_embed_signup-->

</div>
</div>


    <?php query_posts('posts_per_page=3&offset=3');
        if ( have_posts() ) : ?>

        <?php /* Start the Loop */ ?>
        <?php while ( have_posts() ) : the_post(); ?>

            <?php
                /* Include the Post-Format-specific template for the content.
                 * If you want to overload this in a child theme then include a file
                 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
                 */
                get_template_part( 'content', get_post_format() );
            ?>

        <?php endwhile; ?>

        <?php _tk_content_nav( 'nav-below' ); ?>

    <?php else : ?>

        <?php get_template_part( 'no-results', 'index' ); ?>

    <?php endif; ?>

<?php get_footer(); ?>

Also, when I try to use the PHP alternative syntax for control structures, it just seems to break the code and the whole page goes white.

Adding in the navigation code as well:

if ( ! function_exists( '_tk_content_nav' ) ) :
/**
 * Display navigation to next/previous pages when applicable
 */
function _tk_content_nav( $nav_id ) {
    global $wp_query, $post;

    // Don't print empty markup on single pages if there's nowhere to navigate.
    if ( is_single() ) {
        $previous = ( is_attachment() ) ? get_post( $post->post_parent ) : get_adjacent_post( false, '', true );
        $next = get_adjacent_post( false, '', false );

        if ( ! $next && ! $previous )
            return;
    }

    // Don't print empty markup in archives if there's only one page.
    if ( $wp_query->max_num_pages < 2 && ( is_home() || is_archive() || is_search() ) )
        return;

    $nav_class = ( is_single() ) ? 'post-navigation' : 'paging-navigation';

    ?>
    <nav role="navigation" id="<?php echo esc_attr( $nav_id ); ?>" class="<?php echo $nav_class; ?>">
        <h1 class="screen-reader-text"><?php _e( 'Post navigation', '_tk' ); ?></h1>
        <ul class="pager">

        <?php if ( is_single() ) : // navigation links for single posts ?>

            <?php previous_post_link( '<li class="nav-previous previous">%link</li>', '<span class="meta-nav">' . _x( '&larr;', 'Previous post link', '_tk' ) . '</span> %title' ); ?>
            <?php next_post_link( '<li class="nav-next next">%link</li>', '%title <span class="meta-nav">' . _x( '&rarr;', 'Next post link', '_tk' ) . '</span>' ); ?>

        <?php elseif ( $wp_query->max_num_pages > 1 && ( is_home() || is_archive() || is_search() ) ) : // navigation links for home, archive, and search pages ?>

            <?php if ( get_next_posts_link() ) : ?>
            <li class="nav-previous previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', '_tk' ) ); ?></li>
            <?php endif; ?>

            <?php if ( get_previous_posts_link() ) : ?>
            <li class="nav-next next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', '_tk' ) ); ?></li>
            <?php endif; ?>

        <?php endif; ?>

        </ul>
    </nav><!-- #<?php echo esc_html( $nav_id ); ?> -->
    <?php
}
endif; // _tk_content_nav
0

My advice would be to never use query_posts. Instead use a custom query or the pre_get_posts hook for both instances and always make sure you call wp_reset_postdata after your custom query.

BUT becase your nav function references the global $wp_query, you would have to use query_posts passing the paged parameter to it.

<?php get_header(); ?>

    <div class="row post-carousel">
        <?php
        $args = array(
            'posts_per_page' => '3',
        );

        $query = new WP_query ( $args );
        if ( $query->have_posts() ) { ?>

            <?php while ( $query->have_posts() ) : $query->the_post(); /* start the loop */ ?>

                <div class="col-xs-12 col-sm-4">
                    <article id="post-<?php the_ID(); ?>" <?php post_class( 'most-recent' ); ?>>
                        <?php if ( has_post_thumbnail() ) { ?>
                            <a href="<?php the_permalink(); ?>">
                                <div class="post-thumbnail-img"><?php the_post_thumbnail('index-carousel'); ?></div>

                            </a>
                        <?php } ?>
                        <?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>


                    </article><!-- #post-## -->
                </div>

            <?php // End the loop.
            endwhile;
            wp_reset_postdata();

        } ?>
    </div>

    <div class="row newsletter-container">
        <div class="newsletter col-sm-12 col-md-6">
            <p>Sign up for my newsletter, for all the latest updates!</p>
        </div>
        <div class="newsletter col-sm-12 col-md-6">

            <!-- Begin MailChimp Signup Form -->
            <!-- code goes here -->
            <!--End mc_embed_signup-->

        </div>
    </div>


<?php
$paged = ( get_query_var('page') ) ? get_query_var('page') : 1;
$second_args = array(
    'posts_per_page' => 3,
    'offset' => 3,
    'paged' => $paged
);
query_posts($second_args);
if ( have_posts() ) : ?>

    <?php /* Start the Loop */ ?>
    <?php while ( have_posts() ) : the_post(); ?>

        <?php
        /* Include the Post-Format-specific template for the content.
         * If you want to overload this in a child theme then include a file
         * called content-___.php (where ___ is the Post Format name) and that will be used instead.
         */
        get_template_part( 'content', get_post_format() );
        ?>

    <?php endwhile; wp_reset_postdata(); ?>

    <?php _tk_content_nav( 'nav-below' ); ?>

<?php else : ?>

    <?php get_template_part( 'no-results', 'index' ); ?>

<?php endif; ?>

<?php get_footer(); ?>
  • I tried this and the pagination still doesn't work. It still pulls up the same posts as the first page when I go to previous posts... any idea of how to fix the pagination issue? – Holly Jan 23 '17 at 17:13
  • Just searched for your nav function and can see it's referencing the global $wp_query. Updated my answer – Tunji Jan 23 '17 at 17:21
  • Hmm, I updated the code with your updates and it's still not working. I included the pagination code above on my original question. Would I need to change anything on there? – Holly Jan 23 '17 at 17:39

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.