How to add pagination to a wordpress site

Question

Really struggling to add pagination to my wordpress blog posts.

I've seen a lot of tutorials but they all seem to do the problem that I'm having now.

If I add the function to the function.php file and then call it in my post I cant get the pagination to output onto the page.

The blogs allowed at the moment are 2 per page for testing purposes.

Function:

function twentyeleven_content_nav( $nav_id ) {

  global $wp_query;

  if ( $wp_query->max_num_pages > 1 ) : ?>

  <nav id="<?php echo $nav_id; ?>">
    <h3 class="assistive-text"><?php _e( 'Post navigation',     'twentyeleven' ); ?></h3>
    <div class="nav-previous"><?php next_posts_link( __( '<span     class="meta-nav">←</span> Older posts', 'twentyeleven' ) ); ?></div>
    <div class="nav-next"><?php previous_posts_link( __( 'Newer posts     <span class="meta-nav">→</span>', 'twentyeleven' ) ); ?></div>
  </nav><!-- #nav-above -->

  <?php endif;
}

Post loop php:

        <?php
            $custom_posts = new WP_Query( array(
                'order_by' => 'date'
            ));
            if ( $custom_posts->have_posts() ) : 
            while ( $custom_posts->have_posts() ) : $custom_posts->the_post(); $loopcounter++;

                if ($loopcounter == 1) {

                    get_template_part( 'content', 'first-post' );

                } else {
                    get_template_part( 'content', get_post_format() );
                }

            endwhile;
                twentyeleven_content_nav( nav );
            else :
                get_template_part( 'content', 'none' );
            endif;
    ?>

Let me know if you need any further information

PS want this to be custom NO PLUGINS thanks

****** UPDATE ******

        <?php
        $custom_posts = new WP_Query( array(
            'order_by' => 'date'
        ));

        if ( $custom_posts->have_posts() ) : 
            while ( $custom_posts->have_posts() ) : $custom_posts->the_post(); $loopcounter++;

                if ($loopcounter == 1) {

                    get_template_part( 'content', 'first-post' );

                } else {
                    get_template_part( 'content', get_post_format() );
                }

            endwhile;

            if(function_exists('pagenavi')) { pagenavi(); };

            else :
                get_template_part( 'content', 'none' );
            endif;
    ?>

Answer 1

add this to your functions.php

function round_num($num, $to_nearest) {
   return floor($num/$to_nearest)*$to_nearest;
}

function pagenavi($before = '', $after = '') {
    global $wpdb, $wp_query;
    $pagenavi_options = array();
    $pagenavi_options['pages_text'] = ('Page %CURRENT_PAGE% of %TOTAL_PAGES%:');
    $pagenavi_options['current_text'] = '%PAGE_NUMBER%';
    $pagenavi_options['page_text'] = '%PAGE_NUMBER%';
    $pagenavi_options['first_text'] = ('First Page');
    $pagenavi_options['last_text'] = ('Last Page');
    $pagenavi_options['next_text'] = 'next posts >';
    $pagenavi_options['prev_text'] = '< Previous Posts';
    $pagenavi_options['dotright_text'] = '...';
    $pagenavi_options['dotleft_text'] = '...';
    $pagenavi_options['num_pages'] = 5; //continuous block of page numbers
    $pagenavi_options['always_show'] = 0;
    $pagenavi_options['num_larger_page_numbers'] = 0;
    $pagenavi_options['larger_page_numbers_multiple'] = 5;

    if (!is_single()) {
        $request = $wp_query->request;
        $posts_per_page = intval(get_query_var('posts_per_page'));
        $paged = intval(get_query_var('paged'));
        $numposts = $wp_query->found_posts;
        $max_page = $wp_query->max_num_pages;

        if(empty($paged) || $paged == 0) {
            $paged = 1;
        }

        $pages_to_show = intval($pagenavi_options['num_pages']);
        $larger_page_to_show = intval($pagenavi_options['num_larger_page_numbers']);
        $larger_page_multiple = intval($pagenavi_options['larger_page_numbers_multiple']);
        $pages_to_show_minus_1 = $pages_to_show - 1;
        $half_page_start = floor($pages_to_show_minus_1/2);

        $half_page_end = ceil($pages_to_show_minus_1/2);
        $start_page = $paged - $half_page_start;

        if($start_page <= 0) {
            $start_page = 1;
        }

        $end_page = $paged + $half_page_end;
        if(($end_page - $start_page) != $pages_to_show_minus_1) {
            $end_page = $start_page + $pages_to_show_minus_1;
        }
        if($end_page > $max_page) {
            $start_page = $max_page - $pages_to_show_minus_1;
            $end_page = $max_page;
        }
        if($start_page <= 0) {
            $start_page = 1;
        }

        $larger_per_page = $larger_page_to_show*$larger_page_multiple;
        $larger_start_page_start = (round_num($start_page, 10) + $larger_page_multiple) - $larger_per_page;
        $larger_start_page_end = round_num($start_page, 10) + $larger_page_multiple;
        $larger_end_page_start = round_num($end_page, 10) + $larger_page_multiple;
        $larger_end_page_end = round_num($end_page, 10) + ($larger_per_page);

        if($larger_start_page_end - $larger_page_multiple == $start_page) {
            $larger_start_page_start = $larger_start_page_start - $larger_page_multiple;
            $larger_start_page_end = $larger_start_page_end - $larger_page_multiple;
        }
        if($larger_start_page_start <= 0) {
            $larger_start_page_start = $larger_page_multiple;
        }
        if($larger_start_page_end > $max_page) {
            $larger_start_page_end = $max_page;
        }
        if($larger_end_page_end > $max_page) {
            $larger_end_page_end = $max_page;
        }
        if($max_page > 1 || intval($pagenavi_options['always_show']) == 1) {
            $pages_text = str_replace("%CURRENT_PAGE%", number_format_i18n($paged), $pagenavi_options['pages_text']);
            $pages_text = str_replace("%TOTAL_PAGES%", number_format_i18n($max_page), $pages_text);
            echo $before.'<div class="pagenavi CAPS">'."\n";

            next_posts_link($pagenavi_options['prev_text'], $max_page);
            previous_posts_link($pagenavi_options['next_text']);

            echo '<div class="clearfix"></div></div>'.$after."\n";
        }
    }
}
add_filter('next_posts_link_attributes', 'posts_link_attributes_1');
add_filter('previous_posts_link_attributes', 'posts_link_attributes_2');

function posts_link_attributes_1() {
    return 'class="prev-posts"';
}
function posts_link_attributes_2() {
    return 'class="next-posts"';
}

then add this to your theme file (posts):

<?php if(function_exists('pagenavi')) { pagenavi(); } ?>

Answer 2

I've fixed this with the below solution:

<?php query_posts('post_type=post&post_status=publish&posts_per_page=10&paged='. get_query_var('paged')); ?>

    <!-- Defining the loop counter -->
    <?php $loopcounter = 0; ?>

    <!-- Looping through the blog posts -->
    <?php if( have_posts() ): ?>

        <?php while( have_posts() ): the_post(); $loopcounter++; ?>

                <?php if ($loopcounter === 1) {

                    get_template_part( 'content', 'first-post' );

                } else {
                    get_template_part( 'content', get_post_format() );
                } ?>

        <?php endwhile; ?>

        <!-- Adds navigation to older or newer posts -->
        <div class="navigation">
            <span class="newer left">
                <?php previous_posts_link(__('Newer posts','example')) ?>
            </span> 
            <span class="older right">
                <?php next_posts_link(__('Older posts','example')) ?>
            </span>
        </div>

    <?php else: ?>

        <?php get_template_part( 'content', 'none' ); ?>

    <?php endif; wp_reset_query(); ?>

Reference from this link: https://upthemes.com/blog/2011/07/how-to-build-a-custom-page-template-for-blog-posts/

Thanks Mark for your help