Long-form content benefits enormously from jump menus — a table of contents-style navigation displayed above the post that scrolls the reader directly to the relevant section when clicked. Here’s how to build one cleanly in WordPress without a plugin.
What Is a Jump Menu?
A jump menu is a list of section links generated from the heading tags (h2, h3) in your post content. Clicking a link smooth-scrolls the reader to that section. It improves UX and time-on-page — both SEO signals.
The PHP Function
Add this to your functions.php:
function smjrifle_jump_menu($content) {
// Only apply to posts with 3+ headings
$pattern = '/<h([2-3])[^>]*>(.*?)<\/h[2-3]>/i';
preg_match_all($pattern, $content, $matches);
if (count($matches[0]) < 3) {
return $content;
}
$menu = '<nav class="jump-menu" aria-label="Page sections">';
$menu .= '<p class="jump-menu-title">On this page:</p><ol>';
$modified_content = $content;
foreach ($matches[0] as $i => $heading) {
$level = $matches[1][$i];
$text = strip_tags($matches[2][$i]);
$anchor = sanitize_title($text);
$menu .= '<li><a href="#' . $anchor . '">' . esc_html($text) . '</a></li>';
// Add anchor ID to heading in content
$new_heading = str_replace(
'<h' . $level,
'<h' . $level . ' id="' . $anchor . '"',
$heading
);
$modified_content = str_replace($heading, $new_heading, $modified_content);
}
$menu .= '</ol></nav>';
return $menu . $modified_content;
}
add_filter('the_content', 'smjrifle_jump_menu');
Styling the Jump Menu
.jump-menu {
background: var(--color-dark-secondary);
border: 2px solid var(--color-green);
padding: 1rem 1.5rem;
margin-bottom: 2rem;
}
.jump-menu-title {
font-family: 'Press Start 2P', monospace;
font-size: 0.6rem;
color: var(--color-blue);
margin-bottom: 0.5rem;
text-transform: uppercase;
}
.jump-menu ol {
padding-left: 1.5rem;
margin: 0;
}
.jump-menu li {
margin-bottom: 0.4rem;
}
.jump-menu a {
color: var(--color-green);
font-size: 0.85rem;
}
.jump-menu a:hover {
color: var(--color-blue);
text-decoration: underline;
}
Smooth Scroll
Add scroll-behavior: smooth; to your html selector in CSS, or handle it in JavaScript for more control over easing.
The jump menu also adds proper id attributes to headings, which improves accessibility and creates linkable anchor URLs — both good for SEO.