145 posts
  • Has sold $10,000+ on Envato Market
  • Has been part of the Envato Community for over 5 years
  • Has referred 1+ members
  • Located in Australia
+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

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

Nudging…

36 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

145 posts
  • Has sold $10,000+ on Envato Market
  • Has been part of the Envato Community for over 5 years
  • Has referred 1+ members
  • Located in Australia
+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(); 
?>

36 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. ;)

145 posts
  • Has sold $10,000+ on Envato Market
  • Has been part of the Envato Community for over 5 years
  • Has referred 1+ members
  • Located in Australia
+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?

36 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?

145 posts
  • Has sold $10,000+ on Envato Market
  • Has been part of the Envato Community for over 5 years
  • Has referred 1+ members
  • Located in Australia
+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(); 

}

36 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.

145 posts
  • Has sold $10,000+ on Envato Market
  • Has been part of the Envato Community for over 5 years
  • Has referred 1+ members
  • Located in Australia
+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.

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by