Bootstrap 5 styling for WordPress Paginations via `paginate_links`

The most current version as of .

WordPress ships the paginate_links() function, to generate paginations. In this post I will show you, how you can set the function up, to get an awesome looking pagination with Bootstrap styles.

The first step is to change the output from the function from plain (HTML) to array, as we want to define the markup by our selfs.

You can achieve that by specifying 'types' => 'array' in the arguments array of the function:

$pagination = paginate_links([
    'types' => 'array',
    // … 

Now, that we have an array of all the links, we can basically loop over it and apply bootstrap classes to our HTML markup:

<?php if (!empty($pagination)) : ?>
    <ul class="pagination">
        <?php foreach ($pagination as $page_link) : ?>
            <li class="page-item <?= strpos($page_link, 'current') !== false ? 'active' : '' ?>">
                <?= str_replace('page-numbers', 'page-link', $page_link) ?>
        <?php endforeach ?>
<?php endif ?>

What gives you a beautiful Bootstrap pagination.

To find out more about Bootstrap paginations, check out the official documentation.

Also check out the WordPress docs for more details on the paginate_links() function and how to configure it.

Successfully tested with WordPress version 5.8.3 and Bootstrap version 5.1.3.

— David Wolf