/** * Thumbnails option on Post Navigation Elementor widget */ add_filter('previous_post_link', 'sydney_child_post_nav_thumbnail', 20, 5 ); add_filter('next_post_link', 'sydney_child_post_nav_thumbnail', 20, 5 ); function sydney_child_post_nav_thumbnail($output, $format, $link, $post, $adjacent) { if( !$output ) { return; } $divclass = ''; switch ($adjacent) { case 'next': $divclass = 'custom-nav nav-next'; break; case 'previous': $divclass = 'custom-nav nav-previous'; break; default: break; } $arrow_prev = ''; $arrow_next = ''; if( 'next' == $adjacent ) { $arrow_next = '<span>⟶</span>'; } if( 'previous' == $adjacent ) { $arrow_prev = '<span>⟵</span>'; } $rel = $adjacent; $thumb = get_the_post_thumbnail($post->ID, array( 100, 100)); $title = '<div class="'.$divclass.'">' . $arrow_prev . $post->post_title . $arrow_next . '</div>'; $class = ''; if( !empty($thumb) ) { $class = 'post-nav-has-thumbnail'; } $string = '<a href="' . get_permalink( $post->ID ) . '" rel="' . $rel . '" class="'.$class.'">' . $thumb; $inlink = str_replace( '%title', $title, $link ); $inlink = $string . $inlink . '</a>'; $output = str_replace( '%link', $inlink, $format ); if( !$post->ID ) { return; } return $output; }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter