WP Thinker

The WordPress Playground

How to Add Jump to Section Links in WordPress

Jump to Section

Do you want your users to be able to click a link on your WordPress website and jump to a section? That’s a great idea—the practice is user-friendly. Adding a Table of Contents at the beginning of a post comes to mind immediately, and lets people skip to the section they are interested in. Jump-to-section links, also known as anchor links, are pivotal for one-page websites too. They let users go up and down the page by clicking rather than scrolling. Hence, we want to show you how to add jump to section links in WordPress. Let’s begin.

What is a “jump to section” link?

A “jump to section” link, also known as an anchor link and jump menu link is a hyperlink that, when clicked, takes the user to a specific portion of an internal or external page. WordPress and all modern web browsers natively support the “jump to section” functionality.

Jump to section link consists of two parts: anchor text (the clickable part) and anchor ID or name (the destination section). The destination can be almost anything, but in most cases, it’s a heading, a paragraph, an image, or an embedded video.

Why should I let users jump to sections in WordPress?

Here are some reasons to let users jump to sections of your WordPress website:

  1. Improved SERPs appearance and functionality. Anchor links can appear in Google’s search results. That improves your SEO (Search Engine Optimization) and lets users jump to a site section from search results.
  2. Enhanced user-friendliness and efficiency. Your website visitors can jump from section to section instead of scrolling, improving the efficiency of navigation. Additionally, it keeps things organized for people working on the website.
  3. Better engagement. Users are more likely to follow your instructions if their browser takes them to the sections, e.g., sign up for newsletters or purchase from the shop.

Why shouldn’t I add section jump links?

Here are some reasons you shouldn’t add anchor links to your site:

  1. Visitors could stay for shorter periods. Users that instantly get to captivating sections may spend less time browsing your website. An A/B test would confirm or disprove this.
  2. They make a domain change difficult. Adding “#” to links can make the transition to a new domain or 301 (permanent) redirect of pages tough.
  3. They can be jarring. Rapid long scroll after a click can be irritating but is solvable with a smooth scroll animation in CSS or JavaScript.

1. How to add jump to section links in WordPress Gutenberg Editor

Follow these steps to use WordPress Block Editor to add a “jump to section” link:

  1. Start editing a WordPress post or page.
  2. Add a new heading, paragraph, image, or video embed, or click on the existing one.
  3. Switch to the Block tab In the right-hand menu. If it’s missing, select the cogwheel icon in the top right corner.
  4. Expand the Advanced option, and click the text field under HTML Anchor.
  5. Give that section a name unique to the page without spaces. This will be your anchor ID or anchor name. You can’t repeat ‘contact-form’ on that page and cannot name it ‘contact form’.
  6. Repeat steps 1-5 for all sections you want to make a jump destination.

Adding anchor text to your WordPress page

Now that you named a section to jump to, you need to select on-page text and turn it into a link for jumping like this:

  1. Add a new text in a paragraph or a heading, or highlight an existing one with one of these two options:
    1. Click the block, and select Link from the three-dot menu.
    2. Press Ctrl + K (Windows) or Cmd + K (Mac).
  2. Enter a pound (#) symbol followed by the name you assigned, e.g., #contact-form, instead of an URL.
  3. Press Enter or Return to apply the jump-to-section link.
  4. Repeat this for other text you want to turn into a clickable link for jumping.

2. Use HTML to manually add section jump links in WordPress

The method above is user-friendly but doesn’t provide insight into how jump-to-section links work behind the scenes. Once you do, you have many possibilities we’ll mention below.

Follow these instructions to manually add a jump-to-section link in WordPress using HTML:

  1. Read our guide on editing HTML in WordPress for detailed instructions. In short, you can edit HTML documents via a text editor in WordPress or one connected to cPanel/FTP client. Additionally, you may:
    1. Use Code Editor in Block Editor. Click the three-dot icon in the upper right corner.
      1. Select Code Editor (or press Ctrl + Shift + Alt + M or Cmd + Shift + Alt + M)
    2. Click a block in Gutenberg Editor. Then:
      1. Select the three-dot menu → Choose “Edit as HTML”
    3. Employ Text mode (for Classic Editor). Click the “Text” tab in the top right corner of the Classic Editor document you’re editing.
  2. Find the place you want to jump to in the document. Common examples are:
    • <p>a paragraph</p>
    • <h2>this is a h2 heading</h2>
    • <footer>this is the content of a footer</footer>
    • <header>contents of your header</header>
  3. Give the section a unique name without spaces again. Using the example we gave, you’d edit the HTML to:
    • <p id=”contact-form-paragraph>Fill out our contact form:</p>
    • <h2 id=”contact-form-heading”>Our Contact Form</h2>
    • <header id=”header”>Header content is here</header>
    • <footer id=”footer”>Footer content is here</footer>

Like in the method above, you now need to edit existing text or add a jump link like this:

  • <a href=”#contact-form-heading>Jump to contact form’s heading</a>
  • <a href=”#footer”>Jump to the bottom of the page</a>
  • <a href=”#header”>Jump to the top</a>

3. Implementing jump-to-section links on pages via Classic Editor for WordPress

Classic Editor doesn’t have an option for adding anchor ID attributes, hence people either switched to Text mode to add it using HTML or installed a WordPress plugin, e.g., TinyMCE Advanced, now titled Advanced Editor Tools.

Since the number of Classic Editor users is dwindling, we strongly advise using methods 1 and 2 instead. However, if you’re determined, you can:

  1. Switch to Text mode in the top right corner to add the section name/ID using HTML.
  2. Go back to Visual mode.
  3. Add a link to text by pressing Ctrl + K/Cmd + K or clicking the chain icon in the top toolbar.
  4. Type #section-name under “Link Text” then click the arrow icon or the Add Link button.

4. How to use a WordPress menu to add jump-to-section links

If you have a single-page website, adding a jump-to-section link to menu items or drop-down menu entries is essential. Here’s how to add jump links to a WordPress menu and jump to several pages:

  1. Edit the page to add anchor link IDs to sections. You can use HTML, Block Editor, or a page builder plugin.
  2. Edit the WordPress menu by going to Appearance in the left sidebar of WordPress Admin, then selecting Menus.
  3. Edit the existing menu or click Create new menu.
    • Note. On Block Editor, create or click a “Navigation” block, then click Menu in the right-sidebar. Pick an existing one or make one from the drop-down menu.
  4. Select the menu item or create a new one using Custom Links (Classic Editor menu style) or clicking the chain icon in the top toolbar (Menu edit via Block Editor).
  5. Add a link text, e.g., ‘Contact us’.
  6. If the menu only appears on the page where anchor links are, add the ID as we mentioned. Sections on different pages or another website must have the full URL of the page and the anchor ID, e.g., https://example.com/contact/#contact-form
  7. Click the Add to Menu button and test it.

5. Using a WordPress plugin to add jump-to-section links

We don’t think most users need to install a WordPress plugin to add anchor links. The exceptions would be using something like an Easy Table of Contents to automatically create a table of contents for posts, or Add Anchor Links to automatically generate heading anchor IDs based on their content.