How to Create Simple Pagination on WordPress Without Plugin

There are various WordPress themes available for you to select and implement into your project. However, it’s important not to delve too deeply into researching their features during this phase. Unfortunately, some themes may lack essential features such as Pagination and an author bio box. In fact, I’ve already managed to create an author bio box without the need for a plugin.

Allow me to guide you through the process of establishing a straightforward pagination system with numbered pages for your WordPress posts, all without relying on any additional plugins. Many developers find themselves unaware of the correct way to incorporate pagination into WordPress posts, often resorting to plugins for this purpose. Yet, it’s worth noting that such plugins can contribute to website bloat. So, let’s begin by examining the relevant code.

Step 1: Incorporate the Custom Code

To seamlessly integrate the desired functionality, simply insert the following code snippet into your theme’s “functions.php” file. To achieve this, you can conveniently copy and paste the provided code.

If you’re unsure about the location of the “functions.php” file within your WordPress Dashboard, here’s how you can navigate to it: Log in to your Dashboard, proceed to “Appearance” → “Theme Editor.” Once in the Theme Editor, you’ll notice a list of Theme Files on the right-hand side. Look for “functions.php” and click to open it. Append the code mentioned below to the last line of this file:

function pagination($prev = '«', $next = '»') {
    global $wp_query, $wp_rewrite;
    $wp_query->query_vars['paged'] > 1 ? $current = $wp_query->query_vars['paged'] : $current = 1;
    $pagination = array(
        'base' => @add_query_arg('paged','%#%'),
        'format' => '',
        'total' => $wp_query->max_num_pages,
        'current' => $current,
        'prev_text' => __($prev),
        'next_text' => __($next),
        'type' => 'plain'
);
    if( $wp_rewrite->using_permalinks() )
        $pagination['base'] = user_trailingslashit( trailingslashit( remove_query_arg( 's', get_pagenum_link( 1 ) ) ) . 'page/%#%/', 'paged' );
 
    if( !empty($wp_query->query_vars['s']) )
        $pagination['add_args'] = array( 's' => get_query_var( 's' ) );
    echo paginate_links( $pagination );
};

Step 2: Presenting the Pagination

Once you’ve executed the previous step, proceed to invoke the pagination function at the location where you intend to showcase the pagination interface. This can be accomplished on your post page by utilizing the pagination() function.

For optimal placement, consider situating this function outside of the loop. It should, however, remain within the confines of the if(have_posts()) statement within your designated template file. To effect this, navigate through your Dashboard to “Appearance” → “Theme Editor,” and then access the “single.php” file, which corresponds to individual post pages. Here, you can seamlessly integrate the pagination() function to yield the desired outcome.

You’re currently working within the “single.php” file. To incorporate the code, simply paste it immediately above the closing </main> tag.

<?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
        // post goes here
    <?php endwhile; ?>
 
    <div class="pagination"><?php pagination('»', '«'); ?></div>
 
<?php endif; ?>

Step 3: Crafting CSS Design for Pagination Styling

In WordPress, you have the flexibility to include personalized CSS classes to oversee the visual presentation of your freshly implemented navigation. To gain insight into styling options, consider referring to the provided CSS illustration:

Navigate to your Dashboard, then proceed to “Appearance” → “Theme Editor.” Locate and access the “style.css” file, which resides on the same page. Append the subsequent code snippet to the final line of this file to effectuate the desired styling enhancements.

.page-numbers { font-size: 15px; }
.page-numbers.current { color: #222; }
.page-numbers .dots { letter-spacing: 1px }
a.page-numbers  { font-size: 14px; color: #3888ff; }

By following the aforementioned trio of steps, you can seamlessly integrate pagination for your WordPress posts sans the need for any plugins, resulting in a more streamlined website loading experience. It is my aspiration that this tutorial proves to be of immense assistance. If you found this code snippet beneficial, and if you’re interested in enhancing the SEO-friendliness of your website, kindly explore our array of other articles on the site. Noteworthy examples include “Activate Image Title Tags in One Simple Step” and “Manual Addition of Schema Markup in WordPress for Structured Data Without Plugins.” Your exploration of these resources may prove enlightening.