Add Anchor in Wordpress - 4 Methods [2024] 💥
Anchor links are links that send a visitor from one place to another on the same page, or to an exact place on a different page on the same website. Anchor links can help you direct your visitors to just the right place on your website. Anchor links can also improve user experience, and even give you a SEO advantage.
Advertisement
So most anchor links point from a menu to a section on the page. The anchor is therefore usually placed in a heading or row or any kind of block. Anchor links can be found anywhere on the page, just like normal links. Think of menu links, normal text links or buttons.
1. Add anchor in Wordpress using Gutenberg
In this example we link from a piece of text in a paragraph to a heading. Let's start with the anchor in the heading. Just create a new heading in a post with the Gutenberg editor and give it a name. To the right there is a column with stuff conceirning this header. Click on "Advanced" and a new section will open up. Here you will find "HTML anchor" with already an anchor-text in the box. You can replace the text or just use it as your anchor-text to link to this heading. Copy that text, we will paste it with a "#" upfront in the link of the piece of text in the paragraph.
All right, now we want to link to the anchor from a link in a text on a random page. Just create a paragraph in Gutenberg, write some text. Then highlight one of the words and click on the link icon. Where the link goes, you paste the text from the anchor we made earlier with a "#" up front like this "#h-test-heading". See screenshot below.
In Gutenberg all blocks have the option to give them an anchor in the right column in the "Advanced" section, not only the Headings. All Blocks also have the option to "Edit as HTML" when you click on the 3 dots as in the screenshot below. There you will need to add your anchor to the ID attribute of that tag. For example, the code below:
<p id="h-test-heading2">2. Add anchor in Wordpress using DiviBuilder
The Divi Builder is the best page builder out there, so let's start with it. Let's make the anchor first. Divi allows you to do this by entering the ID of the anchor for a section, row, or module. The anchor name is the ID. In the screenshot below I use a row to attach the anchor to. Go to "Row settings" then the "Advanced" tab.
In the CSS ID field, enter the anchor ID.
The anchor ID "#h-test-heading" can now be used anywhere on the website like in the menu's, buttons, or just plain text in the paragraphs. Just use "#h-test-heading" instead of an interior or exterior link. Of course, "#h-test-heading" can be replaced by any words of your choice.
3. Add anchor in Wordpress using Elementor
Open any page or post with Elementor Page Builder, click "Edit with Elementor". On the next page in the left sidebar, search for "anchor" in the searchbox. You will now see the "Menu Anchor Widget". Just drag the widget to any place on the page where you would like to create an anchor to link to. See screenshot below.
In "the ID of Menu Anchor", enter the anchor text of your choice and Save.
The anchor ID "#h-test-heading" can now be used anywhere on the website like in the menu's, buttons, or just plain text in the paragraphs. Just use "#h-test-heading" instead of an interior or exterior link. Of course, "#h-test-heading" can be replaced by any words of your choice.
4. Add anchor in Wordpress using WP-Bakery Pagebuilder
WPBakery Page Builder allows us to enter an id value for each row/column/widget/element we want (via the Row ID and Element ID fields). This is extremely useful because a) we don't have to manually create our id targets and b) it makes linking highlighting much easier and more precise. To add a target ID, edit the page builder row/column/element that you wish to edit (via clicking on the pencil icon). You can enter the desired id-value (e.g. h-test-heading) in the Row ID and Element ID fields (in "General" tab). See screenshots below.
The anchor ID "#h-test-heading" can now be used anywhere on the website like in the menu's, buttons, or just plain text in the paragraphs. Just use "#h-test-heading" instead of an interior or exterior link. Of course, "#h-test-heading" can be replaced by any words of your choice.
Are your anchor links not working correctly?
There are several common errors that people make when anchor links stop working. These are the steps to make sure your anchor links function properly.
- Use a CSS ID, not a CSS Class.
- Make sure that the button or anchor link text has a # before it
- Check that the CSS ID anchor doesn't have a #
- You must ensure that each anchor link has a unique CSS ID
Tip: Add smooth scrolling to your anchor links
The "Page Scroll to ID" plugin is a fully-featured plugin that replaces browser's "jumping", with smooth scrolling animations when clicked links with href values containing #. It offers all the essential tools and advanced functionality needed for single-page websites.
Advertisement