In this tutorial I will show you how to add a Pagination to your static front page of your wordpress website. I wrote this code while I was re-working my portfolio section of my own website, so once I got it to work, I thought I share it with everyone.
Your pagination has to go inside your custom query, so lets first take a look at a custom query.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php $args = array( 'post_type' => 'page', // set your post type this is set for PAGE 'orderby' => 'menu_order', 'order' => 'ASC', // set this to either DESC or ASC 'post_parent' => 45 // page id number if there are any sub-pages of 45 ); $myQuery = new WP_Query( $args ); if ( $myQuery->have_posts() ) { ?> <?php while ( $myQuery->have_posts() ) { $myQuery->the_post(); ?> // do stuff here like get the TITLE, CONTENT, etc... <?php } // end while ?> <?php } // end if ?> |
Make sure you set your $args parameters for your own needs.
Now lets add in our Pagination to the custom query. The first thing is to add in this snip (‘paged’ => $paged) to the $args array to the custom query from above.
|
1 2 3 4 5 6 7 |
<pre class="lang:default decode:true " >$args = array( 'post_type' => 'page', 'orderby' => 'menu_order', 'order' => 'ASC', 'post_parent' => 45, 'paged' => $paged // this will help with the pagination );</pre> |
Next we add this ($paged = ( get_query_var( ‘page’ ) ) ? get_query_var( ‘page’ ) : 1;) above the $args array.
|
1 2 3 4 5 6 7 8 |
$paged = ( get_query_var( 'page' ) ) ? get_query_var( 'page' ) : 1; $args = array( 'post_type' => 'page', 'orderby' => 'menu_order', 'order' => 'ASC', 'post_parent' => 45, 'paged' => $paged ); |
Now this line here is the reason for the Pagination to work on a Static Front Page of your WordPress website.
|
1 |
$paged = ( get_query_var( 'page' ) ) ? get_query_var( 'page' ) : 1; |
Where it indicates ‘page’ is the cause of all this really. If you want to use this on an actual custom page template with its own custom query, you need to change ‘page’ to ‘paged’.
This is all documented here on this page https://codex.wordpress.org/Function_Reference/get_next_posts_link in the section of ‘Usage when querying the loop with WP_Query‘.
Next we add in the code for our numbered pages to show up along with Next and Previews links. This will be placed between the “end while” and “end if” closing of the custom query.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?php } // end while ?> <div id="My-Pagination" class="page-num"> <?php if ( $myQuery->max_num_pages > 1 ) { ?> <?php global $myQuery; $big = 999999999; // need an unlikely integer echo paginate_links( array( 'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ), 'format' => '?paged=%#%', 'current' => max( 1, get_query_var('page') ), 'total' => $myQuery->max_num_pages, ) ); ?> <?php } ?> </div> <?php } // end if ?> |
There you have it folks! The best and easiest way of adding a Pagination to your Static Front Page of your WordPress website. The pagination when added to your template will show up at the bottom of your content being queried. If you wish to have the Pagination show up at the top of your content, just copy the div id=”My-Pagination” portion and add it in between the start of the IF statement and the start of the WHILE statement.
HERE IS THE FULL CODE
|
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 |
<?php $paged = ( get_query_var( 'page' ) ) ? get_query_var( 'page' ) : 1; $args = array( 'post_type' => 'page', 'orderby' => 'menu_order', 'order' => 'ASC', 'post_parent' => 45, 'paged' => $paged ); $myQuery = new WP_Query( $args ); if ( $myQuery->have_posts() ) { ?> <?php while ( $myQuery->have_posts() ) { $myQuery->the_post(); ?> // do stuff here like get the TITLE, CONTENT, etc... <?php } // end while ?> <div id="My-Pagination" class="page-num"> <?php if ( $myQuery->max_num_pages > 1 ) { ?> <?php global $myQuery; $big = 999999999; // need an unlikely integer echo paginate_links( array( 'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ), 'format' => '?paged=%#%', 'current' => max( 1, get_query_var('page') ), 'total' => $myQuery->max_num_pages, ) ); ?> <?php } ?> </div> <?php } // end if ?> |