I have a problem to display pagination using WP_Query. I've created a custom page, code below:


Template name: Models

<?php get_header(); ?>
<?php the_post();?>
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/models.css">   
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/responsive-min.css">
<section id="galery" style="background-image:url('<?php the_field('tlo');?>');">
<div class="container">
<?php $kat = get_field('kategory');?>
<?php $the_query = new WP_Query(array('post_type' => 'modelki', 'taxonomy' => $kat, 'posts_per_page' => '4')); ?>
<?php $i=1;?>
<?php if($the_query->have_posts()) : ?> 
    <?php while($the_query->have_posts()): $the_query->the_post(); ?>
    <article class="item">
        <a class="buka" href="#data-<?php echo $i;?>">
        <div class="layer"><span></span></div>
            <img src="<?php the_field('thumb');?>" alt="buka">
        <div class="text">
            <?php the_title(); ?>
            <a class="more buka" href="#data-<?php echo $i;?>">WIĘCEJ &nbsp; ></a>
        <div style="display:none">
            <div id="data-<?php echo $i;?>" class="fan">
                <?php $galeria = get_field('gallery'); ?>
            <?php if( $galeria ): ?>
            <div class="swiper-fans buka-<?php echo $i; ?>">            
            <a class="arrow-left" href="#"></a> 
            <a class="arrow-right" href="#"></a>
              <div class="swiper-wrapper">                  
                <?php foreach( $galeria as $obrazek ): ?>
                    <div class="swiper-slide" style="background-image:url('<?php echo $obrazek['sizes']['large']; ?>');"></div>
                <?php endforeach; ?>
            <?php endif;?>
                <div class="mym">
                    <h2><?php the_title();?></h2>
                    <div class="opis"><?php the_field('more_data');?></div>
    <script type="text/javascript">
      var myBuka = $('.buka-<?php echo $i; ?>').swiper({
        loop: true
      $('.arrow-left').on('click', function(e){
      $('.arrow-right').on('click', function(e){
    <?php $i++;?>
    <?php endwhile; ?>
<?php endif; ?>
<div class="pagination">
    <?php echo generatePagination(get_query_var('paged'), $the_query); ?>

It should work, all looks fine, but all pages display only the 1st four posts.

Any sugestions?


2 Answers 2


Thanks Pat J

I'have got solution now:

<?php  $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;  ?>
<?php $offset = ($paged - 1) * 4;?>
<?php $kat = get_field('kategory');?>
<?php $query = new WP_Query(array('offset' => $offset,'post_type' => 'modelki', 'taxonomy' => $kat, 'posts_per_page' => '4')); ?>
  • You can simplify this slightly by just setting paged in the query. Not sure why offset was suggested.
    – Milo
    Apr 11, 2014 at 14:59

You're using the argument 'posts_per_page' => '4' in the WP_Query.

That is why only 4 posts are showing up per page.

  • -1 If you check the link, the same 4 posts shows up on every page. Has nothing to do with posts_per_page Apr 10, 2014 at 21:22
  • Yes, there are 4 per page. This is ok.. Look, there are always 4 first. All pages got same posts Apr 10, 2014 at 22:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.