0

Can anybody help me with a situation I have on my custom archive-product.php?

I am trying to add pagination to my grid I have made but do not know where to start. This is the code for my products:

<?php $the_query = new WP_Query( array(
   'posts_per_page'=>12,
   'post_type'=>'product',
   'paged' => get_query_var('paged') ? get_query_var('paged') : 1)
   ); 
?>

<div class="container marginT10P">
    <div id="products" class="row view-group">
        <?php $query = new WP_Query( $args );
            if ( $the_query->have_posts() ) {
            global $wpdb;
            while ( $the_query->have_posts() ) : $the_query->the_post();
            $image = wp_get_attachment_image_src( get_post_thumbnail_id( $the_query->post->ID ), 'single-post-thumbnail' );
        ?>

  <div class="item col-xs-4 col-md-6 col-lg-4">
    <div class="thumbnail card">
      <div class="img-event">
        <a href="<?php the_permalink(); ?>"><img class="group list-group-image img-fluid propertysize" src="<?php echo $image[0]; ?>" alt="<?php get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ); ?>" alt="" /></a>
    </div>
    <div class="caption card-body">
        <?php global $woocommerce;
            $currency = get_woocommerce_currency_symbol();
            $price = get_post_meta( get_the_ID(), '_regular_price', true); 
        ?>
        <h4 class="group card-title inner list-group-item-heading text-grey"><?php echo $currency; echo $price; ?> pcm</h4>
        <i class="fa fa-bath"></i> <?php echo $product->get_attribute( 'bathrooms' ); ?>
        <div class="icon-marginL10"><i class="fa fa-bed"></i> <?php echo $product->get_attribute( 'bedrooms' ); ?></div>
        <div class="icon-marginL10"><i class="fa fa-couch"></i> <?php echo $product->get_attribute( 'lounges' ); ?></div>
        <p class="group inner list-group-item-text bold no-margin font-size14 text-grey"><?php the_title(); ?></p>
        <p class="group inner list-group-item-text font-size14"><?php echo get_post_meta( get_the_ID(), 'grid-description', true ); ?></p>
        <div class="row">
            <div class="col-xs-12 col-md-6 col-lg-6 text-left tabletL-margin">
                <a class="btn btn-primary padding40 bold" href="<?php the_permalink(); ?>">Full Details</a>
            </div>
            <div class="col-xs-12 col-md-6 col-lg-6 text-right">
                <a class="btn btn-success padding20 bold" href="<?php echo esc_url( home_url( '/request-call-back' ) ); ?>">Arrange To View</a>
            </div>
        </div>
    </div>
    <div class="img-event">
        <a class="btn btn-danger padding40 width100 bold" href="tel:01472222333">Call 01472 222333</a>  
    </div>
</div>
</div>
  <?php endwhile;
    } else {
      echo __( 'No products found' );
    }
  ?>
</div>
</div>

sorry for the messy code I will optimise it when it's complete

1
  • You should not use a WP_Query here, you should instead have used a standard loop then modified it using the pre_get_posts filter, avoiding a double query and allowing you to use standard pagination. By using WP_Query you're forced to reinvent pagination from scratch
    – Tom J Nowell
    Jul 24, 2021 at 0:34

1 Answer 1

-1

Hope you are doing good.

You can use the below sample code:

Updated: I have updated my Gist link to added code of template. Create a template with name template-product.php

<?php
/**
 * @author Baikare Sandeep
 * 
 * Template Name: Product
 */


get_header(); ?>

<?php 
    $args = array(
        'posts_per_page'=> 12,
        'post_type' => 'product',
        'post_status'   => 'publish',
        'paged'     => get_query_var('paged') ? get_query_var('paged') : 1
    ); 
?>

<div class="container marginT10P">
    <div id="products" class="row view-group">
        <?php $the_query = new WP_Query( $args );
            if ( $the_query->have_posts() ) {
            global $wpdb;
            while ( $the_query->have_posts() ) : 
                $the_query->the_post();
                $image = wp_get_attachment_image_src( get_post_thumbnail_id( $the_query->post->ID ), 'single-post-thumbnail' );
                ?>

                  <div class="item col-xs-4 col-md-6 col-lg-4">
                    <div class="thumbnail card">
                      <div class="img-event">
                        <a href="<?php the_permalink(); ?>"><img class="group list-group-image img-fluid propertysize" src="<?php echo $image[0]; ?>" alt="<?php get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ); ?>" alt="" /></a>
                    </div>
                    <div class="caption card-body">
                        <?php global $woocommerce;
                            $currency = get_woocommerce_currency_symbol();
                            $price = get_post_meta( get_the_ID(), '_regular_price', true); 
                        ?>
                        <h4 class="group card-title inner list-group-item-heading text-grey"><?php echo $currency; echo $price; ?> pcm</h4>
                        <i class="fa fa-bath"></i> <?php echo $product->get_attribute( 'bathrooms' ); ?>
                        <div class="icon-marginL10"><i class="fa fa-bed"></i> <?php echo $product->get_attribute( 'bedrooms' ); ?></div>
                        <div class="icon-marginL10"><i class="fa fa-couch"></i> <?php echo $product->get_attribute( 'lounges' ); ?></div>
                        <p class="group inner list-group-item-text bold no-margin font-size14 text-grey"><?php the_title(); ?></p>
                        <p class="group inner list-group-item-text font-size14"><?php echo get_post_meta( get_the_ID(), 'grid-description', true ); ?></p>
                        <div class="row">
                            <div class="col-xs-12 col-md-6 col-lg-6 text-left tabletL-margin">
                                <a class="btn btn-primary padding40 bold" href="<?php the_permalink(); ?>">Full Details</a>
                            </div>
                            <div class="col-xs-12 col-md-6 col-lg-6 text-right">
                                <a class="btn btn-success padding20 bold" href="<?php echo esc_url( home_url( '/request-call-back' ) ); ?>">Arrange To View</a>
                            </div>
                        </div>
                    </div>
                    <div class="img-event">
                        <a class="btn btn-danger padding40 width100 bold" href="tel:01472222333">Call 01472 222333</a>  
                    </div>
                </div>
                </div>
                <?php 
            endwhile;

            $big = 999999999; // need an unlikely integer
             echo paginate_links( array(
                'base' => str_replace( $big, '%#%', get_pagenum_link( $big ) ),
                'format' => '?paged=%#%',
                'current' => max( 1, get_query_var('paged') ),
                'total' => $the_query->max_num_pages
            ) );

            wp_reset_postdata();
    } else {
      echo __( 'No products found' );
    }
  ?>
</div>
</div>


<?php
get_footer();

I have tested it, and working with pagination.

Hope this will help you.

7
  • when adding <?php have_posts()) : $the_query -> the_post(); ?> it comes up with this error: Parse error: syntax error, unexpected ')
    – JoeCold
    Nov 15, 2018 at 11:58
  • I have updated my code for you
    – JoeCold
    Nov 15, 2018 at 12:18
  • I have updated my code in gist, please check that one. Hope it'll work. Nov 15, 2018 at 12:48
  • Thank you thats working but the pagination is <?php endwhile; $big = 999999999; // need an unlikely integer echo paginate_links( array( 'base' => str_replace( $big, '%#%', get_pagenum_link( $big ) ), 'format' => '?paged=%#%', 'current' => max( 1, get_query_var('paged') ), 'total' => $the_query->max_num_pages ) ); wp_reset_postdata(); } else { echo __( 'No products found' ); } ?> how do you style that ?
    – JoeCold
    Nov 15, 2018 at 13:21
  • You can use the more parameters in that function for before_page_number and after_page_number. Reference: codex.wordpress.org/Function_Reference/paginate_links Nov 15, 2018 at 15:42

Your Answer

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

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