Simple way to create WordPress Pagination without plugin! Pagination with numbers and CSS style, easy way with example and live demo.
How to Create WordPress Pagination
Using the_posts_pagination() function, we will create pagination with numbers. Look to live demo in WP Time Blog.
Create WordPress Pagination
Firstly, we need this function to check if has posts navigation or not, copy the code and paste it in your “functions.php” file in your theme:
function is_posts_nav() { global $wp_query; return ($wp_query->max_num_pages > 1); }
Now open your “index.php” file (or any file) in your theme and paste this code outside the WordPress loop:
<?php if ( is_posts_nav() ) : ?> <div class="wptime-pagination clear-fix"> <?php // By Qassim Hassan | wp-time.com global $wp_query, $paged; if( $paged == 0 ){ $get_paged = 1; }else{ $get_paged = $paged; } $pagination_args = array("mid_size" => 3, "prev_text" => "«", "next_text" => "»" ); the_posts_pagination($pagination_args); ?> <div class="total-pages">Page <?php echo $get_paged; ?> of <?php echo $wp_query->max_num_pages; ?></div> </div> <?php endif; ?>
Pagination CSS Style
Copy this code and paste it in your “style.css” file:
/* Style by Qassim Hassan | wp-time.com */ .clear-fix:before, .clear-fix:after{ content: ""; display: table; } .clear-fix:after{ clear: both; } .wptime-pagination{ display:block; line-height:1.2; } .wptime-pagination h2{ display:none; } .nav-links{ font-size:0; } .nav-links span{ display:inline-block; padding:3px 6px; background-color:#fff; color:#999; border:1px solid #ddd; border-radius:4px; font-size:12px; margin-right:5px; } .nav-links span:last-child{ margin-right:0; } .nav-links a{ display:inline-block; padding:3px 6px; background-color:#e3802f; border:1px solid #e3802f; color:#fff; border-radius:4px; font-size:12px; margin-right:5px; } .nav-links a:last-child{ margin-right:0; } .nav-links span.dots{ border:0; } .nav-links{ float:left; } .total-pages{ float:right; font-size:12px; line-height:22px; }
The result is:
Enjoy.
1 Comment
Visualmodo WordPress Themes
Excellent code Style!