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:
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('« Previous Page'); ?></div> <div class="navRight"><?php next_posts_link('Next Page »'); ?></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:
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('« Previous Page'); ?></div> <div class="navRight"><?php next_posts_link('Next Page »'); ?></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:
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.
I will remember this post for quite some time! It’s the first post in which I tried to display code. WordPress trashed the formatting so badly that I got motivated enough to go get a plugin to handle the display of code more easily (not to mention syntax handling).
The plugin worked (mostly) but managed to break my layout. After hours of pouring over the plugin code I determined that the plugin wasn’t at fault. Once I got it through my head that it was my layout that was bad, I did some searching through my own code. I found an errant “float” command that was causing the trouble. I’m surprised that the problem never showed up earlier but it’s fixed now.