0

I create a shortcode to show posts by category with attributes. I want to show 2 separate categories with a separate shortcode in one page but the pagination connected.

If I change pagination in the first shortcode, also change pagination in the second shortcode. Basically it same shortcode but different attributes.

here my code:

add_shortcode('new-blog-grid','new_blog_grid');
function new_blog_grid($atts){
    ob_start();
    extract( shortcode_atts(
               array(
                       'count' => '',
                       'pagination' => '',
                       'category' => ''                   
               ),
               $atts
       ));

    if ($count) {$post_count = $count; } else {$post_count = 12; }
    $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;   

    $args = array(
        'post_type' => 'post' ,
        'posts_per_page' => $post_count,
        'post_status' => 'publish',
        'paged' => $paged,
        'ignore_sticky_posts' => true,
        'order' => 'DESC', 
        'orderby' => 'date'
    );

    if($category != null) {
        $args['category_name'] = $category;
    } 

    $query = new WP_Query($args);

    echo '<div class="listing-blog-grid">';

        if ($query->have_posts()) {
            while ($query->have_posts()) {
                $query->the_post(); 
                $thumbs = get_the_post_thumbnail_url();
                $terms = get_the_terms(get_the_ID(),'category');
                //print_r($terms);
                ?>
                <div class="listing-blog-list" onclick="location.href='<?php the_permalink()?>'" style="cursor:pointer;">
                    <div class="listing-blog-wrapper">
                        <div class="listing-blog-header">
                            <div class="listing-blog-images" onclick="location.href='<?php the_permalink()?>'" style="background: url('<?php echo $thumbs; ?>') no-repeat center; background-size:cover; background-color: rgba(0, 0, 0, 0.5);"></div>
                        </div>
                        <div class="listing-blog-content">
                            <div class="listing-date"><?php the_time( 'j F Y ' ); ?></div>                          
                            <?php the_title( '<h4 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h4>' ); ?>
                        </div> 
                    </div>              
                </div>
        <?php   }
        }

        else {
            echo "Geen berichten van deze auteur.";
        }

    echo '</div>';
     if ($pagination == 'yes') {  ?>
                  <div class="pagination">
            <?php
            $total_pages = $query->max_num_pages;
            $current_page = max( 1, get_query_var('paged'));

            if ($current_page != 1){
                 echo '<a href="/new-landing-page/"><img src="/wp-content/uploads/2019/06/paginatie-B-left.png"></a>';
            }

            if ($total_pages > 1){       
                echo paginate_links(array(
                    'base' => get_pagenum_link(1) . '%_%',
                    'format' => '/page/%#%',
                    'current' => $current_page,
                    'total' => $total_pages,
                    'prev_text' => __(''),
                    'next_text' => __(''),
                ));
            }
            if ($current_page != $total_pages){
                echo '<a href="/new-landing-page//page/'.$total_pages.'"><img src="/wp-content/uploads/2019/06/paginatie-B.png"></a>';
            }


            ?>                       
        </div>

        <?php }
    return ob_get_clean();
    wp_reset_query();
}

so shortcode I put in one page

cat: media

[new-blog-grid count=5 pagination=yes category=pr-media]

cat: stories

[new-blog-grid count=5 pagination=yes category=stories]

I need it became seperate pagination, is there any way to achieve that.

  • Because normal pagination will need to change the URL for query to parse. In this case, you might want to use ajax. Actually, when you fetch the page, it is still same URL because the WordPress still use the same query mechanism to read the page number. Since Ajax provide a way to update only the parts you wish, so it is possible to do it by Ajax, I have just tried and it works. – simongcc Apr 22 at 3:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.