0

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' );
?>
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 - enter image description here

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.

  • Thank you for this. But was there also a way to get 'prev' and 'next' to display with the %title or %link next to it? This code works with the blog pages and the articles that connect to each other. – Heather Wilkins May 17 '17 at 12:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.