WordPress: Add anchor links to a website page

DSB Marketing and Communications
10 steps
54 seconds

Mcmaster

What is an anchor link

An anchor link is a clickable text or image that directs a user to a specific location on a webpage, document, or email. They are also known as jump links. Anchor links improve the user experience by making it easier to navigate long documents. They are added into copy blocks using anchor tags in HTML code, and on the website side are represented by using [[/#anchorname]] on the URL as a suffix. For example: [[www.degroote.mcmaster.ca/#anchorname ]]

Getting started

Ensure you are logged into the WordPress site you want to work on. Navigate to the page you want to add Anchor Links to. In this example we are using <https://emba.mcmaster.ca/finances/>

Click "Edit Page"

Creating an anchor link

The most common positions to insert anchor links is [[in front of titles]] within your content. Using those titles like a menu to jump down the page.

Tip! Anchor links on our farm must be all in [[lowercase letters]], and we suggest forgoing spaces. It is best to make your anchor link [[match the title of the content]] you want to jump too, so they are standardized and easy to remember.

For this example we will add in two links. The first will be with "Tuition Includes:" You select the location in the copy that you want the anchor to appear.

Then you click the [[insert ]]drop down menu.

Selecting [[Anchor]] from the menu.

Reminder: if you have a title please match that, and anchors must be all lowercase letters.

A popup will show, and you type in the name you want to use. We type [[tuitionincludes]] for this example. Click [[OK]] to save. You will know it worked if you see a small grey anchor icon appear in your body copy.

We repeat the same process to ad a second anchor for [[Tuition Does Not Include]]:

Once you have added all the anchors you require you save and publish the page.

Testing the anchor link

Use the preview link to view your new page. And ensure once it loads you do a [hard refresh](https://www.google.com/search?q=how+to+do+a+hard+refresh&rlz=1C1GCEU_enCA1049CA1049&oq=how+to+do+a+har&gs_lcrp=EgZjaHJvbWUqBggBEEUYOzIGCAAQRRg5MgYIARBFGDsyBggCEEUYPDIGCAMQRRg80gEIMTk4MGowajmoAgCwAgE&sourceid=chrome&ie=UTF-8) to clear cache.

Add /# then your copy to the end of the URL to be able to test your anchor. For example:<https://emba.mcmaster.ca/finances/#tuitionincludes> This will take you to the page location.