Creating a user-friendly navigation experience is essential for any website, especially when dealing with lengthy posts or pages. Anchor links allow visitors to jump to specific sections quickly, enhancing their reading experience and making it easier to find relevant information. In this guide, we’ll walk you through the simple steps to add anchor links in WordPress, ensuring your content is organized and easy to navigate.


Step-by-Step Guide:

  1. Open Your Post/Page in WordPress Editor:
    • Log in to your WordPress dashboard.
    • Go to Pages or Posts and select the page or post you want to edit.
  2. Create or Select the Target Section:
    • Find the section or block where you want visitors to jump to (e.g., a heading or a paragraph).
    • Select that block, such as a heading block, that will act as your target.
  3. Assign an HTML Anchor (ID) to the Section:
    • In the right sidebar, find the Block Settings.
    • Scroll to the Advanced section.
    • In the HTML Anchor field, type in a unique ID (for example: section-2).

If you’re using a heading block for “Section 2”, you will enter section-2 in the HTML Anchor field.
This is how the field looks:

  1. Create the Link at the Top of the Page:
    • Now, go to the place where you want to add the clickable text (for example, at the top of the page).
    • Type your text, like “Jump to Section 2”.
    • Highlight the text “Jump to Section 2” and click the Insert/Edit Link button (or press Ctrl + K).
    • In the URL field, type #section-2. The # symbol tells the browser to look for an ID within the same page.
  1. Save Your Changes:
    After creating the anchor link, click Save or Update to save your changes.


Additional Tips:

  • Make sure the HTML anchor (section-2) is unique across the page.

Adding anchor links in WordPress is a straightforward process that can significantly improve your website’s usability. By following these steps, you can create seamless navigation within your posts and pages, allowing visitors to access important sections without hassle. Remember to keep your HTML anchors unique to avoid any conflicts. Now that you know how to implement anchor links, you can enhance your content’s accessibility and engagement. Happy linking!

Found Problem of Anchor Links? Read: How to Fix Anchor Links Hidden Behind Fixed Header