Creating Anchor Links in Public Website WordPress

When a page of information is necessarily long or contains many parts, it’s very important to think about how to organize the information to make it as easy to navigate as possible. In particular, it is frequently useful to be able to link to a specific part of the content on a page, rather than just the page itself. To do this, you’ll need to create a special kind of link known as an anchor link. It consists of two parts:

the link itself, and
the unique id that marks the point in your content that you’re linking to.

There are two ways to create anchor links in WordPress. The easiest and often best way is to use the Accordion panel, which includes a field to set an ID for your anchor link on each Accordion Row. You can also add it by editing the HTML in the Text view.

In either the main WYSIWYG editor on a page or in a Basic Content widget:

Click on the Text tab at the top of the editor.
Find the content on the page that you would like to link to. This will almost always be a heading, either <h2> or <h3>. In HTML headings look like this:

<h2>The heading you want to link to</h2>
Add the id to the opening <h2> tag. Now the HTML heading will look like this:

<h2 id=”uniqueid”>The heading you want to link to</h2>

To create a link to the anchor ID you’ve added:

Highlight the intended link text and click the Insert/edit link tool in the toolbar.
Type in the URL for the page that contains the anchor ID you added, followed by the # symbol, followed by the unique ID you created/added to the Accordion row.
If the page address was “https://www.bcit.ca/example/page/”, and your anchor ID was “anchor”, the final URL would be:

https://www.bcit.ca/example/page/#anchor
Click the Apply button.
Preview the page and click on your link to test it.
You should go to correct spot on the target page. If your link is to a specific Accordion Row, the page should open at that Accordion Row with the row already expanded for the user.
Example: Link to a previous Accordion Row in this document (opens in a new window to best show functionality)

Tips

The ID should be unique on the page (if you use the same ID in multiple places on the page, any links to that ID will only ever go to the first instance on the page). Do not start with a digit (number), two hyphens, or a hyphen followed by a digit.

Keep the descriptive part of the anchor tag short and descriptive. No spaces or special characters are permitted.

In a list of Frequently Asked Questions, it is probably better to refrain from using ids like “question2”. FAQ lists may to be reordered in future so it’s more useful to use a name that reflects the the question and answer, rather than one that refers to its position in the list.

Creating Anchor Links in Public Website WordPress

Part 1: Adding an anchor ID to an Accordion Row

Part 1 (Alternate): Adding an anchor ID to regular content via HTML (Text view)

Part 2: Linking to the Anchor ID

Tips

More information about working with links

More information about WordPress