Pagination for Portfolio Grid!

Question

Good day everybody,

I hope somebody can help me out with this one because I cannot figure it out.

After completing the project Bootstrap To Wordpress, I have tried to use the same principles for building a website for a friend.

Unfortunately, I have just found out that once I reach the limits of posts displayed on a single page, wordpress will not automatically generate a pagination number.

Naturally, some parameters can be changed by going into Settings -> Readings -> Blog pages show at most (12 is the default).

However; I only want 6 portfolio images per page!

I expected Wordpress to automatically create Page1, Page2 and so on as I increased the number of portfolio pieces and to my surprise it did not happen.

Is there a way or a plug in?

Considering the code created by Zac in "Creating a Portfolio Landing Page", do I have to modify something to achieve my goal?

Thank you so much.

Answer 1 · 2016-06-09T15:05:15Z

June 9, 2016 3:05pm

Just in case, I have resolved this challenge!

This is how the code would look like with some modification to the original code created by Zac if you want to display 4 images per page:

<?php /* Template Name: Portfolio Grid Template */ ?>

<?php get_header(); ?>

  <div class="col-md-12">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

      <div class="page-header">
        <h1><?php the_title(); ?></h1>
      </div>

      <?php the_content(); ?>

    <?php endwhile; else: ?>

      <div class="page-header">
        <h1>OH NOOO !</h1>
      </div>

      <p>No content is appearing for this page!</p>

    <?php endif; ?>

  </div>

</div>

<?php

$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;

  $args = array(
    'post_type'    => 'portfolio',
    'posts_per_page' => 4,
    'paged' => $paged
  );

  $the_query = new WP_Query( $args );

?>

<?php if ( $the_query->have_posts() ) : ?>

<!-- options -->
  <div class="row">
  <div class="col-xs-12 prev-next">

    <!-- pagination -->
    <?php echo get_previous_posts_link( '<span class="glyphicon glyphicon-circle-arrow-left"></span>' ); ?>
    <a href="<?php bloginfo('url'); ?>/?p=78"><span class="glyphicon glyphicon-th"></span></a>
    <?php echo get_next_posts_link( '<span class="glyphicon glyphicon-circle-arrow-right"></span>', $the_query->max_num_pages ); ?>
</div>
</div>
<!-- /.options -->  

<br>

  <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?> 

<div class="col-xs-3 portfolio-piece">
  <?php 
    $thumbnail_id = get_post_thumbnail_id();
    $thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail-size', true);
  ?>

  <p><a href="<?php the_permalink(); ?>"><img src="<?php echo $thumbnail_url[0]; ?>" alt="<?php the_title(); ?>graphic"></a></p>
  <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>

</div>
<?php $portfolio_count = $the_query->current_post + 1; ?>
<?php if ( $portfolio_count % 4 == 0 ): ?>
</div><div class="row">
<?php endif; ?>

<?php endwhile; endif; ?>

</div>

<?php get_footer(); ?>

Welcome to the Treehouse Community

Looking to learn something new?

Giuseppe Elia Brandi

Giuseppe Elia Brandi

Pagination for Portfolio Grid!

1 Answer

Giuseppe Elia Brandi

Giuseppe Elia Brandi

Jacob Mishkin

Jacob Mishkin