How to Create Anchor Links in WordPress? (Step-by-Step Guide)

No matter the type of blog, when it’s long form or packed with information, it can be a little tricky for the readers to keep up. So you need to offer an easier way to access particular parts of the page or any other web page. That’s where anchor links come in.

Adding anchor links to your content can help enhance user engagement by making it easier for readers to find the information they’re most interested in. You can integrate them easily with the block as well as the Classic editor. That’s what we aim to cover through this blog.

I’ll tell you how you can create anchor links and the kind of benefits it offers. Let’s begin.

Anchor links, also known as jump links, are hyperlinks on a webpage that allow users to jump to a specific section within the same page or to another webpage. They are particularly useful for enhancing navigation on pages with a lot of content. So the users can quickly access the information they need without scrolling through the entire page.

Now, there are two main types of anchor links: Internal and External.

Internal links point to a particular section or page on the same website. That helps you promote your other services, products, and resources with ease. External links, on the other hand, point to offerings and resources from other websites with better information on the particular topic.

SEO experts integrate anchor links in two ways. Traditionally, they will display the link as a text or button that users can click on to jump to the target section. Or alternatively, the link can be made to be triggered by clicking on an image or another element.

The best approach for your website depends on your content, design preferences, and desired user experience.

Anchor links are incredibly useful in improving the overall quality of your WordPress posts and pages. Here are the benefits of anchor links:

Enhanced User Experience

Long-form content can be daunting for visitors. Anchor links act as a helpful way for them to navigate directly to the sections that most interest them. This improves user satisfaction and keeps them engaged with your content for longer.

Improved Accessibility

Anchor links are particularly beneficial for users with visual impairments who rely on screen readers to navigate web pages. Screen readers can announce the presence of anchor links, allowing users to jump to specific sections easily.

Boosted SEO (Search Engine Optimization)

A well-structured content with clear anchor links might be more easily understood by search engines, potentially leading to higher rankings for relevant keywords.

Increased Engagement with Specific Content

Anchor links can be strategically placed within your content to direct users towards important calls to action, product descriptions, or other sections you want them to focus on.

Streamlined Sharing

Anchor links allow you to share specific sections of your content on social media or via email. This can be particularly useful for highlighting key takeaways or infographics within a longer piece.

Overall, anchor links can significantly enhance the UX on a website. That’s why they are among the key tasks in the SEO checklist followed by the WordPress experts.

Want to add the best resources to your WordPress website?

With WordPress, there are a few ways to create anchor links. You can use the Gutenberg Block editor, which comes default with WordPress installation. Or you can use Classic editor by installing the plugin.

Method 1: Using the Gutenberg Editor

The Gutenberg block editor offers a user-friendly way to create anchor links visually, without needing to touch any HTML code. Here’s how this process goes:

Step 1: Edit your WordPress post or page and navigate to the section you want to link to.

Step 2: Click on the WordPress block containing that section’s content (heading, paragraph, etc.). A settings bar will appear on the right-hand side.

Step 3: Click on the three vertical dots (…) and select “Advanced” from the dropdown menu.

Step 4: In the “Advanced” settings, locate the field labeled “HTML Anchor.” Here, enter a unique identifier (ID) for this section. Keep it descriptive but concise (e.g., “benefits-section”).

Step 5: Navigate to the part of your content where you want to include the clickable element that will jump to the anchor. This could be text, an image, or another block.

Step 6: Select the element you want to turn into a link and then click on the “Link” button in the block toolbar (it looks like a chain icon).

Step 7: Instead of entering a URL, type a “#” symbol followed by the exact ID you assigned to the target section in step 1 (e.g., “#benefits-section”).

Step 8: Click “Publish” or “Update” to save your changes to the post or page.

Finally, open the published content and test the anchor link. Clicking on the linked element should smoothly scroll the page and bring the designated section (or page) into view.

Method 2: Using the Classic Editor

Before starting the anchor linking process, install the Classic Editor plugin on your WordPress dashboard.

Step 1: Edit your WordPress post or page.

Step 2: Switch to the “Text” editor mode by clicking on the “Text” tab above the editing area.

Step 3: Locate the HTML code for the section you want to link to. This might involve heading tags (e.g., <h2>) or paragraph tags (<p>).

Step 4: Within the opening HTML tag for the target section, add an “id” attribute followed by an equal sign (=) and your chosen unique identifier in quotes (e.g., id=”benefits-section”).

Step 5: Switch back to the “Visual” editor mode by clicking on the “Visual” tab.

Step 6: Navigate to the part of your content where you want to include the clickable element. Select the text or image you want to turn into a link.

Step 7: Click on the “Insert Link” button in the editing toolbar (it looks like a chain icon).

Step 8: In the link insertion popup, instead of entering a URL, type a “#” symbol followed by the exact ID you assigned to the target section in step 1 (e.g., “#benefits-section”).

Step 9: Click “Publish” or “Update” to save your changes to the post or page.

Again, view the published content and see if the link works as intended.

If you need help with editing your page or post and optimizing it with the links and resources, consult with our WordPress development company. We will analyze your content and optimize it effectively.

Can I use anchor links to jump to sections on a different webpage?
Technically yes, but it's generally not recommended. Anchor links are most effective for jumping to sections within the same webpage. Here's why:
  • Reliance on External Website: The functionality relies on the external website having the specific ID you're linking to, and there's no guarantee it will always be there.
  • User Experience Concerns: Sending users to another website disrupts their experience on yours. It's better practice to link to the external webpage as a whole.
What happens if I use the same ID for multiple sections of my content?
If you assign the same ID to multiple sections, clicking on the anchor link will only take the user to the first occurrence of that ID on the page. It's important to ensure each anchor ID is unique.
My anchor link isn't working! What could be wrong?
Here are a few potential reasons.
  • Typos: Double-check that the ID you assigned to the target section exactly matches the ID used in the link (including spelling and case sensitivity).
  • Conflicting IDs: Ensure no other elements on your page have the same ID you assigned to your anchor.
  • Plugin conflicts: If you're using anchor link generating plugins, deactivate other plugins temporarily to see if there's a conflict.

Conclusion

Anchor links are a valuable addition to any WordPress website. They empower your visitors to navigate lengthy content with ease, improve accessibility for users with visual impairments, and can even contribute to better SEO.

Remember, effective anchor links rely on clear and descriptive IDs, user-friendly link text, and strategic placement within your content. For long-form content, consider incorporating a table of contents with anchor links for an exceptional user experience.

So, want the best anchor links and other customizations for your WordPress website? Then connect with us today!

Need help with your WordPress project?

author
Mehul Patel is a seasoned IT Engineer with expertise as a WordPress Developer. With a strong background in Core PHP and WordPress, he has excelled in website development, theme customization, and plugin development.

Leave a comment