This code will add numbered pagination to your index.php file.

Description


To create numbered pagination for the index.php file in a WordPress theme, you can use the following code. This code will allow you to paginate your blog or archive pages and display numbers for navigation.

  1. Add the Pagination Function in functions.php:First, define a custom function in your theme’s functions.php file:
  2. This function will handle pagination links and add previous and next buttons.
  3. Call the Pagination in index.php:Next, open your index.php file and place the following code where you want the pagination to appear, typically after the main loop:
  4. Style the Pagination (Optional):
  5. You can add CSS to style the pagination links. For example:

HTML Source Code

                        
                          <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <!-- Your loop content here -->
<?php endwhile; ?>

    <!-- Pagination call here -->
    <?php custom_pagination(); ?>

<?php else : ?>
    <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

CSS Source Code

                        
                          .pagination {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
}
.pagination a, .pagination span {
    color: #333;
    padding: 8px 16px;
    margin: 0 4px;
    text-decoration: none;
    border: 1px solid #ddd;
}
.pagination .current {
    background-color: #0073aa;
    color: #fff;
    border: 1px solid #0073aa;
}
.pagination a:hover {
    background-color: #0073aa;
    color: #fff;
}

PHP Source Code

                        
                          function custom_pagination($paged = '', $max_page = '') {
    global $wp_query;
    if (!$paged) {
        $paged = get_query_var('paged') ? get_query_var('paged') : 1;
    }
    if (!$max_page) {
        $max_page = $wp_query->max_num_pages;
    }
    $big = 999999999; // need an unlikely integer
    if ($max_page > 1) {
        echo '<div class="pagination">';
        echo paginate_links(array(
            'base'      => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
            'format'    => '?paged=%#%',
            'current'   => max(1, $paged),
            'total'     => $max_page,
            'prev_text' => __('« Previous'),
            'next_text' => __('Next »'),
        ));
        echo '</div>';
    }
}


Post Categories

Tags