function smo_post_navigation_shortcode() { ob_start(); ?> <nav class="navigation post-navigation" role="navigation"> <div class="nav-links"> <?php $prev_post = get_previous_post(true); if (!empty($prev_post)) { ?> <div class="prev-post"> <a href="<?php echo get_permalink($prev_post->ID); ?>" class="click-icon"><svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M0.28125 7.46875C0.046875 7.23438 0.046875 6.80469 0.28125 6.57031L6.53125 0.320312C6.76562 0.0859375 7.19531 0.0859375 7.42969 0.320312C7.66406 0.554688 7.66406 0.984375 7.42969 1.21875L1.60938 7L7.42969 12.8203C7.66406 13.0547 7.66406 13.4844 7.42969 13.7188C7.19531 13.9531 6.76562 13.9531 6.53125 13.7188L0.28125 7.46875Z" fill="#027DC0"/> </svg> </a> <div class="infor-post-navigation"> <h6>Previous NEWS</h6> <p><?php echo esc_html($prev_post->post_title); ?></p> </div> </div> <?php }else{ echo '<div></div>'; } ?> <?php $next_post = get_next_post(true); if (!empty($next_post)) { ?> <div class="next-post"> <div class="infor-post-navigation"> <h6>NEXT NEWS</h6> <p><?php echo esc_html($next_post->post_title); ?></p> </div> <a href="<?php echo get_permalink($next_post->ID); ?>" class="click-icon"><svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.67969 6.57031C7.91406 6.80469 7.91406 7.23438 7.67969 7.46875L1.42969 13.7188C1.19531 13.9531 0.765625 13.9531 0.53125 13.7188C0.296875 13.4844 0.296875 13.0547 0.53125 12.8203L6.35156 7L0.53125 1.21875C0.296875 0.984375 0.296875 0.554688 0.53125 0.320312C0.765625 0.0859375 1.19531 0.0859375 1.42969 0.320312L7.67969 6.57031Z" fill="#027DC0"/> </svg> </a> </div> <?php }else{ echo '<div></div>'; } ?> </div><!-- .nav-links --> </nav><!-- .navigation --> <?php return ob_get_clean(); } add_shortcode('smo_post_navigation', 'smo_post_navigation_shortcode');
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