A link to the next article that appears once a reader is part-way through a post: a slim bar on phones, a small card on desktop.
What it is
Most readers who finish an article leave. Up next gives them one clear place to go instead. Once a reader is part of the way through a post, a link to another article slides in at the edge of the screen. On phones it is a full-width bar. On desktop it is a small card in a corner. Readers can close it, and it never moves the page under them.
It is off until you turn it on, under Appearance → Customize → Ariadne Related Posts → Up next. You can turn on the phone bar, the desktop card, or both.
The same settings are also on Ariadne Related Posts → Settings → Up next (since 1.9.63). A change saved in either place shows in the other.
Which article it links to
Up next always links to the post’s best related match, the same top-ranked post Ariadne would otherwise show first. Your inline boxes and the Related Posts block (including shortcode, block and widget copies) then share the rest of the related list and skip that post, so it never shows twice on the page.
A post with no related posts yet links to the previous post in the same category.
Developers can choose the post themselves with the ariadne_up_next_post_id filter. See the hooks and filters reference.
When it appears
By default it appears once the reader is about 60% of the way through the article. You can set any point from 10% to 95%. You can also show it as soon as the page loads, without waiting for the reader to scroll.
Size and look
- Card size (desktop) and Bar size (phones) are set separately: Small, Medium, Large or Extra large. The two larger bar sizes also fit one line of the excerpt and the dates. On a phone held sideways, the bar stays at Medium height so it never covers much of the short screen.
- Colors: match each reader’s device (light or dark), always light, or always dark.
- Glass look: a frosted, see-through surface in the light or dark colors you chose. The text stays readable over any content behind it. Readers who turn on “reduce transparency” on their device get a solid background instead.
- Glass see-through (with the glass look on): Frosted, Standard, Clear or Extra clear. Clearer levels blur the page behind less, so more of a picture behind the card shows through, and they dim or soften it so every line of text keeps at least 4.5:1 contrast. Dark glass always stays fairly dark, because white text needs a dark surface behind it.
- Phone style: a full-width bar (the default) or a floating card like the desktop one. The card keeps a small gap from the screen edges, uses the desktop card size and details, and has a large close button. On a phone held sideways it shows just the label and title.
Details to show
Turn each one on or off: the featured image, the category, a short excerpt, the published date, and the updated date (shown only when the article was updated at least a day after it was published).
Picture edge to edge makes the featured image fill the side of the card or bar, flush with its edges, instead of sitting as a small rounded square.
Search engines and accessibility
- It is a normal link in the page’s HTML, so search engines can follow it and page caches keep it.
- Keep it out of search snippets (on by default) stops its text from showing in Google’s preview of the page.
- rel=”nofollow” is available but off by default.
- A custom label replaces “Up next” if you prefer other words.
- It closes with Escape or a labelled close button, and Stay closed for the visit keeps it hidden on later pages once a reader closes it.
- An optional screen reader announcement tells assistive technology when it appears.
- It respects “reduce motion” and “reduce transparency”, has large tap targets on phones, and leaves room for the phone’s home bar.
Placement
The phone bar can sit at the bottom (the default) or the top of the screen. The desktop card can sit at the bottom right (the default), bottom center or bottom left.
Speed and layout shift
Up next loads a small stylesheet and script only on single posts where it shows. It is fixed to the edge of the screen, so showing it never pushes content around and doesn’t affect your Cumulative Layout Shift score. While a bottom bar is showing on a phone, the end of the page gets matching space, so the last lines can still scroll clear of it.
If your site shows anchor ads
Google AdSense “anchor” ads also sit at the bottom of phone screens and can overlap the bar. Turn off anchor ads in AdSense, move the bar to the top (Pro), or turn the phone bar off.
Matching your theme with CSS
To adjust colors beyond the built-in choices, set these on .arp-up-next in Appearance → Customize → Additional CSS: --arp-un-bg, --arp-un-text, --arp-un-muted, --arp-un-border, --arp-un-accent and --arp-un-shadow.
.arp-up-next {
--arp-un-accent: #b4232a;
}