How Do I Wagtail?

How Do I Wagtail?

Creating Anchor Links

Creating anchor links for headings is automated!

When using the paragraph editing tool, make sure to use the H2 and H3 buttons in the markup bar to ensure headings are marked up correctly. Doing so will let the CMS auto-generate anchors for these headings.

Image showing how to create a header

As an important note, make sure not to mark up the heading text itself outside of "setting the heading", as things like bolding or adding italics will interfere with generating the anchors (additionally, heading styling from our style guide assumes no additional markup is used, so that's a good rule to follow in general).

In order to find out what the anchor is, you can either preview the page, or you can publish it and then view the live version - with the page open in the browser:

  1. Right-click on the heading you want the anchor for,
  2. select "inspect element" from the context menu and your browser should open the Developer Tools with a view of the current document, focussed on the heading you inspected:
Inspecting a heading

You will see that the heading has a little drop down icon, which you can click to reveal the anchor element for this heading. The anchor element should have an "id" attribute, which is the important bit we need:

Auto-generated anchor id

The text in this id attribute is what we can use to directly link to the anchored heading on the page. If the id attribute reads "purchasing-adult-and-youth-tickets", for example, then the associated direct link to that heading consists of the page URL plus "#purchasing-adult-and-youth-tickets" added to the end of that URL.

Linking to a page header

To link to a page header that was created by the above approach, the "link" button in the paragraph editor can be used to turn any stretch of text into a link. After selecting some text and pressing the link button:

Image showing where to highlight and add link

Pick "external link" in the link dialog, and use the live URL for the page the header is on, with the anchor id added. E.g. if the page is our campaigns/eu-misinformation page, and the anchor id attribute for the heading we want to directly link to reads "tools", the external link should be as shown:

image showing how to link jump words to an anchored section
All done!

Save draft or publish and your anchor links should be set up. Remember to test your links to make sure they're jumping to the sections you want them to jump to.

This is part of a broader movement for a healthy internet. See more.