css - How can I highlight the active page using paginate_links()?

admin管理员组

文章数量:1122796

I wrote this code:

<div class="col-12">
                                        <div class="pagination d-flex justify-content-center mt-5">
                                            <!-- <a href="#" class="rounded">&laquo;</a>
                                            <a href="#" class="active rounded">1</a>
                                            <a href="#" class="rounded">2</a>
                                            <a href="#" class="rounded">3</a>
                                            <a href="#" class="rounded">4</a>
                                            <a href="#" class="rounded">5</a>
                                            <a href="#" class="rounded">6</a>
                                            <a href="#" class="rounded">&raquo;</a> -->
                                            <?php
                                            $total_pages = $loop->max_num_pages;
                                            if ($total_pages > 1){
                                        
                                                $current_page = max(1, get_query_var('paged'));
                                        
                                                $base_url = get_pagenum_link(1);
                                                $paged_url = add_query_arg('paged', '%#%', $base_url); // Replace %%% with actual page number

                                                echo paginate_links(array(
                                                    'base' => $paged_url,
                                                    'format' => '%#%',
                                                    'current' => $current_page,
                                                    'total' => $total_pages,
                                                    'prev_text'    => __('« prev'),
                                                    'next_text'    => __('next »'),
                                                ));
                                            }
                                            wp_reset_postdata();
                                            ?>
                                        </div>
                                    </div>

In this code, the commented out part is actually how the active page number inside pagination should look like, but I am having no ideas on how I can manage this issue.

I wrote this code:

<div class="col-12">
                                        <div class="pagination d-flex justify-content-center mt-5">
                                            <!-- <a href="#" class="rounded">&laquo;</a>
                                            <a href="#" class="active rounded">1</a>
                                            <a href="#" class="rounded">2</a>
                                            <a href="#" class="rounded">3</a>
                                            <a href="#" class="rounded">4</a>
                                            <a href="#" class="rounded">5</a>
                                            <a href="#" class="rounded">6</a>
                                            <a href="#" class="rounded">&raquo;</a> -->
                                            <?php
                                            $total_pages = $loop->max_num_pages;
                                            if ($total_pages > 1){
                                        
                                                $current_page = max(1, get_query_var('paged'));
                                        
                                                $base_url = get_pagenum_link(1);
                                                $paged_url = add_query_arg('paged', '%#%', $base_url); // Replace %%% with actual page number

                                                echo paginate_links(array(
                                                    'base' => $paged_url,
                                                    'format' => '%#%',
                                                    'current' => $current_page,
                                                    'total' => $total_pages,
                                                    'prev_text'    => __('« prev'),
                                                    'next_text'    => __('next »'),
                                                ));
                                            }
                                            wp_reset_postdata();
                                            ?>
                                        </div>
                                    </div>

In this code, the commented out part is actually how the active page number inside pagination should look like, but I am having no ideas on how I can manage this issue.

• css
• pagination
• html

Share Improve this question edited May 17, 2024 at 9:32 fuxia♦ 107k3838 gold badges255255 silver badges459459 bronze badges asked May 17, 2024 at 7:23 user242793user242793 1

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

By default paginate_links() gives you several ways to target the current page:

1. It will replace the a element with a span element, because there's no point in a page linking to itself
2. It adds the class current to the span
3. It adds the aria-current attribute to the span

Any one of these can be used to apply whatever styling you want

本文标签： cssHow can I highlight the active page using paginatelinks()