Zmień wygląd paginacji w WordPressie łatwo

Kod

<?php
// Add custom styles to WordPress pagination
function wp_dudecom_custom_pagination_styles() {
    ?>
    <style>
        .wp-dudecom-pagination {
            display: flex;
            justify-content: center;
            list-style: none;
            padding: 0;
        }
        .wp-dudecom-pagination li {
            margin: 0 5px;
        }
        .wp-dudecom-pagination a {
            color: #0073aa;
            text-decoration: none;
            padding: 8px 16px;
            border: 1px solid #ddd;
            border-radius: 4px;
            transition: background-color 0.3s, color 0.3s;
        }
        .wp-dudecom-pagination a:hover {
            background-color: #0073aa;
            color: #ffffff;
        }
        .wp-dudecom-pagination .current {
            background-color: #0073aa;
            color: #ffffff;
            border: 1px solid #0073aa;
        }
    </style>
    <?php
}
add_action('wp_head', 'wp_dudecom_custom_pagination_styles');

// Custom pagination function
function wp_dudecom_custom_pagination($query = null) {
    global $wp_query;
    $query = $query ? $query : $wp_query;

    $big = 999999999; // need an unlikely integer
    $pagination_links = paginate_links(array(
        'base'      => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
        'format'    => '?paged=%#%',
        'current'   => max(1, get_query_var('paged')),
        'total'     => $query->max_num_pages,
        'type'      => 'array',
        'prev_text' => __('« Previous', 'textdomain'),
        'next_text' => __('Next »', 'textdomain'),
    ));

    if (is_array($pagination_links)) {
        echo '<ul class="wp-dudecom-pagination">';
        foreach ($pagination_links as $link) {
            echo '<li>' . $link . '</li>';
        }
        echo '</ul>';
    }
}

// Usage: Call wp_dudecom_custom_pagination() within the loop where you want the pagination to appear.
?>