112 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Located in Australia
  • Has sold $10,000+ on Envato Market
+3 more
ThemeChills says

Hi everyone,

I’m hoping you can help. I would like to automatically trigger pagination on the Photos section of my theme, once a user has added more than 8 posts. I’m wondering how to go about it.

Here is the link to my theme http://wp.themechills.com/eternity/.

Here is the code that displays these photos:


function chills_photo_gallery_shortcode( $atts, $content = null ) {

    extract(shortcode_atts(array(
        'exclude' => '',
        'include' => '',
    ), $atts));

    //comma separated user input IDs to array
    $post_include = isset($include) && $include != '' ? explode( ',', $include) : '' ;
    $post_exclude = isset($exclude) && $exclude != '' ? explode( ',', $exclude) : '' ;

    $the_query = new WP_Query(array(
                'post_type'           => 'photo',
                'post_status'           => 'publish',
                'post__in'                 => $post_include, //array
                'post__not_in'           => $post_exclude, //array
                'posts_per_page'       => -1,
                'ignore_sticky_posts' => 1,
            ));

    $html = ''; 

    if( $the_query->have_posts() ) :

        $html .= '<ul class="clearing-thumbs" data-clearing="">';

                        while ( $the_query->have_posts() ) : $the_query->the_post();

                            // define the variables
                            $featured_img        = get_the_post_thumbnail( get_the_ID(), 'full' );
                            $featured_img_title    = get_the_title();

                            $thumbnail_id           = get_post_thumbnail_id(get_the_ID());
                            $thumbnail_object     = get_post($thumbnail_id);
                            $thumbnail_src         = $thumbnail_object->guid;

                            $html.='<li><a href="'.$thumbnail_src.'">'.$featured_img.'<span class="overlay-label">'.$featured_img_title.'</span></a></li>';

                        endwhile; //END loop

        $html .= '</ul>';

    endif;

    return $html;

}

I look forward to your recommendations, thanks in advance.

Leo

112 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Located in Australia
  • Has sold $10,000+ on Envato Market
+3 more
ThemeChills says

Nudging…

35 posts
  • Has sold $100+ on Envato Market
  • Has been part of the Envato Community for over 3 years
  • Located in Bulgaria
  • Sells items exclusively on Envato Market
CodeBrewery says

Hey Leo,

Without being much of an expert in WordPress, I’m thinking the following:

In the WP_Query args set posts_per_page to 8, then trigger pagination by displaying the next_posts_link and previous_posts_link after your endwhile. Do not forget the “paged” parameter – you can read how it is used with WP_Query here.

It seems you will also need an additional wrapper around the UL so the pagination is outside the list. Then it’s up to you to figure out what to do with these links.

Let me know if I have misunderstood the question or anything, because I just got up and I’m still sleepy. ^^

Cheers,
Ivelin

112 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Located in Australia
  • Has sold $10,000+ on Envato Market
+3 more
ThemeChills says

Thanks @CodeBrewery. Unfortunately I updated the code with your recommendation but the pagination does not show. It’s a bit of a head scratcher…


function chills_photo_gallery_shortcode( $atts, $content = null ) {

    extract(shortcode_atts(array(
        'exclude' => '',
        'include' => '',
    ), $atts));

    //Protect against arbitrary paged values
    $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;

    //comma separated user input IDs to array
    $post_include = isset($include) && $include != '' ? explode( ',', $include) : '' ;
    $post_exclude = isset($exclude) && $exclude != '' ? explode( ',', $exclude) : '' ;

    $args = array(
                'post_type'           => 'photo',
                'post_status'           => 'publish',
                'post__in'                 => $post_include, //array
                'post__not_in'           => $post_exclude, //array
                'posts_per_page'       => 8,
                'ignore_sticky_posts' => 1,
                'paged'               => $paged,
            );

    $the_query = new WP_Query( $args );

    $html = ''; 

    if( $the_query->have_posts() ) :

        $html .= '<ul class="clearing-thumbs" data-clearing="">';

                        while ( $the_query->have_posts() ) : $the_query->the_post();

                            // define the variables
                            $featured_img        = get_the_post_thumbnail( get_the_ID(), 'full' );
                            $featured_img_title    = get_the_title();

                            $thumbnail_id           = get_post_thumbnail_id(get_the_ID());
                            $thumbnail_object     = get_post($thumbnail_id);
                            $thumbnail_src         = $thumbnail_object->guid;

                            $html.='<li><a href="'.$thumbnail_src.'">'.$featured_img.'<span class="overlay-label">'.$featured_img_title.'</span></a></li>';

                        endwhile; //END loop

        $html .= '</ul>';

    endif;

    return $html;

}

?>

<?php

// next_posts_link() usage with max_num_pages
next_posts_link( 'Older Entries', $the_query->max_num_pages );
previous_posts_link( 'Newer Entries' );
?>

<?php 
// clean up after the query and pagination
wp_reset_postdata(); 
?>

35 posts
  • Has sold $100+ on Envato Market
  • Has been part of the Envato Community for over 3 years
  • Located in Bulgaria
  • Sells items exclusively on Envato Market
CodeBrewery says

Not sure if you have updated the live site (I checked the link from your OP), but for the pagination to show, you will need more than 8 posts – in your case, photos.

Also, make sure next_posts_link and previous_posts_link are right after endwhile; and that they are followed by wp_reset_postdata(). You want all of this happening inside your shortcode function, I would think. ;)

112 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Located in Australia
  • Has sold $10,000+ on Envato Market
+3 more
ThemeChills says

Yes, I am testing locally. I got the pagination to show, but there are two things:

1. Pagination appears in a complete different section and not directly underneath the photos
2. URL path goes to a 404

Thoughts?

35 posts
  • Has sold $100+ on Envato Market
  • Has been part of the Envato Community for over 3 years
  • Located in Bulgaria
  • Sells items exclusively on Envato Market
CodeBrewery says

You need to place the pagination functions and the reset_postdata call inside the Loop. I trust you have done this?

112 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Located in Australia
  • Has sold $10,000+ on Envato Market
+3 more
ThemeChills says

I have, yep. Here is the updated code block


function chills_photo_gallery_shortcode( $atts, $content = null ) {

    extract(shortcode_atts(array(
        'exclude' => '',
        'include' => '',
    ), $atts));

    //Protect against arbitrary paged values
    $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;

    //comma separated user input IDs to array
    $post_include = isset($include) && $include != '' ? explode( ',', $include) : '' ;
    $post_exclude = isset($exclude) && $exclude != '' ? explode( ',', $exclude) : '' ;

    $args = array(
                'post_type'           => 'photo',
                'post_status'           => 'publish',
                'post__in'                 => $post_include, //array
                'post__not_in'           => $post_exclude, //array
                'posts_per_page'       => 7,
                'ignore_sticky_posts' => 1,
                'paged'               => $paged,
            );

    $the_query = new WP_Query( $args );

    $html = ''; 

    if( $the_query->have_posts() ) :

        $html .= '<ul class="clearing-thumbs" data-clearing="">';

                        while ( $the_query->have_posts() ) : $the_query->the_post();

                            // define the variables
                            $featured_img        = get_the_post_thumbnail( get_the_ID(), 'full' );
                            $featured_img_title    = get_the_title();

                            $thumbnail_id           = get_post_thumbnail_id(get_the_ID());
                            $thumbnail_object     = get_post($thumbnail_id);
                            $thumbnail_src         = $thumbnail_object->guid;

                            $html.='<li><a href="'.$thumbnail_src.'">'.$featured_img.'<span class="overlay-label">'.$featured_img_title.'</span></a></li>';

                        endwhile; //END loop

        $html .= '</ul>';

        $html .= '<ul><li>';

            // next_posts_link() usage with max_num_pages
            next_posts_link( 'Older Entries', $the_query->max_num_pages );
            previous_posts_link( 'Newer Entries' );

        $html .= '</li></ul>';

    endif;

    return $html;

    // clean up after the query and pagination
wp_reset_postdata(); 

}

35 posts
  • Has sold $100+ on Envato Market
  • Has been part of the Envato Community for over 3 years
  • Located in Bulgaria
  • Sells items exclusively on Envato Market
CodeBrewery says

Can you set up a demo area on your site and let me have a look? I may well be missing something important, but the code you posted looks correct.

112 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Located in Australia
  • Has sold $10,000+ on Envato Market
+3 more
ThemeChills says

Here is the demo environment http://wp.themechills.com/sandbox/

As you can see ‘Older Entries’ displays, but not under the Photos themeselves. In addition, when you click the text link it goes to http://wp.themechills.com/sandbox/?paged=2 and gives a 404.

by
by
by
by
by
by