Paginated Query Results Info

I’ve added a couple of features to search results and archive results. In case anyone was interested in the code behind it, I decided to post it here. I set the posts per page setting to five for testing and to take the screenshot. I’ve set it back to 20 now so the new features may not show up unless you view a category with more than 20 posts in it.

The circled areas indicate what I’ve added. These are pretty standard features in many programs but I couldn’t find any sign that anyone has developed anything like this yet for wordpress so I developed my own.

The code is slightly different for search.php and archive.php although the code gets inserted into the same place in both files, just after the loop but before the “else, show searchform”.

Here is the code for archive.php:

?View Code PHP
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

<?php
        /* Used for postDisplayStats and navBoxContainer */
        $uri = explode('/',$_SERVER['REQUEST_URI']); $url = get_bloginfo('url') . '/' . $uri[1] . '/' . $uri[2];
        $posts_per_page = intval(get_query_var('posts_per_page')); $page = intval(get_query_var('paged')); if ($page == 0) { $page = 1; }
        $max_pages = $wp_query->max_num_pages; $posts = $wp_query->post_count; $total_posts = ($max_pages-1)*$posts_per_page;
        $start = ($page-1)*$posts_per_page+1; $end = $start+$posts-1; $msg = 'Displaying post'; if ($posts > 1) { $msg .= 's'; }
        if (($page == 1) & ($posts == 1)) { $msg .= ' <em>1</em> of <em>1</em>'; } else { $msg .= ' <em>' . $start . '</em> - <em>' . $end . '</em>'; }
?>          
        <div class="postDisplayStats">
          <?php echo $msg; ?>
        </div> <!-- postDisplayStats -->     
 
        <div class="navigation">
          <div class="navLeft"><?php previous_posts_link('&laquo; Previous Page'); ?></div>
          <div class="navRight"><?php next_posts_link('Next Page &raquo;'); ?></div>
          <div class="clear"></div>
        </div>
 
        <div class="navBoxContainer">
<?php
          if ($max_pages > 1) {
            if ($page > 6) {
?>
              <div class="navBox"><a href="<?php echo $url . '/page/1'; ?>">1</a></div>
              <div class="elipses">. . .</div>
<?php       }
            for ($i=($page-5); $i<=($page-1); $i++) {
              if ($i >= 1) {
?>
                <div class="navBox"><a href="<?php echo $url . '/page/' . $i; ?>"><?php echo $i; ?></a></div>
<?php       } } ?>
            <div class="navBox navBoxTarget"><a href="#"><?php echo $page; ?></a></div>
<?php
            for ($i=$page+1; $i<=$page+5; $i++) {
              if ($i <= $max_pages) {
?>
                <div class="navBox"><a href="<?php echo $url . '/page/' . $i; ?>"><?php echo $i; ?></a></div>
<?php       } }
            if (($max_pages - $page) > 5) {
?>
              <div class="elipses">. . .</div>
              <div class="navBox"><a href="<?php echo $url . '/page/' . $max_pages; ?>"><?php echo $max_pages; ?></a></div>
<?php       } ?>
            <div class="clear"></div>
<?php     } ?>          
        </div> <!-- navBoxContainer -->

And here is the code for search.php:

?View Code PHP
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

<?php
        /* Used for postDisplayStats and navBoxContainer */
        $uri = explode('/',$_SERVER['REQUEST_URI']); $url = get_bloginfo('url');
        $posts_per_page = intval(get_query_var('posts_per_page')); $page = intval(get_query_var('paged')); if ($page == 0) { $page = 1; }
        $max_pages = $wp_query->max_num_pages; $posts = $wp_query->post_count; $total_posts = ($max_pages-1)*$posts_per_page;
        $start = ($page-1)*$posts_per_page+1; $end = $start+$posts-1; $msg = 'Displaying post'; if ($posts > 1) { $msg .= 's'; }
        if (($page == 1) & ($posts == 1)) { $msg .= ' <em>1</em> of <em>1</em>'; } else { $msg .= ' <em>' . $start . '</em> - <em>' . $end . '</em>'; }
?>          
        <div class="postDisplayStats">
          <?php echo $msg; ?>
        </div> <!-- postDisplayStats -->     
 
        <div class="navigation">
          <div class="navLeft"><?php previous_posts_link('&laquo; Previous Page'); ?></div>
          <div class="navRight"><?php next_posts_link('Next Page &raquo;'); ?></div>
          <div class="clear"></div>
        </div>
 
        <div class="navBoxContainer">
<?php
          if ($max_pages > 1) {
            if ($page > 6) {
?>
              <div class="navBox"><a href="<?php echo $url . '/page/1?s=' . $s; ?>">1</a></div>
              <div class="elipses">. . .</div>
<?php       }
            for ($i=($page-5); $i<=($page-1); $i++) {
              if ($i >= 1) {
?>
                <div class="navBox"><a href="<?php echo $url . '/page/' . $i . '?s=' . $s; ?>"><?php echo $i; ?></a></div>
<?php       } } ?>
            <div class="navBox navBoxTarget"><a href="#"><?php echo $page; ?></a></div>
<?php
            for ($i=$page+1; $i<=$page+5; $i++) {
              if ($i <= $max_pages) {
?>
                <div class="navBox"><a href="<?php echo $url . '/page/' . $i . '?s=' . $s; ?>"><?php echo $i; ?></a></div>
<?php       } }
            if (($max_pages - $page) > 5) {
?>
              <div class="elipses">. . .</div>
              <div class="navBox"><a href="<?php echo $url . '/page/' . $max_pages . '?s=' . $s; ?>"><?php echo $max_pages; ?></a></div>
<?php       } ?>
            <div class="clear"></div>
<?php     } ?>          
        </div> <!-- navBoxContainer -->

Finally, here is the CSS I used:

?View Code CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

DIV.navigation {}
DIV.navigation A { font-size: 18px; font-weight: bold; color: #690000; }
DIV.navigation A:hover { color: black; }
DIV.navLeft { float: left; margin: 5px; }
DIV.navRight { float: right; margin: 5px; }
 
DIV.postDisplayStats { text-align: center; font-size: 10px; color: black; }
 
DIV.navBoxContainer { text-align: center; margin: 5px auto; }
DIV.navBox { float: left; }
DIV.navBox A { border: 1px solid black; background-color: white; margin: 5px; padding: 5px 10px; font-weight: bold; }
DIV.navBox A:hover { background-color: #ff8080; }
DIV.navBoxTarget A { background-color: #e0e0ff; border: 3px solid black; margin: 3px; }
DIV.navBoxTarget A:hover { background-color: #e0e0ff; }
DIV.elipses { float: left; margin: 5px; font-size: 16px; font-weight: bold; }

Note that navLeft and navRight are what I renamed alignLeft and alignRight (or maybe it was leftAlign and rightAlign). Anyway, I like my names better.

If you move the code to above the loop, the loop will not display. You will need to reset the query pointer. I didn’t know how to do that off hand or I would have.