Want to add pagination to this page (WP Theme)

[drewhew]

So, here goes...

 

On my website, http://jamaica2go.com, I have destinations laid out in thumbnails on the main destination page. The page is using three columns. The page works fine as it is, however, I know that as I add more locations scrolling will become an issue. The author did a great job on this theme and he also gave an option to select maximum number of items to be shown but no paging occurs once you hit that max (weird, right?).

 

I have tried, I really have. Reading up on the WP codex, hunting down scripts and tutorials, all with a view to adding this simple feature. I know if someone figures this out it's going to be easy as cheese but the drawback for me is that I'm not a PHP programmer, just pretty decent at editing and changing the code.

 

Anyway, I'm posting the entire page code below (realised at end that I can attach, so did that instead). The important stuff happens in the "uxbarn_custom_port_load_portfolio_shortcode" function and onward. I noticed that although he starts a while loop to write the thumbnails to the page, he doesn't seem to end it. He also has a pagination template for the blog page which I'll add below but I couldn't make heads or tails of it. Hope someone can assist.

 

 

PORTFOLIO PAGE

------------------------------------------------------------------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------------------------------------------------------------------

 

 

 

 

 

The template below is used for blog and search and is called with:

        <?php get_template_part( 'template-pagination' ); ?>

 

 

PAGINATION TEMPLATE

------------------------------------------------------------------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------------------------------------------------------------------

 

<?php

    $big = 999999999;
    
    global $wp_query;
    $total_pages = $wp_query->max_num_pages;
    
    if( is_search() ) {
        // Only for search page, there are 10 posts per page
        // And always round up the result
        $total_pages = ceil( $wp_query->found_posts / 10 );
    }
    
    if ( $total_pages > 1 ) {
        
        echo '<div class="row no-margin-bottom">
                <div id="blog-pagination" class="uxb-col large-12 columns pagination-centered">
                    ';
        
        $current_page = max( 1, get_query_var( 'paged' ) );
        echo paginate_links( array(  
          'base'         => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
          'format'         => '&page=%#%',  
          'current'     => $current_page,  
          'total'         => $total_pages,  
          'prev_text'     => '<i class="icon ion-ios7-arrow-left"></i>',  
          'next_text'     => '<i class="icon ion-ios7-arrow-right"></i>',
          'type'         => 'list'
        ));
        
        echo '</div>
            </div>';
        
    }
    
?>

------------------------------------------------------------------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------------------------------------------------------------------

 

custom-uxbarn-portfolio.php

template-pagination.php

[drewhew]

Here's the snippet from the main page:

 

if ( ! function_exists( 'uxbarn_custom_port_load_portfolio_shortcode' ) ) {
    
    function uxbarn_custom_port_load_portfolio_shortcode( $atts ) {
        
        $default_atts = array(
                            'categories'     => '',
                            'max_item'         => '',
                            'type'             => 'col4', // col3, col4, flexslider_fade, flexslider_slide
                            'show_filter'     => 'true', // true, false
                            'show_title'     => 'true', // true, false
                            'img_size'         => '',
                            'interval'         => '', // 0, 5, ..
                            'show_bullets'     => 'true', // true, false
                            'orderby'         => '',
                            'order'         => '',
                            'el_class'     => '',
                        );              
                        
        extract( shortcode_atts( $default_atts, $atts ) );
        
        if ( trim( $categories ) == '' ) {
            return '<div class="error box">' . __( 'Cannot generate Portfolio element. Categories must be defined.', 'uxb_port' ) . '</div>';
        }

        $category_id_list = explode( ',', $categories );
        
        // If WPML is active, get translated category's ID
        if ( function_exists( 'icl_object_id' ) ) {
            
            $wpml_cat_list = array();
            
            foreach ( $category_id_list as $cat_id ) {
                $wpml_cat_list[] = icl_object_id( $cat_id, 'uxbarn_portfolio_tax', false, ICL_LANGUAGE_CODE );
            }
            
            $category_id_list = $wpml_cat_list;
            
        }
        
        
        if ( ! is_numeric( $max_item ) ) {
            $max_item = '';
        }
        
        // Prepare WP_Query args
        if ( $max_item == '' ) {
            
            $args = array(
                'post_type'     => 'uxbarn_portfolio',
                'nopaging'         => true,
                'tax_query'     => array(
                                        array(
                                            'taxonomy'  => 'uxbarn_portfolio_tax',
                                            'field'     => 'id',
                                            'terms'     => $category_id_list,
                                        ),
                                    ),
                'orderby'         => $orderby,
                'order'         => $order,
            );
            
        } else {
            
            $args = array(
                'post_type'         => 'uxbarn_portfolio',
                'posts_per_page'     => $max_item,
                'tax_query'         => array(
                                            array(
                                                'taxonomy'  => 'uxbarn_portfolio_tax',
                                                'field'     => 'id',
                                                'terms'     => $category_id_list,
                                            ),
                                        ),
                'orderby'             => $orderby,
                'order'             => $order,
            );
            
        }
        
        $portfolio = new WP_Query( $args );
        
        if ( ! $portfolio->have_posts() ) {
            return '<div class="error box">' . __( 'There are no portfolio items available in the selected categories.', 'uxb_port' ) . '</div>';
        }
        
        if ( $type == 'col3' || $type == 'col4' ) {
            
            $output =
                '<div class="uxb-port-root-element-wrapper ' . $type . ' ' . $el_class . '">
                    <span class="uxb-port-loading-text"><span>' . __( 'Loading', 'uxb_port' ) . '</span></span>
                    
                    <div class="uxb-port-loaded-element-wrapper">';
                    
            if ( $show_filter == 'true' ) {
                        
                $filter_string =
                        '<ul class="uxb-port-element-filters">
                            <li><a href="#" class="active" data-filter="*">' . __( 'All', 'uxb_port' ) . '</a></li>';
                
                // Generate filter items
                $terms_args = array(
                    'include' => $category_id_list,
                    'orderby' => 'menu_order',
                );
                
                $terms = get_terms( 'uxbarn_portfolio_tax', $terms_args );
                
                if ( $terms && ! is_wp_error( $terms ) )  {
                    
                    foreach ( $terms as $term ) {
                        $filter_string .= '<li><a href="#" data-filter=".term_' . $term->term_id . '">' . $term->name . '</a></li>';
                    }
                    
                }
                
                $filter_string .= '</ul>'; // close filter list
                $output .= $filter_string;
                
            }
            
            $output .= '<div class="uxb-port-element-wrapper">';
            
            // Generate grid columns
            if ( $portfolio->have_posts() ) {
                
                while ( $portfolio->have_posts() ) {
                    
                    $portfolio->the_post();
                    
                    // Prepare category string for each item's class
                    $term_list = '';
                    $terms = get_the_terms( get_the_ID(), 'uxbarn_portfolio_tax' );
                    
                    if ( $terms && ! is_wp_error( $terms ) )  {
                        
                        foreach ( $terms as $term ) {
                            $term_list .= 'term_' . $term->term_id . ' ';
                        }
                        
                    }
                    
                    $thumbnail = '';
                    if ( has_post_thumbnail( get_the_ID() ) ) {
                        $thumbnail = get_the_post_thumbnail( get_the_ID(), 'uxb-port-element-thumbnails' );
                    } else {
                        $thumbnail = '<img src="' . UXB_PORT_URL . 'images/placeholders/port-grid.gif" alt="' . __( 'No Thumbnail', 'uxb_port' ) . '" />';
                    }
                    
                    $show_title_code = '<h3 class="portfolio-item-title">' . get_the_title() . '</h3>';
                    if ( $show_title == 'false' ) {
                        $show_title_code = '';
                    }
                    
                    $output .=
                        '<div class="uxb-port-element-item black-white ' . $term_list . '">
                            <a href="' . get_permalink() . '"></a>
                            <div class="uxb-port-element-item-hover">
                                <div class="uxb-port-element-item-hover-info">' . $show_title_code . '</div>
                            </div>
                            ' . $thumbnail . '
                        </div>';
                    
                }

            } else {
                
            }
            
            $output .= '</div>'; // close class="portfolio-wrapper"
            $output .= '</div>'; // close class="portfolio-loaded-wrapper"
            $output .= '</div>'; // close class="portfolio-root-wrapper
            
        }