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('« Older Entries', $my_query->max_num_pages) ?>
<?php previous_posts_link('Newer Entries »') ?>
</ul>
</div>
</div>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>
TL;DR: Ideally I want to:
- Display the latest post as style1
- Display all the other posts as style2
- 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' );