Jump Links Block (SEO 44)

A WordPress block that automatically generates a customizable Jump To “On this Page“ table of contents to improve user navigation and engagement on your posts and pages.

Jump Links Block (SEO 44) intelligently scans your content for headings and creates a dynamic, interactive list of links. With a complete collection of controls in the editor sidebar, you have command over the block’s functionality and appearance, from reordering links to fine-tuning the design for your theme.

The SEO & User Engagement Benefits

Boost Your SEO & User Engagement
Adding a well-structured table of contents is one of the most effective ways to improve both your website’s user experience and its visibility in search engine rankings. The Jump Links Block is more than just a navigation tool; it’s a powerful feature for enhancing your SEO.

Stand Out in Search Results
Google and other search engines can detect the anchor links created by this block and may feature them directly in the search results. This adds valuable “Jump to” links below your page description (also known as fragment links or in-page links), allowing users to go directly to the section that answers their question.

Improve Click-Through Rate (CTR)
By occupying more space in the search results and presenting a clear outline of your content, you make your listing more appealing and informative. This encourages more users to click on your link over your competitors, directly boosting your CTR—a key metric that can lead to better search engine rankings.

Enhance User Experience
For long articles, a table of contents is essential. It allows readers to easily navigate to the sections they care about most, and see exactly where they are in the article at a glance, which reduces bounce rates and increases the time they spend on your page. Search engines place value on these positive user engagement signals.

Provide Clear Context for Search Engines
A list of jump links acts as a clear, semantic outline of your page’s structure. This helps search engines better understand the topics and sub-topics you cover, which can improve your chances of ranking for a broader range of related search queries.

Key Features

Automatic & Intelligent

• Auto-Generates Links: Scans your document in real-time and creates a list of links from your H2, H3, and H4 heading blocks.

• Smart Anchor ID Handling: Automatically adds unique, semantic ID attributes to heading blocks that don’t have one.

• Respects Your Content: Never overwrites a custom ID you’ve already added to a heading, giving you complete control.

• Live Syncing: The list automatically updates in real-time as you add, remove, or edit headings in the editor.

Full Customization

• Viewing & Editing Modes: Switch between a clean preview (Viewing Mode) and a detailed interface (Editing Mode) directly in the sidebar’s “Presentation” panel.

• Custom Link Text: Change the text of any link. For example, turn a long heading like “Frequently Asked Questions about Our Product” into a short and simple “FAQ.”

• Custom Ordering: Easily reorder links with simple up and down arrow buttons to create the perfect flow for your readers.

• Toggle Visibility: You can exclude any heading from the list with a simple “Include/Exclude” toggle. This allows you to leave a section out of your Jump Links List, if desired.

• Customizable Heading: Add an optional title (like “On This Page”) above your list of links.

Advanced Styling

• Organized Sidebar: All styling controls are neatly organized in a dedicated “Appearance” panel.

• Layout Control: Display your links in a standard vertical list or a modern horizontal, button-style layout.

• List Styles: Choose between a bulleted list (

  ), a numbered list (
  ), or no list styling at all.

  1. Typography: Control the font size with a simple picker, including a reset button.

  2. Block Background: Set a background color for the entire block container to make your table of contents pop or match your theme’s card style. This setting extends upon the block margin, padding, and border options within the block styling tab.

  3. Full Color Control: Use integrated color pickers to customize: Link Color, Other Text Color (for bullets, numbers, and the main heading).

  4. Conditional Horizontal Link Styles: When in the horizontal layout, you can fine-tune the design with controls for Link Background Color, Link Background Color on hover, Link Border Color, and border radius.

  5. Visual Hierarchy: Optional “Smart Indentation” creates a nested outline look, making it easier for readers to scan your document structure in a larger Table of Contents (e.g., indenting H3s under H2s).

  Front-End Experience

  • Smooth Scrolling: Clicking a link smoothly scrolls the user to the relevant section of the page, providing a modern and pleasant user experience.

  • Collapsible List: Optional feature to collapse long lists with an elegant “Show More” / “Show Less” SVG icon button to expand and contract the list horizontally or vertically.

  • Sticky Navigation: Optionally, keep the table of contents pinned to the viewport as users scroll, ensuring navigation is always accessible for long articles.

  • Smart Sticky Controls: Includes a Top Offset setting to prevent the block from hiding behind your site’s sticky header, a Jump Offset setting to ensure that the sticky header does not cover the heading text, and a Disable on Mobile strategy to prevent it from blocking content on small screens.

  • Auto-Hide Title: When using Sticky Positioning, the block title (e.g., “On This Page”) automatically fades out and collapses once the block sticks to the top of the screen. This maximizes reading space while keeping the navigation links accessible.

  • Active Link Indicator (ScrollSpy): As your readers scroll through the content, the table of contents automatically highlights the link for the section they are currently reading, giving them instant context on their progress.

  How to Use

  1. Create or edit a post or page.
  2. Click the + icon to add a new block and search for Jump Links Block.
  3. Add the block to your page. It will automatically find your headings.
  4. Use the settings in the editor sidebar to customize the block.
     A. In the Presentation panel, switch to Editing Mode to see all the controls for customizing individual links (reordering, renaming, and hiding).
     B. In the “Appearance” panel, control the layout, styling, and colors.
     C. In the “Heading Settings” panel, toggle the optional title and select which heading levels to include.

  You Might Also Like

  If you like this plugin, you might also enjoy these WordPress tools:

  • Search Appearance Toolkit (SEO 44) – A lightweight, feature-packed SEO plugin for WordPress that offers a comprehensive suite of site optimization tools, all easy to control.
  • Microdata to JSON-LD Converter – A handy tool to convert your existing Schema.org Microdata into the preferred JSON-LD format, clean up your HTML, and maintain structured data.
  • Under The Weather – A lightweight and customizable weather widget, powered by the OpenWeather API, that caches and presents weather data with multiple style options.

From the WordPress Plugin Directory File

1. Log in to your WordPress Admin Dashboard.
2. Navigate to Plugins > Add Plugin in the left-hand menu.
3. Search for the plugin: Jump Links Block (SEO 44).
4. Install the plugin: Once you locate the correct plugin, click the “Install Now” button next to it.
5. Activate the plugin: After the installation is complete, click the “Activate Plugin” button that appears.

From a Zip File

1. Download a copy of the plugin, available in the WordPress Plugin Directory Jump Links Block (SEO 44) webpage.
2. Upload the jump-links-block-seo-44 folder to the /wp-content/plugins/ directory
3. Activate the plugin through the Plugins menu in WordPress.

1. 

   The Jump Links Block in Viewing Mode.

2. 

   The Jump Links Block in Editing Mode.

3. 

   The Sidebar controls for the Jump Links Block.

4. 

   Published Vertical Jump Links, expanded and collapsed.

5. 

   Published Horizontal Jump Links, expanded and collapsed.

6. 

   Published Horizontal Jump Links with sticky navigation showing the Active Link Indicator.

2.0.1

• TWEAK: To avoid the bottom of horizontal link “buttons” from ever being cut off when the menu is collapsed, the styling has been finetuned to include a defined line-height for list items.

2.0.0

• FEATURE: Sticky Positioning: Keep your table of contents visible while users scroll. Includes a “Top Offset” slider to clear sticky headers, a “Jump Offset” slider to ensure that the sticky header does not cover the heading text, and a “Disable on Mobile” toggle to preserve screen space on small devices.
• FEATURE: Auto-Hide Title: Implemented a smart “sticky state” detection. When the block sticks, the title gently collapses and fades out to keep the interface clean (this occurs when a block title is used alongside sticky positioning).
• FEATURE: Smart Indentation: Added a “Create Visual Hierarchy” toggle. When enabled, H3 and H4 sub-headings are visually indented to create a clear, nested outline structure.
• FEATURE: Block Background: You can now set a background color for the entire block container, perfect for creating “card-style” floating navigation.
• FEATURE: ScrollSpy: Automatically highlights the active link in the table of contents as the user scrolls through the corresponding section of the post.

1.9.2

• FEATURE: Added support for Border and Spacing controls. You can now add borders, rounded corners, margins, and padding to the Jump Links block directly from the editor settings.
• FEATURE: Added a “Title tag” control. You can now choose the specific HTML tag (H2, H3, H4, H5, Paragraph, or Div) for the “On This Page” heading to better match your document structure.
• REFACTOR: Optimized the block’s styling logic to use CSS variables on the parent container instead of inline styles for every link. This reduces the block’s HTML size and improves rendering performance.
• FIX: Resolved an accessibility and HTML validation issue where using multiple Jump Links blocks on a single page created duplicate element IDs. Each block now generates a unique instance ID.
• PERFORMANCE: Refactored the front-end JavaScript to use event delegation for smooth scrolling. This reduces memory usage by attaching a single event listener to the block instead of individual listeners for every link.
• TWEAK: Reorganized the sidebar settings for better clarity between Block Title settings and Content Inclusion settings.

For a complete list of changes, please see the full changelog or the changelog.txt file included with the plugin.