pagination - How do i make the_posts_pagination look like my template?

admin管理员组

文章数量:1122832

Firstly i tried making a custom pagination but i could not work out the .. part and removing the last numbers so i decided to use the default pagination of Wordpress. But currently i am stuck on what to do? This is what i wrote on my function looks pretty basic.

function pagination(){
    the_posts_pagination( array(
    'mid_size' => 2,
    'prev_text' => __( 'Previous', 'homekong' ),
    'next_text' => __( 'Next', 'homekong' ),
) );    
}

This took out a different kind of pagination from what i wanted. This is what i actually need

<div class="paginations">
    <nav class="page-navigation ">
        <ul class="pagination">
            <li class="page-item"><span aria-current="page" class="page-numbers page-link prev ">PREVIOUS</span></li>
            <li class="page-item"><a class="page-numbers page-link current" href="#">1</a></li>
            <li class="page-item"><a class="page-numbers page-link" href="#">2</a></li>
            <li class="page-item"><a class="next page-numbers page-link" href="#">NEXT</a></li>
        </ul>
    </nav>
</div>

I tried researching and looking around a lot but i can not figure out a way how i can change my default pagination to this. Please help me

Firstly i tried making a custom pagination but i could not work out the .. part and removing the last numbers so i decided to use the default pagination of Wordpress. But currently i am stuck on what to do? This is what i wrote on my function looks pretty basic.

function pagination(){
    the_posts_pagination( array(
    'mid_size' => 2,
    'prev_text' => __( 'Previous', 'homekong' ),
    'next_text' => __( 'Next', 'homekong' ),
) );    
}

This took out a different kind of pagination from what i wanted. This is what i actually need

<div class="paginations">
    <nav class="page-navigation ">
        <ul class="pagination">
            <li class="page-item"><span aria-current="page" class="page-numbers page-link prev ">PREVIOUS</span></li>
            <li class="page-item"><a class="page-numbers page-link current" href="#">1</a></li>
            <li class="page-item"><a class="page-numbers page-link" href="#">2</a></li>
            <li class="page-item"><a class="next page-numbers page-link" href="#">NEXT</a></li>
        </ul>
    </nav>
</div>

I tried researching and looking around a lot but i can not figure out a way how i can change my default pagination to this. Please help me

• pagination
• design

Share Improve this question asked Sep 19, 2019 at 4:51 MaddoxStMaddoxSt 1388 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

function pagination_bar($posts_per_page) {
$published_posts = wp_count_posts()->publish;
$total_pages = ceil($published_posts / $posts_per_page); 
if ($total_pages > 1){
    $current_page = max(1, get_query_var('paged')); 
    echo paginate_links(array(
        'base' => get_pagenum_link(1) . '%_%',
        'format' => '?paged=%#%',
        'current' => $current_page,
        'total' => $total_pages,
    ));
 } }

place the above code in function.php .

<?php pagination_bar($post_details['posts_per_page']); ?>

above function call is where you need to display the pagination.

then using the wp_query get all the posts like examble

<?php           
       if ( get_query_var('paged') ) $paged = get_query_var('paged');
       if ( get_query_var('page') ) $paged = get_query_var('page');
       $post_details = array('post_type'=> 'post','paged'=>$paged,'numberposts' => -1,'posts_per_page' => 2);
       $custom_query = new WP_Query( $post_details );
    ?>

To make the_posts_pagination in WordPress look like your template, you'll need to apply custom CSS styles to the pagination links and elements. Here's a step-by-step guide to achieve this:

1. Inspect the Pagination Element: First, you should identify the CSS classes and HTML structure of the pagination element you want to style. You can do this by right-clicking on the pagination and selecting "Inspect" in your web browser. This will open the browser's Developer Tools, where you can examine the HTML structure and CSS classes.

2. Add Custom CSS:

   • Go to your WordPress Dashboard.
   • Navigate to "Appearance" > "Customize."
   • Depending on your WordPress theme, you may see a "Additional CSS" or "Custom CSS" option. Click on it.

3. Write Custom CSS: Write custom CSS rules to style the pagination elements according to your template's design. For example, you can change the font, colors, padding, margins, and borders to match your template. Here's an example of how you might style pagination links:

/* Change link styles */
.pagination a {
    color: #000; /* Your desired text color */
    background-color: #f0f0f0; /* Your desired background color */
    padding: 5px 10px; /* Adjust padding as needed */
    border-radius: 5px; /* Add rounded corners */
    margin: 5px; /* Adjust margins as needed */
}

/* Style the current page link differently */
.pagination .current {
    font-weight: bold;
    background-color: #333; /* Your desired background color for the current page */
    color: #fff; /* Your desired text color for the current page */
}

/* Style the navigation arrows if your pagination includes them */
.pagination .next,
.pagination .prev {
    /* Your styles for the next and previous links */
}

4. Preview and Save: As you write your custom CSS, use the live preview feature to see how your changes affect the pagination. Once you're satisfied with the appearance, click the "Publish" or "Save" button to apply the changes.

5. Test Responsiveness: Ensure that your custom styles work well on different screen sizes and devices. Use media queries to adjust styles if necessary.

6. Clear Caches: If your changes aren't immediately visible on the front end, clear any caching plugins or server-side caching that you may have enabled.

Keep in mind that the specific CSS classes and HTML structure of the pagination elements can vary depending on your WordPress theme. Be sure to inspect your theme's pagination HTML to accurately target the elements you want to style.

本文标签： paginationHow do i make thepostspagination look like my template