How can I get "Previous" and "Next" to show in the navigation besides the links?

Question

I have been editing PHP templates in wordpress for the tti-fl.com website. In their resources tab, which is the blog, the navigation currently says 'Posted', 'Tagged in' and then the links underneath the bottom of the page. I found the navigation in the template-tags.php and was able to edit the first two to say 'Posted:' and 'Tagged:', but the links need to have Previous and Next appear before them. Plus I also want to add a break between the post navigation and the links after Previous and Next.

The biggest problem I have is with the %link and %title when working on getting the 'previous' and 'next' to show up. Plus the pagination is set to the_post_navigation() and when I try to do the_posts_navigation(), the links do not show up at the bottom of the page.

PHP with posts_navgation():

<?php if ( get_next_posts_link() ) : ?>
<div class="nav-previous"><span class="tags-links">Previous: </span><?php next_posts_link( esc_html__( 'Older posts', 'thermal-tech' ) ); ?></div>
<?php endif; ?>

<?php if ( get_previous_posts_link() ) : ?>
<div class="nav-next">span class="tags-links">Next: </span><?php previous_posts_link( esc_html__( 'Newer posts', 'thermal-tech' ) ); ?></div>
<?php endif; ?>

PHP with post_navigation():

<?php
previous_post_link( '<div class="nav-previous"><span class="tags-links">Previous: </span>%link</div>', '%title' );
next_post_link( '<div class="nav-next"><span class="tags-links">Next: </span>%link</div>', '%title' );
?>

Answer 1

You may like to use the_posts_pagination() instead of the_posts_navigation() or get_next/previous_posts_link().
The posts pagination function outputs a set of page numbers with links to the previous and next pages of posts. Example format would be like this below:

<div class="pagination_style">
  <?php     
     the_posts_pagination(array (
                            'prev_text'     => __( 'PREV' ),
                            'next_text'     => __( 'NEXT' ),                                   
                            'screen_reader_text' => __( ' ' ),                                  
                         ));    
  ?>
</div>

.

Extra Lines about CSS: Implementing your own CSS styling you could handle the look and feel. As an example, I coded which outputs like this -

You may see the CSS code as well.

.pagination_style{ margin: -5% 0 5%; text-align: center; }
.pagination_style a {color:black; text-align:center; padding: .5em 1em; text-decoration:none; transition:background-color .5s;-moz-transition:background-color .3s; -webkit-transition: background-color .3s; width: 50%;}
.pagination_style span.current {background-color: #4caf50; color: white; padding: .5em 1em; }
.pagination_style a:hover {background-color: #ccc;}

It can be noted that if you right-click on the page-number link to inspect you would see current class is auto-generated inside span as an active selector.

Hope this helps.