Adding pagination to a custom template that uses custom post types?

Question

I'm not very familiar with Wordpress' pagination so I'm not sure if this a stupid question.

Layout:

Code:

<?php
/**
 * Template Name: Pictures Page
 * @package WordPress
 * @subpackage Prominent
 * @since Prominent 1.0
 */
get_header(); ?>
<div id="tagline">
    <div class="container">
        <?php // Run main loop (The Loop). ?>
        <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
        <div class="content0">
            <?php the_content(); ?>
        </div>
        <?php endwhile; ?>
    </div><!-- .container -->
</div><!-- #content-bottom -->
<div id="content">
    <div class="container">
        <div id="mainbar">
            <?php $custom_posts = new WP_Query(); ?>
            <?php $custom_posts->query('category_name=Pictures'); ?>
            <?php while ($custom_posts->have_posts()) : $custom_posts->the_post(); ?>
                <div class="content-block-2">
                    <a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_content(); ?></a>
                </div>
            <?php endwhile; ?>
        </div><!-- #mainbar -->
        <?php get_sidebar(); ?>
    </div><!-- .container -->
</div><!-- #content-bottom -->
<?php get_footer(); ?>

Don't know how to add pagination, it is out of my comprehension.

Answer 1

To make your life easier use one of the many pagination plugins or ones that i use all the time:

• WP-PageNavi
• WP-Paginate

and in the case of these two its a matter of activating the plugin , setting up a few options and just drop a line of code to your page, for example if you use WP-PageNavi then in your code change

     <?php $custom_posts = new WP_Query(); ?>
    <?php $custom_posts->query('category_name=Pictures'); ?>
    <?php while ($custom_posts->have_posts()) : $custom_posts->the_post(); ?>
        <div class="content-block-2">
            <a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_content(); ?></a>
        </div>
    <?php endwhile; ?>

to

<?php $custom_posts = new WP_Query(); ?>
<?php $custom_posts->query(array('category_name' => 'Pictures', 'paged' => get_query_var('paged'))); ?>
<?php while ($custom_posts->have_posts()) : $custom_posts->the_post(); ?>
    <div class="content-block-2">
        <a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_content(); ?></a>
    </div>
<?php endwhile; ?>
wp_pagenavi( array( 'query' => $custom_posts ) );
wp_reset_postdata();

as you can see i added the "paged" parameter to the query and after your loop ended i called wp_pagenavi(); but in a smarter way to a void errors and wp_reset_postdata(); to reset the query.

Now if you don't want to use a plugin you can use this fine function:

function pagination( $query, $baseURL = get_bloginfo( $url ) ) {
    $page = $query->query_vars["paged"];
    if ( !$page ) $page = 1;
    $qs = $_SERVER["QUERY_STRING"] ? "?".$_SERVER["QUERY_STRING"] : "";
    // Only necessary if there's more posts than posts-per-page
    if ( $query->found_posts > $query->query_vars["posts_per_page"] ) {
        echo '<ul class="paging">';
        // Previous link?
        if ( $page > 1 ) {
            echo '<li class="previous"><a href="'.$baseURL.'page/'.($page-1).'/'.$qs.'">« previous</a></li>';
        }
        // Loop through pages
        for ( $i=1; $i <= $query->max_num_pages; $i++ ) {
            // Current page or linked page?
            if ( $i == $page ) {
                echo '<li class="active">'.$i.'</li>';
            } else {
                echo '<li><a href="'.$baseURL.'page/'.$i.'/'.$qs.'">'.$i.'</a></li>';
            }
        }
        // Next link?
        if ( $page < $query->max_num_pages ) {
            echo '<li><a href="'.$baseURL.'page/'.($page+1).'/'.$qs.'">next »</a></li>';
        }
        echo '</ul>';
    }
}

which is pretty self explanatory all you need to do is call it with the query as first argument and the current page permalink as the second.