Style first 3 posts differently and use a 2nd loop to get rest of posts / offset and pagination broken

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"
    pSign 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=3offset=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

Topic offsets loop pagination Wordpress

Category Web

1
answered at

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(); ?>

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.