Adding Pagination to the Twenty Eleven Theme Without a Plugin

Posted on by

twenty eleven themeThe Twenty Eleven theme only comes with the “next page” and “previous page” links to navigate between different blog overview pages. If you happen to be using the Twenty Eleven WordPress Theme and have a lot of posts or simply want to offer a better experience for your users I would recommend removing “next page” and “previous page”  links and replacing them with pagination.


There are many available WordPress pagination plugins that will do this.  Like  WP-PageNavi which is one of the most popular ones.

Using a plugin for this task may be an overkill since you really only need to add a few lines of PHP and CSS to the Twenty Eleven theme. This will keep plugin overhead to a minimum, here’s how you can add Pagination without a plugin to the Twenty Eleven WordPress 3.2 default theme.

The code is provided by Kriesi

Add this Code to the Twenty Eleven function.php file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function sonar_pagination($pages = '', $range = 3) {   /* handle pagination for post pages*/
    $showitems = ($range * 2)+1;  
     
    global $paged;
    if(empty($paged)) $paged = 1;
     
        if($pages == '')
        {
            global $wp_query;
            $pages = $wp_query->max_num_pages;
            if(!$pages)
            {
            $pages = 1;
            }
        }  
     
        if(1 != $pages)
        {
            echo "<div class=\"pagination\"><span>Page ".$paged." of ".$pages."</span>";
            if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo; First</a>";
            if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo; Previous</a>";
     
            for ($i=1; $i <= $pages; $i++)
            {
                if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
                {
                     echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
                }
            }
     
            if ($paged < $pages && $showitems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\">Next &rsaquo;</a>";
            if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last &raquo;</a>";
            echo "</div>\n";
        }
    } //  sonar_pagination

Then open up index.php and on line 31 you will see this line of code:

1
<!--?php twentyeleven_content_nav( 'nav-below' ); ?-->

Remove that line of code and replace it with this:

1
<?php sonar_pagination(); ?>

Now the fun part we are going to style it by adding this CSS to your stylesheet (style.css):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.pagination {
clear:both;
font-size:11px;
line-height:13px;
padding: 10px 0 10px 15px;
position:relative;
}

.pagination span, .pagination a {
background: #53A4E6;
background-attachment: scroll;
background-repeat: repeat-x;
color:#333333;
display:block;
float:left;
margin: 2px 2px 2px 0;
padding:6px 9px 5px 9px;
text-decoration:none;
width:auto;
}

.pagination a:hover{
background: #A0A0A0;
color:#333333;
}

.pagination .current{
background: #FFFFFF;
color:#333333;
padding:6px 9px 5px 9px;
}

And that’s it we are all done, drop me a comment and let me know how this work’s for you and how you ended up styling it.

2011 Child Theme Download

2011 Child - Twenty Eleven Child Theme With: Pagination, Two color schemes for the options, and Twitter widget.

28 Responses to Adding Pagination to the Twenty Eleven Theme Without a Plugin

  1. cik tom says:
    July 20, 2011 at 9:22 pm

    thank you so much…it’s work on my theme..luv it ;)

  2. Hennie says:
    July 27, 2011 at 1:54 am

    Does it matter on wich rule you add the code in the function php.
    And I use child-themes can I put before the code
    and only use that child-theme with the code. Sorry for my englisch that is bat.
    greetings Hennie

  3. admin says:
    July 27, 2011 at 2:47 am

    Hennie, you can put it anywhere in functions.php as long as you don’t put it inside of another function and make sure it’s in between < ?php ?> Tags.

  4. John says:
    July 30, 2011 at 11:37 pm

    Hmmmm,
    did all as you say but I’m still getting the default twentyeleven prompts.
    Thoughts? can I send you the three .php files to verify I did this correctly.
    Sorry for the drama but I’m really hoping to make this work.

    thanks much

  5. Trans-Americas Journey says:
    August 17, 2011 at 10:46 am

    This looks like a great substitute for WP-Navi. I’m not a coder, but through a lot of trial & error I’m tweaking the twenty eleven theme to look like my current site. I popped your code in and it works great. However, at the moment I’m tweaking on a test test blog that only has a few posts. I’m curious as to what happens with lots of posts, my actual blog has nearly 3oo and growing, tht’s 90+ pages in my 3 posts per page configuration.

    Not knowing php, how easy is it to configure this script, so that page numbers displayed and page jumping can be configured, similar to the WP-navi configuration options.
    Thanks

    • bradthomas127 says:
      August 17, 2011 at 11:43 pm

      Here is a site that’s using my theme with alot of pages and this same pagination code is being used: http://www.carsreviewguide.com/page/6
      It’s page 6 so you can see first, previous, next, and last and you can change the amount of numbers that is displayed in the first part in functions.php

      function sonar_pagination($pages = ”, $range = 3)
      { /* handle pagination for post pages*/
      $showitems = ($range * 2)+1;

  6. Kreativ Theme says:
    August 22, 2011 at 1:43 am

    Thanks a lot for the pagination tutorial man … this is a great way to minimize the number of plugins used on a website by having it built in. Nice one ;)

  7. jeff says:
    September 11, 2011 at 8:11 am

    hi, this is probably the best and easiest pagination i’ve ever seen.
    awesome.

    better than wpnavipage.

    If anyone wants their pagination to look like the default one with WP Page navi, just copy pastethis one below replacing all the css above.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    .pagination {
        clear:both;
        font-size:0.9em;
        line-height:13px;
        padding: 10px 0 50px 0px;
        margin:0 0 0px 0;
        position:relative;
    }
     
    .pagination span {
        border: 1px solid #BFBFBF;
        background-attachment: scroll;
        background-repeat: repeat-x;
        color:#333333;
        display:block;
        float:left;
        margin: 2px 6px 2px 0;
        padding:6px 9px 5px 9px;
        text-decoration:none;
        width:auto;
    }

    .pagination a {
        border: 1px solid #BFBFBF;
        background-attachment: scroll;
        background-repeat: repeat-x;
        color:#CA8913;
        display:block;
        float:left;
        margin: 2px 6px 2px 0;
        padding:6px 9px 5px 9px;
        text-decoration:none;
        width:auto;
    }

     
    .pagination a:hover{
        border: 1px solid #000000;
        color:#CA8913;
            text-decoration:underline;
    }
     
    .pagination .current{
        background: #FFFFFF;
        color:#333333;
        padding:6px 9px 5px 9px;
        font-weight: bold;
            border: 1px solid #000000;
       
    }
  8. quicklol.com says:
    October 23, 2011 at 9:16 pm

    Thanks a bunch for this. I am using the Twenty Eleven theme and tried endless plugins which all didn’t work. I was getting very very frustrated by it. I am very glad Google led me to this article :) followed the instructions and it worked great. The tabs look good too.

  9. Damien says:
    October 26, 2011 at 11:51 am

    Hi! Thanks for this. I add this code in twenty-eleven theme but my site returns this error:
    Fatal error: Cannot redeclare sonar_pagination() (previously declared in /homez.398/mangedes/www/wp-content/themes/twenty-eleven-child/functions.php:3) in /homez.398/mangedes/www/wp-content/themes/twentyeleven/functions.php on line 37

    Thank you for the help.

    Damien.

  10. Damien says:
    October 26, 2011 at 11:53 am

    Sorry, I add the code in twenty-eleven child theme. When I add this in twenty-eleven theme, it works.

  11. Damien says:
    October 26, 2011 at 2:29 pm

    Thank you ;)

  12. InnovativePhp says:
    November 3, 2011 at 11:41 pm

    Simple method to add pagination. Thanks for sharing

  13. gubenhinden says:
    November 19, 2011 at 10:04 am

    thank you! works perfect

  14. ivancp says:
    November 20, 2011 at 10:49 pm

    Thank you!

    I just add this to my blog!

  15. Rob Pachasa says:
    January 5, 2012 at 5:33 pm

    I’m having a little trouble with the CSS for this. I threw it in a Functionality plugin I made and put in a seperat .css file for it. Does it matter what’s name or anything? I’m a bit of a noob : /

    I have it active on my site if you’d like to look at it…

  16. Alejandro says:
    May 21, 2012 at 4:25 pm

    Thanks! it’s really working on my posts and it looks really good!
    I’m wondering how to use this pagination on the comments, were it says (older and new comments) At the moment i can’t.

  17. trix says:
    July 30, 2012 at 5:38 pm

    works great! thank you sooo much!

  18. Ferrari says:
    August 8, 2012 at 6:57 pm

    Hi,

    This seems like a simple fix, and everyone here has it locked, yet I followed all directions for my twenty-eleven theme, and nothing shows up. 1.) placed code in function.php 2.) placed line in index.php 3.) copied css into style.css (at the very bottom), still nothing. Could it be that previously installed plugins are conflicting with the code. I have 12 plugins installed performing various tasks, none having to do with pagination. Lost.

    • bradthomas127 says:
      August 8, 2012 at 7:21 pm

      @Ferrari- It should not be because of a previously installed plugin. Do you have more then 1 page of post on your site yet? If not you could try going to your Dashboard => Settings => Reading => and set “Blog pages show at most” setting to a lower number to test. If that still don’t work you can contact me with my contact form and i’ll help you out with it.

  19. Paul Delcour says:
    November 27, 2012 at 2:22 pm

    Hi, great, never could get these codes to work, no it works. However, I added this to all templates: index, page, archive, single page. I somehow use all of these and the navigation has surely improved.

    Thnx

    :-)

    Paul