How to Add a NYTimes-Style Read Next Flyout in WordPress (2026)

Have you noticed the slide-in “read next” box on news sites? The New York Times popularised it around 2010: as you reach the end of an article, a small box glides in from the bottom right suggesting the next story. We added the same effect to QuickOnlineTips back then with the upPrev plugin, and it noticeably increased clicks to other articles. Here’s how to add a NYTimes-style flyout to WordPress in 2026, with a plugin or with a few lines of code.

Quick answer: Install the upPrev plugin (still maintained in 2026), choose when the box should appear and what it should show, and you’re done. If you prefer no plugin, add the code below to a child theme’s functions.php or a code-snippets plugin: it shows the previous (older) post in a slide-in box when readers reach the end of the article, using lightweight CSS and an IntersectionObserver.

Why use a read next flyout?

• It catches readers at the exact moment they finish an article and are deciding where to go.
• It increases pageviews per visit without cluttering the post with extra links.
• It’s less intrusive than a pop-up: it sits in a corner and can be closed.

Method 1: Use the upPrev plugin

1. Go to Plugins > Add New and search for upPrev.
2. Install and activate it.
3. Open its settings to choose the position, animation, how far down the page it appears, and whether it shows the previous post, a post from the same category or a random post.

This is how the upPrev flyout looked on our site in 2010.

Method 2: Add a flyout without a plugin

Paste this into a child theme’s functions.php or a snippets plugin. If you need help adding files, see how to add PHP files to a WordPress theme without FTP. Change .entry-content if your theme uses a different content class.

add_action( 'wp_footer', function () {
  if ( ! is_single() ) return;
  $next = get_previous_post(); // the older post
  if ( ! $next ) return;
  ?>
  <aside id="qot-flyout" aria-label="Read next">
    <button type="button" class="qf-close" aria-label="Close">&times;</button>
    <span class="qf-label">Read next</span>
    <a href="<?php echo esc_url( get_permalink( $next ) ); ?>">
      <?php echo esc_html( get_the_title( $next ) ); ?>
    </a>
  </aside>
  <style>
    #qot-flyout{position:fixed;right:20px;bottom:20px;max-width:320px;padding:16px 20px;
      background:#fff;border-left:4px solid #F28C1E;box-shadow:0 6px 24px rgba(0,0,0,.18);
      transform:translateX(120%);transition:transform .4s ease;z-index:999}
    #qot-flyout.show{transform:none}
    #qot-flyout .qf-label{display:block;font-size:13px;text-transform:uppercase;color:#666}
    #qot-flyout .qf-close{position:absolute;top:4px;right:8px;border:0;background:none;font-size:20px;cursor:pointer}
    @media (max-width:600px){#qot-flyout{left:12px;right:12px;max-width:none}}
  </style>
  <script>
    (function(){
      var box=document.getElementById('qot-flyout'), end=document.querySelector('.entry-content');
      if(!box||!end) return;
      var closed=false;
      box.querySelector('.qf-close').onclick=function(){closed=true;box.classList.remove('show');};
      new IntersectionObserver(function(e){
        if(!closed) box.classList.toggle('show', e[0].isIntersecting || e[0].boundingClientRect.top < 0);
      }).observe(end.lastElementChild || end);
    })();
  </script>
  <?php
} );

The box slides in once the end of the article scrolls into view, stays out of the way on mobile, and has a close button. You can swap get_previous_post() for a related-posts query if you prefer.

Tips to make it work well

• Show it near the end of the article, not on page load.
• Keep it small and closable, especially on phones, so it doesn’t cover content or trigger Google’s intrusive interstitial concerns.
• Suggest something genuinely related; a random post gets fewer clicks.
• Keep the CSS inline or tiny so it doesn’t slow the page. See how to load CSS faster.

FAQ

Is upPrev still available?

Yes, upPrev is still on WordPress.org and was updated in 2026.

Will a slide-in box hurt SEO?

Not if it’s small, appears after reading and can be closed. Large pop-ups that cover content on mobile are what to avoid.

Can I show related posts instead of the next post?

Yes. upPrev can show posts from the same category, and the code method can use any WordPress query.