WordPress Theme Development Pagination with First Last(with Previous & Next) Page

Hi everyone I hope your doing well I have a issue on how to display the First/Next Page I manage to work the Previous/Next page but unfortunately I have no luck on how to display the First/Next Page. I’m hoping that anyone could help me out with this Thank you

This is how it should look like:

enter image description here

The code that I’m working on:

<div class="archive-post-outer">
<?php
    $paged = ( get_query_var( 'paged' ) ) ? absint( get_query_var( 'paged' ) ) : 1;
    
    $args = array(
        'post_type' => 'post',
        'post_status'=>'publish',
        'posts_per_page' => 5,
        'paged' => $paged,
    );
    
    $the_query = new WP_Query($args);
?>
    
<?php if ( $the_query->have_posts() ) : ?>
        
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

    <!-- <div id="post-<?php //the_ID();?>" <?php //post_class();?> > -->
    <a class="title" href="<?php echo get_permalink(); ?>"><h1><?php the_title();?></h1></a>
    
    <p class="date"><?php echo get_the_date('Y.m.d'); ?></p>
    <?php the_excerpt(); ?>
    <div class="border"></div>
<?php endwhile; ?>
    
    <div class="pagination">
    <?php
        echo paginate_links( array(
            'format'  => 'page/%#%',
            'current' => $paged,
            'prev_next' => true,
            'end_size' => 1,
            'mid_size' => 2,
            'total'   => $the_query->max_num_pages,
            'mid_size'        => 5,
            'prev_text'       => __('<svg xmlns="http://www.w3.org/2000/svg" width="10.376" height="14.681" viewBox="0 0 10.376 14.681">
            <path id="prev" d="M6244.277,5437.944l-8.152,6.517,8.152,6.605" transform="translate(-6234.53 -5437.163)" fill="none" stroke="#707070" stroke-width="2"/>
            </svg> Prev'),
            'next_text'       => __('Next <svg xmlns="http://www.w3.org/2000/svg" width="10.376" height="14.681" viewBox="0 0 10.376 14.681">
            <path id="next" d="M6236.125,5437.944l8.152,6.517-8.152,6.605" transform="translate(-6235.496 -5437.163)" fill="none" stroke="#707070" stroke-width="2"/>
            </svg>')
        ) );
    ?>
    </div>
        
<?php endif; ?>
</div> 

Thank You

Source: Ask PHP

LEAVE A COMMENT