WordPress – adding “Next” and “Previous” links to custom blog page

2 Views

I’m looking to add a “Next” and “Previous” links to a custom blog page I’m building in WordPress. What I have setup is a custom grid from Bootstrap, but I want to limit this grid to 12 posts per page (for obvious optimisation reasons). I’m a front-end developer so it’s a bit tricky for me to work out the PHP back-end.

How can I add a query in my blog page to include the next and previous links? I’m tried quite a few different solutions but can’t seem to get it working with my loop.

Read More

Thanks!

Code below: 

<?php 
/*
	Template Name: Blog Page
*/
?>
<?php get_header(); ?>

<header class="entry-header">
<h1 class="entry-title"><?php echo get_the_title(); ?></h1>
</header>


<div class="container">
<?php
  $args=array(
     'post_type' => 'post',
     'post_status' => 'publish',
     'posts_per_page' => 12
    );


  $my_query = null;
  $my_query = new WP_Query($args);

  if( $my_query->have_posts() ) {

  $i = 0;
  while ($my_query->have_posts()) : $my_query->the_post();
  if($i % 3 == 0) { ?> 

  <div class="row">

  <?php
  }
  ?>

    <div class="col-md-4">
      	<h4><a href="<?php the_permalink(); ?>" title="Read more"><?php the_title(); ?></a></h4>
		<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array(200,150) ); ?></a>
		<?php the_excerpt(); ?>
    </div>  

      <?php $i++; 
      if($i != 0 && $i % 3 == 0) { ?>
        </div><!--/.row-->
        <div class="clearfix"></div>

      <?php
       } ?>

      <?php  
        endwhile;
        }
        wp_reset_query();
       ?>


</div><!--/.container-->  

<?php get_footer(); ?>
Post Views: 2

Related posts

2 comments

  1. Use the paginate_links hook in combination with a custom WP_Query array. Make sure to specify the paged array parameter for the query. This sets up the query to give back paged results.

      <?php
    // 1- Setup paging parameter
    $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;

    // 2- Setup WP_query variable to get last 12 posts
    $args = array(
      'posts_per_page' => 12,
      'orderby' => 'most_recent',
      'paged' => $paged,
    );
    $the_query = new WP_Query( $args );

    // 3- Setup new loop
    if($the_query->have_posts()) : 
      while($the_query->have_posts()) : 
        $the_query->the_post();

    // 4- Output parameters you want here
        echo '<div class="col-md-4">';
        echo '<h4><a href="' . the_permalink() . 'title="Read more">' . the_title() . '</a></h4>';
        echo '<a href="' . the_permalink() . '">' . the_post_thumbnail( array(200,150) ) . '</a>';
        echo the_excerpt();
        echo '</div>';

    // 5- close up loop
      endwhile;
    endif;

    // 6- Output paginate_links just below post loop
    echo paginate_links( array(
      'base' => str_replace( 999999, '%#%', esc_url( get_pagenum_link( 999999 ) ) ),
      'format' => '?paged=%#%',
      'current' => max( 1, get_query_var('paged') ),
      'total' => $the_query->max_num_pages
    ) );

    // 7- reset post data query
    wp_reset_postdata(); 
  ?>

Comments are closed.