How To Add Custom WordPress Pagination Without a Plugin
For a WordPress blog, pagination is used to display a limited number of posts per page. Compared to the default WordPress page navigation, numbered pagination allows users the ability to navigate much easier and deeper into the archives, like numbered pages of a book. Pagination is used in almost every Web application to display returned data on multiple pages. More…
A custom numbered pagination will enhance the SEO value of your blog. It enhances users´ experience by allowing them to easily access pages in your archives. It also makes the job easier for search engine robots to crawl your posts especially for complex blogs.
Default WordPress Page Navigation
If you have plenty of posts in your WordPress blog, and depending on your settings, you probably have at the bottom of your home page a « Previous and/or Next » links. These 2 links connects neighboring content and enable users to navigate through other posts.
The following picture shows the default WordPress page navigation:
The following picture shows the modified default page navigation that I had in this blog prior to adding the custom numbered pagination code:
Many people, including myself, are not happy with just using the default WordPress page navigation. It looks ugly, dull and most importantly is not SEO and user friendly. We want a nicer and more appealing custom numbered pagination. This is where this tutorial helps.
Custom WordPress Pagination
The picture below shows the custom numbered pagination generated for this blog.
If you are wondering how I created 16 pages but I currently have 4, the answer is simple, reduce the number of posts displayed per page in your WordPress dashboard (Settings -> Reading).
Yes, there are plugins for WordPress pagination, such as WP-PageNavi being the most popular and several others. But haven´t you read my previous post about the disadvantages of going crazy adding plugins to your theme? Also what would you do if you want to develop a premium theme with a built-in custom numbered pagination.
WordPress Numbered Pagination Code
This is my version of the numbered pagination code. Open the functions.php file located in your theme´s folder and add (copy and paste) the following two functions. This code is tested to work for the current WordPress version.
CODE-X :: Pagination (Numbered Page Navigation) Code
Note: To scroll within the code: You can also click on the code window and use your keyboard´s arrow keys.
<?php
/*******************************************************************
* @Author: Boutros AbiChedid
* @Date: March 20, 2011
* @Websites: http://bacsoftwareconsulting.com/
* http://blueoliveonline.com/
* @Description: Numbered Page Navigation (Pagination) Code.
* @Tested: Up to WordPress version 3.1.2 (also works on WP 3.3.1)
********************************************************************/
/* Function that Rounds To The Nearest Value.
Needed for the pagenavi() function */
function round_num($num, $to_nearest) {
/*Round fractions down (http://php.net/manual/en/function.floor.php)*/
return floor($num/$to_nearest)*$to_nearest;
}
/* Function that performs a Boxed Style Numbered Pagination (also called Page Navigation).
Function is largely based on Version 2.4 of the WP-PageNavi plugin */
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 »';
$pagenavi_options['prev_text'] = '« Previous';
$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 NOT a single Post is being displayed
/*http://codex.wordpress.org/Function_Reference/is_single)*/
if (!is_single()) {
$request = $wp_query->request;
//intval — Get the integer value of a variable
/*http://php.net/manual/en/function.intval.php*/
$posts_per_page = intval(get_query_var('posts_per_page'));
//Retrieve variable in the WP_Query class.
/*http://codex.wordpress.org/Function_Reference/get_query_var*/
$paged = intval(get_query_var('paged'));
$numposts = $wp_query->found_posts;
$max_page = $wp_query->max_num_pages;
//empty — Determine whether a variable is empty
/*http://php.net/manual/en/function.empty.php*/
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);
//ceil — Round fractions up (http://us2.php.net/manual/en/function.ceil.php)
$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;
//round_num() custom function - Rounds To The Nearest Value.
$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) {
/*http://php.net/manual/en/function.str-replace.php */
/*number_format_i18n(): Converts integer number to format based on locale (wp-includes/functions.php*/
$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">'."\n";
if(!empty($pages_text)) {
echo '<span class="pages">'.$pages_text.'</span>';
}
//Displays a link to the previous post which exists in chronological order from the current post.
/*http://codex.wordpress.org/Function_Reference/previous_post_link*/
previous_posts_link($pagenavi_options['prev_text']);
if ($start_page >= 2 && $pages_to_show < $max_page) {
$first_page_text = str_replace("%TOTAL_PAGES%", number_format_i18n($max_page), $pagenavi_options['first_text']);
//esc_url(): Encodes < > & " ' (less than, greater than, ampersand, double quote, single quote).
/*http://codex.wordpress.org/Data_Validation*/
//get_pagenum_link():(wp-includes/link-template.php)-Retrieve get links for page numbers.
echo '<a href="'.esc_url(get_pagenum_link()).'" class="first" title="'.$first_page_text.'">1</a>';
if(!empty($pagenavi_options['dotleft_text'])) {
echo '<span class="expand">'.$pagenavi_options['dotleft_text'].'</span>';
}
}
if($larger_page_to_show > 0 && $larger_start_page_start > 0 && $larger_start_page_end <= $max_page) {
for($i = $larger_start_page_start; $i < $larger_start_page_end; $i+=$larger_page_multiple) {
$page_text = str_replace("%PAGE_NUMBER%", number_format_i18n($i), $pagenavi_options['page_text']);
echo '<a href="'.esc_url(get_pagenum_link($i)).'" class="single_page" title="'.$page_text.'">'.$page_text.'</a>';
}
}
for($i = $start_page; $i <= $end_page; $i++) {
if($i == $paged) {
$current_page_text = str_replace("%PAGE_NUMBER%", number_format_i18n($i), $pagenavi_options['current_text']);
echo '<span class="current">'.$current_page_text.'</span>';
} else {
$page_text = str_replace("%PAGE_NUMBER%", number_format_i18n($i), $pagenavi_options['page_text']);
echo '<a href="'.esc_url(get_pagenum_link($i)).'" class="single_page" title="'.$page_text.'">'.$page_text.'</a>';
}
}
if ($end_page < $max_page) {
if(!empty($pagenavi_options['dotright_text'])) {
echo '<span class="expand">'.$pagenavi_options['dotright_text'].'</span>';
}
$last_page_text = str_replace("%TOTAL_PAGES%", number_format_i18n($max_page), $pagenavi_options['last_text']);
echo '<a href="'.esc_url(get_pagenum_link($max_page)).'" class="last" title="'.$last_page_text.'">'.$max_page.'</a>';
}
next_posts_link($pagenavi_options['next_text'], $max_page);
if($larger_page_to_show > 0 && $larger_end_page_start < $max_page) {
for($i = $larger_end_page_start; $i <= $larger_end_page_end; $i+=$larger_page_multiple) {
$page_text = str_replace("%PAGE_NUMBER%", number_format_i18n($i), $pagenavi_options['page_text']);
echo '<a href="'.esc_url(get_pagenum_link($i)).'" class="single_page" title="'.$page_text.'">'.$page_text.'</a>';
}
}
echo '</div>'.$after."\n";
}
}
}
?>
After adding the above 2 functions (CODE-X) to your functions.php file and uploaded it to your server, copy and paste the code below in multiple files: index.php, archive.php, search.php, and probably other files located in your theme´s folder. Place the code where you want the page navigation to appear. Make sure to delete the default page navigation code.
CODE-Y :: Adding pagenavi Function
<div class="navigation">
<!-- REMOVE default page navigation once your custom pagination is working. -->
<?php //REMOVE DEFAULT: next_posts_link('«« Older Posts')
//REMOVE DEFAULT: previous_posts_link('Newer Posts »»') ?>
<!-- ADD Custom Numbered Pagination code. -->
<?php if(function_exists('pagenavi')) { pagenavi(); } ?>
</div>
Depending on your theme, the code above could be placed in your footer.php file. Frankly, this would be the ideal place, since you will need to add it once.
The Conditional check is to make sure that “pagenavi” function exists, to prevent any erros in case you forgot to add CODE-X first.
Styling the Custom Pagination
Finally we need to style the numbered pagination code with CSS. The following CSS code is what I used to style the pagination for this blog. The code should be added to your theme´s CSS file (usually called style.css). Of course go ahead and change it to fit your design.
CODE-Z :: Styling The Pagination Code
Note: To scroll within the code: You can also click on the code window and use your keyboard´s arrow keys.
/*******************************************************************
* @Author: Boutros AbiChedid
* @Date: March 20, 2011
* @Websites: http://bacsoftwareconsulting.com/
* http://blueoliveonline.com/
* @Description: Styling Custom Numbered Page Navigation (Pagination)
********************************************************************/
.pagenavi {
margin: 0 0 20px 30px;
padding: 5px 1px 5px;
float:left;
width: 98%;
background:url(images/pagination_bg.gif) no-repeat center;
}
.pagenavi a {
padding: 5px 6px 4px 6px;
margin: 3px;
text-decoration: none;
border: 1px solid #ccc;
color: #666;
background-color: inherit;
}
.pagenavi a:hover {
border: 1px solid #444;
color: #444;
background-color: #eee;
}
.pagenavi span.pages {
padding: 5px 6px 4px 6px;
margin: 3px;
color: #825a2d;
font-weight:bold;
border: 1px solid #999;
background-color: inherit;
}
.pagenavi span.current {
padding: 5px 6px 4px 6px;
margin: 3px;
font-weight:bold;
border: 1px solid #666;
color: #444;
background-color: #eee;
}
.pagenavi span.expand {
padding: 5px 6px 4px 6px;
margin: 3px;
border: 1px solid #ccc;
color: #444;
background-color: inherit;
}
.pagenavi .first, .pagenavi .last {
border: 1px solid #aaa;
}
.pagenavi .single_page {
border: 1px dashed #ccc;
}
Conclusion
You now have a custom numbered pagination that can be used on your WordPress Website, which is nicer, user friendlier, and has better SEO advantage than the default. If you have any questions or anything else to say, make sure to leave a comment!
Boutros: This is great. Looks like a viable alternative to WP-PageNavi.
One more question: Is it possible (and how) to display a different number of post/excerpts on archive pages, like category pages? For example, on Page 1 of a category archive display 5 posts, while on each of the successive category archive pages (Page 2, Page 3, etc.) display 10 posts.
Would love your opinion/help on this one. I just don’t know the code well enough to sort this out.
Hi Daniel,
I am not sure why you need to do that?
I am sure it can be done, but I don’t know how as the number of posts per page is set in the WordPress Dashboard (Settings -> Rerading). so every paqe will have the same number of posts, except probably the last page.
Thanks for this quick custom plugin. I was able to install and style it to my liking. One question though, how can I add styles to the Previous and Next text? I would like to make them look like buttons separate from the pages. Is there a way to add a class to them?
Thanks!
Hi Michael,
‘previous’ and ‘next’ are set on lines 29,113 and 28,150 of the code. You can set a separate CSS class for them. I am on vacation now, and I don’t have my computer with me. I can’t test the code to know for sure how this works.
But try it out and let me know.
Thanks.
Hi Michael,
I added my solution to your comment. Take a look at my reply to Philip above.
Hope this helps.
Boutros.
Boutros, thanks! Works perfectly, you can check it out here: http://neuecss.com/ :)
[...] Boutros Abichedid enseña cómo hacerlo, en tres simples pasos, y sin necesidad de tener grandes conocimientos de WordPress: [...]
I have quick question regarding coding. I was trying to find a fix in the code for magazine basic theme for the page numbers as it was doing nothing other than refreshing the current page with a different page number.
I tried using a plugin to fix the problem, but didn’t work. So I copied the code I deleted and replaced it where it came from, and Voila!, syntax error.
Parse error: syntax error, unexpected ‘<' in /home/mscanlon/scissorsanddrumsticks.com/wp-content/themes/magazine-basic.2.7.3/magazine-basic/functions.php on line 1016
I am apparently missing something in this first section as the error is indicative to line 1016 which is
### Function: Page Navigation: Boxed Style Paging
function pagination($before = ”, $after = ”) {
I got it to work……sorta, but it showed a bunch of code at the header while viewing the home page. I had to scroll down to get to my material.
Any help in fixing and possibly making this page navigation bar work is greatly appreciated.
-Kevin
Va. Beach, VA
Hi Kevin,
I just installed and tried the magazine basic theme (http://wordpress.org/extend/themes/magazine-basic). The pagination worked fine, without any syntax errors you were talking about.
The pagination is already part of the theme in functions.php, so there is no need to add anything else.
I see the error that you have by clicking at your Website (http://scissorsanddrumsticks.com/) with the following error:
“Parse error: syntax error, unexpected ‘< ' in /home/mscanlon/scissorsanddrumsticks.com/wp-content/themes/magazine-basic.2.7.3/magazine-basic/functions.php on line 1017"
1. Have you changed or added anything from the original “functions.php” file?
2. Sometimes the error does not have to be at the exact line number, you probably need to look at earlier code.
3. Did you add an improper way of the closing/opening of the PHP block? the proper way is
<?php //code here ?>no spaces between < and ? or between ? and >4. Do you have an extra ‘<’ somewhere in the code.
I am just guessing, but that should be an easy fix. If you did not find the fix you can send me the “functions.php” file that you are using by email and I will take a look.
Boutros.
Okay,
Thanks for the fast response. I felt awkward asking you about a theme you didn’t write. But, your answer gave me exactly what I needed….a swift kick in the pants! I forgot all about the downloaded theme files on my computer. I simply copied a few lines from the few error messages and replaced the defunct stuff. The theme and page are loading just fine. Whew!
Now, one last thing. The pagination isn’t working, and I feel it is directly related to a plugin or two I have installed. Check out the pagination on my site to see what I am talking about….if you have time.
http://www.scissorsanddrumsticks.com
Thanks so much!
-Kevin
Hi Kevin,
I am glad you get it working so far for your Website (without the syntax error).
For the pagination not working, unless you added some custom coding, it is definitely a plugin related. One or more of the plugins you installed is interfering with the pagination code.
The best way to pinpoint the problem, is by trial and Error, Meaning:
Deactivate (and sometimes you need to un-install ) one plugin at a time and see if the pagination works.
Let me know if this helps,
Boutros.
The one plug-in I thought would be the culprit…..was. It’s the random post slider atop the main page. I reckon it being a query as well overrides the paginator? Do you know of any fix for that?
Plug-in: http://wordpress.org/extend/plugins/wordpress-plugin-random-post-slider/
The paginator, as you know, is included within the Magazine Basic theme.
Thanks!
-Kevin
Kevin,
1. If I were you, I will just remove the plugin that is causing the problem. Why? …. read my previous article about adding too many plugins to your theme.
2. I am not familiar with the post slider that you mentioned. But if you really like the functionality of the plugin, you can built it into your theme with custom coding.
3. Another option would be to look for similar plugins that will not brake your pagination code. For instance try (I have not tested them, so I don’t know if they work for you…)
http://wordpress.org/extend/plugins/recent-posts-slider/
http://wordpress.org/extend/plugins/jquery-slider/
http://wordpress.org/extend/plugins/easy-slider/
http://wordpress.org/extend/plugins/wp-slick-slider/
http://wordpress.org/extend/plugins/wp-photo-text-slider-50/
and probably you can find more from this search query (http://wordpress.org/extend/plugins/search.php?q=post+slider&sort)
Hope this helps.
Boutros.
Thanks for sharing.
You may check out our Top 4 Best WordPress Pagination Plugins.
http://www.quertime.com/article/arn-2010-12-05-1-top-4-best-wordpress-pagination-plugins/
I very much appreciate the time you spent in putting this tutorial together. I can’t seem to get it to work on my site, though. I am currently using my personal domain to work on a site design for a campus organization. I am using the Magazeen theme, which has given me everything I need, but does not have any page navigation on the index page. I am currently running WordPress 3.1.2. Any help would be greatly appreciated! Thank you for your time.
Hi Abbey,
There could be several scenarios for the page navigation not working:
1. After you added the long code: “Numbered Page Navigation (Pagination) Code.” to your theme’s functions.php file. Did you also add the pagenavi() function to your footer.php or index.php, etc… as I discussed in the tutorial?
2. In your dashboard: when you go to Settings -> Reading …>For the “Blog pages show at most”, how many posts are you showing per page? If you set it at 10 posts/page and you only have a total of 9 posts in your blog so the page navigation will not show.
I found a link that might also help you: http://wordpress.org/support/topic/wp-magazeen-theme-pagination
If none helps, send me the link of the magazeen theme (where it can be downloaded). I can’t find it in WordPress.org Website (free themes directory), so I will take a closer look.
Hope this helps,
Boutros.
Boutros,
Thank you for the quick reply! In response, let me just say that:
1. I followed your tutorial to the best of my ability. I added the pagenavi() function to my index.php file (and only the index.php file, if that makes a difference) after adding the ‘Numbered Page Navigation Code’ to the bottom of my theme’s functions.php file. Does the placement of this code matter within the function.php file?
2. I have 6 posts total, but I have specified that only 5 posts show at a time. I will add more test posts just to be sure, but this should not be an issue.
3. I have found that link before, and I have followed every subsequent link there of. So far none of those suggestions have worked for me. I must be overlooking something.
I downloaded the file from http://www.smashingmagazine.com/2009/02/23/magazeen-free-magazine-look-wordpress-theme/.
Thanks again for all the help! I want so much for this to work.
Hi Abbey,
I did quite a bit of investigation (tried the magazeen theme in my blog). The problem is the ‘magazeen’ theme’s index.php file. By code design, they don’t support page navigation, not even the default next_posts_link() and previous_posts_link() functions work in the index.php file.
Why? Because they do have 3 separate loops and every loop call a different number of posts that overwrite the default number of posts ( set in the dashboard->Reading->“Blog pages show at most…”). The culprit is the following function query_posts(); which is called 3 times for the 3 loops.
Read carefully what WoprdPress says about it: http://codex.wordpress.org/Function_Reference/query_posts
If you remove these 3 lines of codes where the query_posts(...) shows up, the page navigation works fine but with the non-intended consequence of having the same posts displayed in each loop.
The authors of this theme left the page navigation out on purpose.
Here are few references:
http://codex.wordpress.org/Function_Reference/next_posts_link
http://codex.wordpress.org/Function_Reference/previous_posts_link
http://codex.wordpress.org/Function_Reference/query_posts
I added the pagenavi() custom template tag to the “magazeen’s” index.php file, but it will not function. Try it and see…
Here is the modified index.php file:
Note: To scroll within the code: You can also click on the code window and use your keyboard´s arrow keys.
<?php /** * @package WordPress * @subpackage Default_Theme */ get_header(); ?> <div id="main-content" class="clearfix"> <div class="container"> <div class="col-580 left"> <?php query_posts( 'showposts=2' ); if (have_posts()) : while (have_posts()) : the_post(); $category = get_the_category(); ?> <div <?php post_class(); ?>> <div class="post-meta clearfix"> <h3 class="post-title left"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3> <p class="post-info right"> <span>By <?php the_author_posts_link(); ?></span> <?php the_time( 'l F j, Y' ) ?> </p> </div><!-- End post-meta --> <div class="post-box"> <div class="post-content"> <div class="comment-count"> <?php comments_popup_link(__( '0 Comments' ), __( '1 Comment' ), __( '% Comments' )); ?> </div> <?php if( get_post_meta( $post->ID, "image_value", true ) ) : ?> <div class="post-image"> <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><img src="<?php bloginfo( 'template_directory' ); ?>/timthumb.php?src=<?php echo get_post_meta( $post->ID, "image_value", true ); ?>&w=521&h=246&zc=1" alt="<?php the_title(); ?>" /></a> </div> <?php endif; ?> <div class="post-intro"> <?php the_content( '' ); ?> </div><!-- End post-intro --> </div><!-- End post-content --> <div class="post-footer clearfix"> <div class="continue-reading"> <a href="<?php the_permalink() ?>#more-<?php the_ID(); ?>" rel="bookmark" title="Continue Reading <?php the_title_attribute(); ?>">Continue Reading</a> </div> <div class="category-menu"> <div class="category clearfix"> <div><a href="#"><span class="indicator"></span> <?php echo $category[0]->cat_name; ?></a></div> </div> <div class="dropdown"> <ul class="cat-posts"> <?php $posted = get_posts( "category=" . $category[0]->cat_ID ); if( $posted ) : foreach( $posted as $post ) : setup_postdata( $posted ); ?> <li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a><span><?php the_time( ' F j, Y' ) ?></span></li> <?php endforeach; endif; ?> <li class="view-more"><a href="<?php echo get_category_link( $category[0]->cat_ID ); ?>" class="view-more">View More »</a></li> </ul> </div><!-- End dropdown --> </div><!-- End category --> </div><!-- End post-footer --> </div><!-- End post-box --> </div><!-- End post --> <?php endwhile; endif; ?> <?php query_posts( 'showposts=4&offset=2' ); if (have_posts()) : $counter = 0; while (have_posts()) : the_post(); if( $counter % 2 == 0 ) $end = ""; else $end = "last"; ?> <div <?php post_class( 'single ' . $end ); ?>> <div class="post-meta clearfix"> <h3 class="post-title left"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3> </div><!-- End post-meta --> <div class="post-box"> <div class="post-content"> <div class="comment-count"> <?php comments_popup_link(__( '0 Comments' ), __( '1 Comment' ), __( '% Comments' )); ?> </div> <?php if( get_post_meta( $post->ID, "image_value", true ) ) : ?> <div class="post-image"> <img src="<?php bloginfo( 'template_directory' ); ?>/timthumb.php?src=<?php echo get_post_meta( $post->ID, "image_value", true ); ?>&w=235&h=109&zc=1" alt="<?php the_title(); ?>" /> </div> <?php endif; ?> <div class="post-intro"> <?php the_excerpt( '' ); ?> </div><!-- End post-intro --> </div><!-- End post-content --> <div class="post-footer clearfix"> <div class="continue-reading"> <a href="<?php the_permalink() ?>#more-<?php the_ID(); ?>" rel="bookmark" title="Continue Reading <?php the_title_attribute(); ?>">Continue Reading</a> </div> </div><!-- End post-footer --> </div><!-- End post-box --> </div><!-- End post --> <?php // Clear the left float to allow for different heights if( $counter % 2 != 0 ) echo'<div style="clear:left;"> </div>'; ?> <?php $counter++; endwhile; endif; ?> <br /> <?php query_posts( 'showposts=6&offset=6' ); if (have_posts()) : while (have_posts()) : the_post(); $category = get_the_category(); ?> <div <?php post_class( ); ?>> <div class="post-meta clearfix"> <h3 class="post-title-small left"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3> <p class="post-info right"> <span>By <?php the_author_posts_link(); ?></span> <?php the_time( 'l F j, Y' ) ?> </p> </div><!-- End post-meta --> </div><!-- End archive --> <?php endwhile; ?> <!-- 'Added' by BOUTROS ABICHEDID, this is the only change from the original index.php --> <div class="navigation clearfix"> <!-- Added Custom Page Navigation code (pagination) by Boutros. --> <?php if(function_exists('pagenavi')) { pagenavi(); } ?> </div> <!-- End of 'Added' by BOUTROS ABICHEDID --> <?php endif; ?> </div><!-- End col-580 (Left Column) --> <div class="col-340 right"> <ul id="sidebar"> <?php get_sidebar(); ?> </ul><!-- End sidebar --> </div><!-- End col-340 (Right Column) --> </div><!-- End container --> </div><!-- End main-content --> <?php get_footer(); ?>This is the styling I used for the page navigation:
Note: To scroll within the code: You can also click on the code window and use your keyboard´s arrow keys.
/* Custom Pagination (page navigation) code by Boutros */ .pagenavi { margin: 0 0 2px 30px; padding: 5px 1px 5px; float:left; width: 98%; background:url(images/pagination_bg.gif) no-repeat center; } .pagenavi a { padding: 5px 6px 2px 6px; margin: 3px; text-decoration: none; border: 1px solid #ccc; color: #666; background-color: inherit; } .pagenavi a:hover { border: 1px solid #444; color: #444; background-color: #eee; } .pagenavi span.pages { padding: 5px 6px 4px 6px; margin: 3px; color: #825a2d; font-weight:bold; border: 1px solid #999; background-color: inherit; } .pagenavi span.current { padding: 5px 6px 4px 6px; margin: 3px; font-weight:bold; border: 1px solid #666; color: #444; background-color: #eee; } .pagenavi span.expand { padding: 5px 6px 4px 6px; margin: 3px; border: 1px solid #ccc; color: #444; background-color: inherit; } .pagenavi .single_page { border: 1px dashed #ccc; } .pagenavi .first, .pagenavi .last { border: 1px solid #aaa; }As you will see, the page navigation will be displayed correctly but it is not functional (of course the pagenavi() function is already added to the functions.php file).
So how to proceed from here?
Just to prove that the pagination code works, and the issue is with the index.php file of the “magazeen’s” theme:
I added my pagination code to the archive.php file (replace the original archive.php file with the following code and test)
Note: To scroll within the code: You can also click on the code window and use your keyboard´s arrow keys.
<?php /** * @package WordPress * @subpackage Magazeen_Theme */ get_header(); ?> <div id="main-content" class="clearfix"> <div class="container"> <div class="col-580 left"> <?php if (have_posts()) : ?> <div <?php post_class(); ?>> <div class="post-meta clearfix"> <h3 class="post-title"> <?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?> <?php /* If this is a category archive */ if (is_category()) { ?> Archive for the ‘<?php single_cat_title(); ?>’ Category <?php /* If this is a tag archive */ } elseif( is_tag() ) { ?> Posts Tagged ‘<?php single_tag_title(); ?>’ <?php /* If this is a daily archive */ } elseif (is_day()) { ?> Archive for <?php the_time('F jS, Y'); ?> <?php /* If this is a monthly archive */ } elseif (is_month()) { ?> Archive for <?php the_time('F, Y'); ?> <?php /* If this is a yearly archive */ } elseif (is_year()) { ?> Archive for <?php the_time('Y'); ?> <?php /* If this is an author archive */ } elseif (is_author()) { ?> Author Archive <?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?> Blog Archives <?php } ?> </h3> <p class="post-info right"> <?php bloginfo( 'name' ); ?> Archives </p> </div><!-- End post-meta --> <div class="post-box"> <div class="post-content"> <p>If you can't find what you are looking for, try searching for it below:</p> <p><?php echo get_search_form(); ?></p> <br /> </div> </div> </div> <?php while (have_posts()) : the_post(); ?> <div <?php post_class( ); ?>> <div class="post-meta clearfix"> <h3 class="post-title-small left"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3> <p class="post-info right"> <span>By <?php the_author_posts_link(); ?></span> <?php the_time( 'l F j, Y' ) ?> </p> </div><!-- End post-meta --> </div><!-- End archive --> <?php endwhile; ?> <!-- Added by BOUTROS ABICHEDID. Only change from the original. --> <div class="navigation clearfix"> <?php if(function_exists('pagenavi')) { pagenavi(); } ?> </div> <!-- End of: Added by BOUTROS ABICHEDID. Only change from the original. --> <?php else : ?> <?php endif; ?> </div><!-- End col-580 (Left Column) --> <div class="col-340 right"> <ul id="sidebar"> <?php get_sidebar(); ?> </ul><!-- End sidebar --> </div><!-- End col-340 (Right Column) --> </div><!-- End container --> </div><!-- End main-content --> <?php get_footer(); ?>The pagination will work fine, in the archives section….
What are your Choices?
1. Either dump the ‘magazeen’ theme and choose another one. But if you really like this theme and you invested so much time in it (I like it myself too), probably this is not a good option.
2. Or don’t use the page navigation code for this theme’s index.php file. The way index.php is coded, there is no way the pagination will work, unless you change the code by removing the query_posts() function and having only one loop. I personally will not change the code since you loose the theme’s character. This is fine for this theme not to have pagination. Users can still search for posts by keywords, tags, categories, by a ‘sitemap’ menu (if you have one), using the search box, or by a Tag cloud (see my post about adding tag cloud without a plugin. It works for this theme, I tested it:)
http://bacsoftwareconsulting.com/blog/index.php/web-programming/customize-wordpress-tag-cloud-without-a-plugin/
Very interesting theme you are using, I learned quite a bit from it myself, especially how the authors coded the index.php page.
Good Luck! and if you have an update or a fix let us know so everybody else can learn.
Boutros.
I cannot thank you enough for this extensive reply! I too have learned a lot. Now I must make a decision to either find another theme to fit my design, or alter my design to fit this theme. I will let you know if there are any updates that could help anyone else.
Thank you, thank you, thank you!
Abbey
Thank you for this great function!
I used this for my custom template pages displaying posts from defined category.
In my case I was missing &paged I used
xxx=YourCategoryName
xx=NumberOfPostsToDisplay
Placed the following before The Loop.
I hope that will help someone like me experimenting or learning WP.
Thank you Michal for the tip.
Boutros.
This is the third pagination code I’ve tried in the last day–and the only one that works correctly.
And it looks great.
Thanks so much for posting this!
Thank you Chris for your Comment. I am glad I was able to help.
Boutros.
Hello Sir,
This function is not working in my home page (index.php), I am already install wp-pagenavi plugin but not running plz help.
Hi Rahul,
The code works without the need of a plugin. You need to uninstall the ‘wp-pagenavi’ plugin. Make sure you follow the tutorial instructions closely.
I can take a look, but I need to know the WordPress theme that you are using (give me the link) and also what WordPress Version you are using.
Boutros.
I always get redirected to a 404 page whenever I navigate to the next post. How can this be resolved?! (FYI: i’m using custom posts)
Thanks!
Hi Leo,
This tutorial is meant for page navigation where you have a predefined number of posts per page and not for custom posts. You are right for the 404 error. I don’t have custom posts for this blog, that’s why I did not think of it.
Due to my lack of time, let me give you 2 references and hopefully you will get a better idea:
http://wordpress.org/extend/plugins/custom-post-type-category-pagination-fix/
http://www.ballyhooblog.com/add-custom-post-types-wordpress-main-feed/
If/When you get a fix please share so everyone else can learn.
Good Luck!
No problem man! thanks for the prompt reply.:)
This works great, except I would avoid the use of the class=”page” as ‘.page’ is a wp body class.
Thank you anotherarc for noticing this. I renamed the class to ‘single_page’. Also I noticed that I haven’t used this in CSS so I added it to the CSS code for more styling choices to the pagination.
References:
http://www.nathanrice.net/blog/wordpress-2-8-and-the-body_class-function/
http://codex.wordpress.org/Function_Reference/body_class
Awesome! This was exactly what I was hoping to find :)
I knew it was possible without a plugin, but I was in a little over my head – thanks for your help!
You are Welcome Robert. I am glad I was able to help.