WordPress forward and back navigation I find pleasing
A new addition to this site is forward-back navigation at the bottom of posts. I’m not sure why I went 15 years or so without thinking about a reader who might want to browse the scintillating and inspiring topics I cover on a semi-regular basis in details and with such stunning insight but it just never occurred to me until I was messing around with creating topically relevant featured images using Stable Diffusion, but in time the thought came and I’m happy with the result.
This guide from wpbeginner was my starting point. I used their wpb_posts_nav function as a basis, but removed the SVG arrows and navigation aid text to simplify presentation. It ends up looking like this, which I simply added to functions.php of my custom child theme using the theme editor just before the final ;
and last line ?>
. This version is 100% derivative of the wpbbinner code with some minor deletions to my taste and reversing left/right of previous next as I tend to think of time as flowing left-to-right.
function wpb_posts_nav(){ $next_post = get_next_post(); $prev_post = get_previous_post(); if ( $next_post || $prev_post ) : ?> <div class="wpb-posts-nav"> <div> <?php if ( ! empty( $next_post ) ) : ?> <a href="<?php echo get_permalink( $next_post ); ?>"> <div> <div class="wpb-posts-nav__thumbnail wpb-posts-nav__next"> <?php echo get_the_post_thumbnail( $next_post, [ 100, 100 ] ); ?> </div> </div> <div> <h4><?php echo get_the_title( $next_post ); ?></h4> </div> </a> <?php endif; ?> </div> <div> <?php if ( ! empty( $prev_post ) ) : ?> <a href="<?php echo get_permalink( $prev_post ); ?>"> <div> <h4><?php echo get_the_title( $prev_post ); ?></h4> </div> <div> <div class="wpb-posts-nav__thumbnail wpb-posts-nav__prev"> <?php echo get_the_post_thumbnail( $prev_post, [ 100, 100 ] ); ?> </div> </div> </a> <?php endif; ?> </div> </div> <!-- .wpb-posts-nav --> <?php endif; }
There’s a bit of css that adds some styling. I made a few small changes to my preferences and removed the bits no longer needed and appended this to the very end of the style.css that comes with my template.
/* Post Navigation Code */ .wpb-posts-nav { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 50px; align-items: center; max-width: 1200px; margin: 25px auto; } .wpb-posts-nav a { display: grid; grid-gap: 20px; align-items: center; } .wpb-posts-nav > div:nth-child(1) a { grid-template-columns: 100px 1fr; text-align: left; } .wpb-posts-nav > div:nth-child(2) a { grid-template-columns: 1fr 100px; text-align: right; } .wpb-posts-nav__thumbnail { display: block; margin: 0; } .wpb-posts-nav__thumbnail img { border-radius: 0px; }
The last step is to add the nav function call to your single.php page. In my page, it works well just after the endwhile, the code is just <?php wpb_posts_nav(); ?>
and for my theme is placed thus:
... <?php endwhile; // end of the loop. ?> <?php wpb_posts_nav(); ?> </div> ...
I’m happy with the results.
https://www.wpbeginner.com/wp-tutorials/how-to-add-next-previous-links-in-wordpress-ultimate-guide/
Category: Code • Self-publishing • Technology
-
Recent Posts
- Get a desktop alert when Thunderbird gets constipated 2023 May 29
- The end of a comic era 2023 May 14
- WordPress forward and back navigation I find pleasing 2023 May 07
- عيد مبارك 2023 April 22
- Technology: maximizing individual radius of lethality. 2023 February 05
- Sidebar featured images only on single post pages 2023 January 24
- LastPass: The Cloud is Public and Ephemeral 2023 January 05
- Some gnuplot and datamash adventures 2022 December 29
- Smol bash script for finding oversize media files 2022 September 02
- Deep Learning Image Compression: nearly 10,000:1 compression ratio! 2022 June 28
- Categories
- Links
- Search
- Archives
- Post History