navigation - Override the WordPress default pagination markup

admin管理员组

文章数量:1122832

I want to render the WordPress posts pagination markup with my own HTML markup. My theme has a pagination markup with ul > li format. But the WordPress default pagination markup is different than my markup.

How can I apply my own HTML markup instead of the default pagination markup?

I want to render the WordPress posts pagination markup with my own HTML markup. My theme has a pagination markup with ul > li format. But the WordPress default pagination markup is different than my markup.

How can I apply my own HTML markup instead of the default pagination markup?

• pagination
• navigation

Share Improve this question asked Aug 14, 2018 at 9:05 Eh JewelEh Jewel 85533 gold badges1414 silver badges2929 bronze badges 1

• 1 Depends on what you use to print the pagination. Show us the code. – Max Yudin Commented Aug 14, 2018 at 9:22

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

do you mean post archive pagination? The paginate_links() function accepts a type parameter, so if all you need is a ul > li format you could try out something like:

    // archive pagination
    global $wp_query;
    $big = 999999999; // need an unlikely integer

    echo paginate_links( [
        '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,
        `type`  => 'list',
    ] );

If you need a completely custom markup, you could try setting type param to 'array' and then build whatever you need with a foreach loop.

docs: https://developer.wordpress.org/reference/functions/paginate_links/

To customize the pagination markup in WordPress to match your theme’s desired structure (e.g., using <ul><li></li></ul>), you can override the default pagination function provided by WordPress. Here’s how you can achieve this:

1. Use the paginate_links function with a custom callback WordPress's paginate_links() function allows you to customize the HTML structure of pagination. You can specify the format, and wrap the pagination links in your desired markup.

2. Create a Custom Pagination Function You can create a custom pagination function in your theme’s functions.php file that outputs pagination with your own markup:

function custom_pagination() {
    global $wp_query;
    $big = 999999999; // need an unlikely integer

    $pagination = 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,
        'type'      => 'array', // returns an array instead of a string
        'prev_text' => __('« Previous'),
        'next_text' => __('Next »'),
    ) );

    if ( is_array( $pagination ) ) {
        echo '<ul class="custom-pagination">';
        foreach ( $pagination as $page ) {
            echo '<li>' . $page . '</li>';
        }
        echo '</ul>';
    }
}

3. Implement the Custom Pagination in Your Theme Once the function is defined, you need to call it in your theme’s template files where pagination is needed. This is typically in index.php, archive.php, category.php, or search.php.

Example:

if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        // Your loop code here
    endwhile;

    // Call the custom pagination function
    custom_pagination();

else :
    // No posts found
endif;

本文标签： navigationOverride the WordPress default pagination markup