Custom Loop Pagination on WordPress

Question

I'm trying to create a magazine style website. For this particular page (not homepage) I'd like to fetch the latest post and style it one way (style1). For all the other posts I'd like to just display smaller (style2).

This is working fine, BUT I would also like to enable pagination. Is there anyway to have pagination appear at the bottom, when the user clicks previous older posts will be shown in the second style (style2)?

My code so far is below:

<?php 
/*
Template Name: Interview
*/
get_header(); ?>
<div id="content" class="wrapper">

<div id="main" class="post">
<ul id="latest-feature">
<h3>Interviews</h3>
<?php
    $args=array(
    'cat' => '12,3',
    'post_type' => 'post',
    'post_status' => 'publish',
    'posts_per_page' => 3,
    'caller_get_posts'=> 1
    );
    $my_query = null;
    $my_query = new WP_Query($args);
    while ($my_query->have_posts()) : $my_query->the_post(); 

    $counter++;
    if($counter===1) {
?>

<li class="main-box">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'slider-image' );  } ?>

<h4><?php the_title(); ?></h4></a>
<span><?php the_time('j M') ?> | <?php comments_number('No Comments', 'One Comment', '% Comments' );?></span>

<?php my_excerpt(40); ?>

</li>
</ul>
<ul id="other-features">
<?php } else { ?>
<li class="box">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<span class="box-img">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'latest-thumb-small' );  } ?>
</span>
<div class="box-content">
<h4>
<?php the_title(); ?></a>
</h4>
<span><?php the_time('j M') ?> | <?php comments_number('No Comments', 'One Comment', '% Comments' );?></span>
<?php my_excerpt(30); ?>
</div>
</li>
<?php } ?>

<?php endwhile; ?>

<?php next_posts_link('&laquo; Older Entries', $my_query->max_num_pages) ?>
<?php previous_posts_link('Newer Entries &raquo;') ?>

</ul>
</div>
</div>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

TL;DR: Ideally I want to:

1. Display the latest post as style1
2. Display all the other posts as style2
3. When the user clicks NEXT/PREVIOUS, load more posts and style them as style2. Unless they are on the latest post page.

UPDATED CODE;

<?php 
/*
Template Name: Film
*/
get_header(); ?>
        <div id="content" class="wrapper">

            <div id="main" class="post">

<ul id="latest-feature">
<?php 

// Only on the first page
if ( ! is_paged() ) {

    // Custom query - latest post
    $latest_post = new WP_Query( array(
        'cat' => '4',
        'post_type' => 'post',
        'post_status' => 'publish',
        'posts_per_page' => 1
    ) );
    // Output latest post
    if ( $latest_post->have_posts() ) : while ( $latest_post->have_posts() ) : $latest_post->the_post();
        ?>

<li class="main-box">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'slider-image' );  } ?>

<h4><?php the_title(); ?></h4></a>
<span><?php the_time('j M') ?> | <?php comments_number('No Comments', 'One Comment', '% Comments' );?></span>

<?php my_excerpt(40); ?>
</li>
</ul>
<ul id="other-features">
<?php 
    endwhile; endif;
    // Don't forget me
    wp_reset_postdata();

}

// Main query
if ( have_posts() ) : while ( have_posts() ) : the_post();
?>

           <li class="box">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<span class="box-img">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'latest-thumb-small' );  } ?>
</span>
<div class="box-content">
<h4>
<?php the_title(); ?></a>
</h4>
<span><?php the_time('j M') ?> | <?php comments_number('No Comments', 'One Comment', '% Comments' );?></span>
<?php my_excerpt(30); ?>
</div>
</li>
<?php 
endwhile; endif;
?>
</ul>
<?php 
// Pagination
next_posts_link();
previous_posts_link();

?>
</div>
            </div>
            <?php get_sidebar(); ?>
        </div>
<?php get_footer(); ?>

Functions:

function wpse121486_pre_get_posts( $query ) {
        // Main blog posts index, first page, main query
        if ( is_home() && ! $query->is_paged() && $query->is_main_query() ) {
            $query->set( 'posts_per_page', 9 );
            $query->set( 'offset', 1 );
        }
    }
    add_action(

 'pre_get_posts', 'wpse121486_pre_get_posts' );

Answer 1

Edit

So, the reason that this isn't working is because you've modified the question to specify that this is happening in a custom page template. Since this is the case, you'll need to use two separate custom queries, and won't need to bother with filtering the main query via pre_get_posts.

The first query will be the same as below. The second will be similar, but we'll add some conditionals in to account for the featured post on the first page:

// Main posts query args
$posts_query_args = array(
    'posts_per_page' => 10
);

// Conditionally modify the query
if ( ! is_paged() ) {
    // Apply offset
    $posts_query_args['offset'] = 1;
    $posts_query_args['posts_per_page'] = 9;
}

// Run the query
$posts_query = new WP_Query( $posts_query_args );

// Loop
if ( $posts_query->have_posts() ) : while ( $posts_query->have_posts() ) : $posts_query->the_post();
    // Loop markup here
endwhile; endif;
// Reset post
wp_reset_postdata();

To get pagination working properly, you'll need to refer to this answer.

Original Answer

I think the easiest solution would be:

1. Use a custom query for the single, latest post
2. Filter the main query at pre_get_posts, to apply an offset of 1

This method will assume that the latest post special styling will happen only on the first page; on subsequent pages, posts will all use the normal style. Otherwise, we'd have to add an extra fix to account for broken pagination due to our use of offset.

In the template:

// Only on the first page
if ( ! is_paged() ) {

    // Custom query - latest post
    $latest_post = new WP_Query( array(
        'posts_per_page' => 1
    ) );
    // Output latest post
    if ( $latest_post->have_posts() ) : while ( $latest_post->have_posts() ) : $latest_post->the_post();
        // Style 1 loop
    endwhile; endif;
    // Don't forget me
    wp_reset_postdata();

}

// Main query
if ( have_posts() ) : while ( have_posts() ) : the_post();
    // Style 2 loop
endwhile; endif;

// Pagination
next_posts_link();
previous_posts_link();

In functions.php:

function wpse121486_pre_get_posts( $query ) {
    // Main blog posts index, first page, main query
    if ( is_home() && ! $query->is_paged() && $query->is_main_query() ) {
        $query->set( 'posts_per_page', 9 );
        $query->set( 'offset', 1 );
    }
}
add_action( 'pre_get_posts', 'wpse121486_pre_get_posts' );

Answer 2

You can include in your conditional is_paged() to determine if you are past page 1.

So, example:

while ($my_query->have_posts()) : $my_query->the_post(); 
    $counter++;
    if($counter===1 && !is_paged()) {
        // do first-post stuff
    } else {
        // do other stuff
    }
endwhile;