WP Thinker

The WordPress Playground

How to Anchor Links in WordPress

Add Anchor Links in WordPress

Anchor tags are a great way to improve the user experience on your WordPress website. To give you an idea, we’ll mention the table of contents. You must’ve seen one appear in WordPress posts. Once an entry in the table is clicked or tapped, users are automatically taken to a corresponding section in the text on the same page, often a heading. As you’ll see below, a jump tag can also be placed on a paragraph and is one of the base requirements for one-page websites. You’re only limited by website design and your WordPress theme, which can be altered after the fact. With that said, here’s how to anchor links in WordPress.

What’s required for anchor links?

Anchor links must have two things to work:

  1. Anchor source. The jump link that points to an ID attribute in the text. Always has a hashtag in front of the ID.
  2. Destination anchor. The ID attribute that’s assigned to a section of text the user needs to be taken to. Added without a hashtag.

How to anchor links in WordPress (Block Editor)

This is how to add anchor links in WordPress Block Editor:

1. Create a jump link and ID

Creating a jump link works like any internal or external link. Follow these steps:

  1. Highlight the portion of the text, and click on Link from the toolbar that pops up.
  2. Now’s the time to come up with an ID attribute. We suggest following the same rules as in our article dedicated to WordPress slugs. The only exception is the ability to use capital letters.
  3. If the link and the text you want to redirect to are both, for example, “How to enable Maintenance Mode in WordPress”, ID could be “enable-maintenance-mode-in-wordpress”. Or, if there are no conflicting headings, even shorter, “wordpress-maintenance-mode”.
  4. To mark it as an anchor link, add a hashtag in front. To clarify, the anchor link should look like this: #wordpress-maintenance-mode
  5. Press Enter on your keyboard or click on the Return icon.

2. Assign an ID attribute to a portion of text

Based on the type, here’s how to add the ID attribute to a section of text you want to navigate the user to:

Heading

To point to a heading in your text, click on it to select the block. Then, do this:

  1. In the Block tab of block settings on the right-hand side, click on Advanced.
  2. After it expands, find the HTML Anchor option.
  3. Add the same attribute without a hashtag in the empty text field below.
  4. For our example, we enter wordpress-maintenance-mode
  5. Save changes and preview results.

Paragraph

You’ll notice that there’s no HTML Anchor option for paragraphs. Instead, you need to do this to make a paragraph block an anchor tag:

  1. Click on the block to bring up the editing sidebar.
  2. Click on the three-dot menu next to the Link option and the down arrow.
  3. From the drop-down menu, select Edit as HTML.
  4. Find the paragraph in HTML. You’ll see the text is in-between <p> and </p> tags.
  5. Edit the <p> tag so that it looks like this <p id=”wordpress-maintenance-mode”>
  6. Save changes and you’ll get a prompt saying: This block contains unexpected or invalid content.
  7. Click on Convert to HTML.
  8. Save changes and preview the outcome.
  9. Tip. This also works for table blocks and many other HTML elements, including headings.

Guide to anchor links in WordPress (Classic Editor)

Once you master the steps above, you can apply this anywhere. To prevent redundancy, we’ll use the same guidelines and examples.

1. Make an anchor link

Find and highlight the text you want to become a link then proceed by using these instructions:

  1. Click on the Insert/edit link option in the main editing menu. Alternatively, you can use the keyboard shortcut, Control + K.
  2. In the text field, add your ID attribute with a hashtag in front. Once again, we’ll enter #wordpress-maintenance-mode
  3. Click on the Return icon or press Enter.

2. Add an ID attribute

Scroll down to the text you want to bring the user to, then follow these steps:

  1. Click on Text in the top right corner of the page.
  2. The page will switch to Text view.
  3. The text you highlighted should remain that way. if it doesn’t, find it using the Control + F shortcut.
  4. Find heading, table, or paragraph tags. You’ll recognize them as <h2>, <h3>..<h6>, <p>, <li>, etc. We’ll use <h2> for demonstration since it’s the most widely used example.
  5. Edit <h2>How to enable Maintenance Mode</h2> so that it looks like this: <h2 id=”wordpress-maintenance-mode”>How to enable Maintenance Mode</h2>.
  6. Save the draft or update the page to see changes.

Instructions to add anchor links in HTML

If you don’t like using the Visual mode in Classic Editor or need to create simple HTML pages, this is doable. Switch over to Text mode right away in Classic editor or find the section that needs to become a link in HTML code. Now, follow these instructions for adding anchor links in HTML:

  1. Add <a href=”#anchor-link”> before link text, and </a> after.
  2. In our example, it’s <a href=”#wordpress-maintenance-mode”>How to enable Maintenance Mode in WordPress</a>.
  3. Scroll down to the portion of text the user needs to be taken to.
  4. Follow steps 3 through 6 above again to assign it an ID.

Adding anchor links via a WordPress plugin

Here are 4 commonly used WordPress plugins for implementing anchor links:

1. TinyMCE Advanced

TinyMCE Advanced one is considered a must-have for Classic Editor since it adds backend functionality. The biggest disadvantage of the built-in method, as you noticed, is having to switch between Visual and Text mode. After you install Tiny MCE Advanced you’ll see an Insert option above the editing toolbar. Selecting the Anchor option from the drop-down list allows you to add ID attributes without editing HTML or switching to Text mode.

2. Add Anchor Links

If you prefer using Block Editor, we recommend installing Add Anchor Links. The plugin will automatically generate and assign IDs to all heading in the post based on their name. You only have to choose whether to link to them or leave them be. Best of all, links are generated for as long as the plugin is active. So, your UX (User eXperience) and SEO (Search Engine Optimization) won’t suffer if you decide to use another method or stop using anchor links.

3. Table of Contents

This is the best option for websites with posts that have plenty of headings. It would be tedious to create links for every single post, and the risk of typos and thus broken links is too great. Installing a WordPress plugin such as Easy Table of Contents is a way to fix that. It can automatically assign ID attributes to all headings (h1-h6), as well as create a table of contents element with jump links pointing to them. The element can be placed anywhere you want (beginning, end, or on the sides of the content), and set to appear with a delay or when the user has scrolled to a certain percentage of the page. Due to the sheer number of capabilities, the method deserves a separate, detailed guide. Stay tuned.

4. Elementor

Adding anchor tags to certain sections of your WordPress pages is very common. Although often done in PHP or CSS, this requires skills with editing theme files. For first-time users, it’s much easier and safer to utilize a WordPress website builder. Even better, many builders are paired with a WordPress theme installation and thus already activated. Do this to add Menu Anchor links in Elementor:

  1. Start editing the page with Elementor.
  2. Find the text, header item, or element you want to turn into a link. Click or highlight it.
  3. The menu on the left will change. Find the empty text field below Link.
  4. Enter an ID you’ll use after a hashtag. For example, #what-we-do
  5. Click on Update in the bottom left corner.
  6. In the Elements tab of the main menu on the left, search for ‘menu anchor’.
  7. Select Menu Anchor, then hold, drag, and release it above the section you want to navigate the user to.
  8. Under The ID of Menu Anchor, enter what-we-do.
  9. Click on the Update button again.