When you are creating a WordPress blog, one of the most common challenges is organizing your archive pages in the easiest way for visitors to browse.
There are three most common WordPress pagination options available in the most premium and free themes.
The three most common WordPress blog pagination options include numbered, scroll, and load more buttons.
WordPress Number Pagination
Today, I want us to focus on number pagination and learn how you can create a simple function that adds number pagination to your existing WordPress site.
There are plugins that can help you add this number pagination to your blog. If for some reason you don’t like to use those free plugins or want to try out something custom, this is the tutorial for you.
Tutorial Objective
I run into this problem when customizing a client’s website that was based on a theme that used the default WordPress pagination.
Since she did not want that pagination and she did not want us to change the theme, I had to create a simple number pagination function.
Number Pagination Function
When creating number pagination, we will make use of the paginate links WordPress function. This function has the following default parameters :
$args = array( 'base' => '%_%', 'format' => '?paged=%#%', 'total' => 1, 'current' => 0, 'show_all' => false, 'end_size' => 1, 'mid_size' => 2, 'prev_next' => true, 'prev_text' => __('« Previous'), 'next_text' => __('Next »'), 'type' => 'plain', 'add_args' => false, 'add_fragment' => '', 'before_page_number' => '', 'after_page_number' => '' );
Writing the Pagination Function
So we begin writing the number pagination function but we first declare the global $wp_query; the global variable then gives the function a unique name. Inside the function we need to echo the paginated links inside the array as follows:
// Number Pagination Function function njengah_number_pagination() { global $wp_query; $big = 9999999; // 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('paged') ), 'total' => $wp_query->max_num_pages) ); }
This code should be added to your function.php file.
When you add this code to the functions.php file, it is now time to call the njengah_number_pagination in the template files.
In most cases, the pagination will be located in the archive.php file and in some themes the index.php.
Open one of these files and locate the default pagination code and replace it with the call to the function above:
<?php njengah_number_pagination(); ?>
When you have replaced the default pagination code; save the changes and check on your blog archive if the numbered pagination is appearing.
Now you can go ahead and apply the appropriate CSS styles to the numbered pagination that matches the color and design of your theme.
CSS Styling
You can go ahead and add the following CSS styles to give your WordPress number pagination a good outlook.
/** * WordPress Number Pagination CSS Styles */ .page-navi.meta { color: RGB(38, 166, 154); font-size: 20px; font-weight: normal; border: solid 1px rgb(221, 221, 221); padding: 10px 20px; padding-left: 0; border-radius:3px; } .page-numbers { border-right: solid 1px rgb(221, 221, 221); padding: 10px 20px; font-family: 'Open Sans', sans-serif !important; font-weight: normal; margin-left:-6px; } .page-numbers.current { padding: 10px 20px; background: RGB(38, 166, 154); color: rgb(255, 255, 255); font-weight: 600; } .page-navi .prev { float: left; margin-right: 0; margin-top: -10px; border-right: solid 1px #eee; font-family: 'Open Sans', sans-serif !important; font-size: 18px; letter-spacing: 0; font-weight: normal; } .page-navi .next { float: right; margin-top: -10px; border-left: solid 1px #ddd; border-right: none; border-top: none; border-bottom: none; font-family: 'Open Sans', sans-serif !important; font-size: 18px; font-weight: normal; letter-spacing: 0; }
The final design of the number pagination should appear as shown in the image below after you apply those CSS styles.
Number Pagination Code Snippet
<?php /** * Create numeric pagination in WordPress */ // Get total number of pages global $wp_query; $total = $wp_query->max_num_pages; // Only paginate if we have more than one page if ( $total > 1 ) { // Get the current page if ( !$current_page = get_query_var('paged') ) $current_page = 1; // Structure of “format” depends on whether we’re using pretty permalinks $format = empty( get_option('permalink_structure') ) ? '&page=%#%' : 'page/%#%/'; echo paginate_links(array( 'base' => get_pagenum_link(1) . '%_%', 'format' => $format, 'current' => $current_page, 'total' => $total, 'mid_size' => 4, 'type' => 'list' )); }
Conclusion
This is a simple and straightforward way of adding number pagination to your WordPress theme without using any plugin.
You just need to copy that code to your function.php file and call the function in your archives.php template. If you are stuck and need help from a skilled WordPress developer, feel free to ask for help.
Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.
Similar Articles
- How to Stop WordPress Contact Form 7 Spam Without Plugin
- How to Register a Sidebar in WordPress Theme » Step by Step [ Header Widget Example ]
- How to Get Logged In User Information in WordPress
- How to Check If Plugin is Active In WordPress [ 3 WAYS ]
- How to Get Current Product Category Name in WooCommerce
- WooCommerce Logout without Confirmation: How to Remove “Are you sure you want to log out?”
- How to Display All Products Purchased by User – Purchase History
- How to Get Order ID In Woocommerce
- How to Create Custom Query Pagination In WordPress With an Example
- How to Get Post ID by Slug in WordPress With a Practical Example
- How to Redirect On Refresh WordPress Page » Detect Page Refresh PHP
- How to Remove WordPress Admin Menu Items Programmatically Without Plugin
- Styling WordPress Menu Items Separately WordPress Menu CSS Classes
- How to Redirect User If Not Logged in WordPress » Page Redirect
Comments are closed.