How to create Anchor Links within your WordPress page?
Latest posts by Donncha Hughes (see all)
- Phlox Theme Instructions Part 2 Configuring the Blog - October 16, 2019
- Phlox Theme Instructions Part 1 Adding a Menu - October 16, 2019
- How to secure your URL and hosting for your WordPress website (updated 2019 with video)? - September 24, 2019
I was writing content for a page for my other website. The page is about Feasibility Studies and needed to be fairly long (almost 1,800 words with several images). It is structured into five distinct but related areas. This is ideal for Anchor Links whereby the reader can see the topic that they want to read and can click on the link to jump to that part of the page immediately rather than scrolling down and/or not being able to find it. To do this is not complicated but I find that every time I go to do it, I have forgotten the precise instructions.
Instructions for adding Anchor Links within your WordPress Page
#.1 I presume that you have written your blogpost or article and know which text you want to select for the Anchor Link and the text that you to Anchor to.
#.2 In the Visual Editor click on the HTML Editor
#.3 I wanted to add a Link to each of the four headings in my article. Let’s take the second one ‘What is a successful feasibility study?’ I find where that text is placed in the html editor and I change the HTML to read:
<a title=”Jump to part of page that discusses what makes for a Successful Feasibility Study” href=”#anchor2″> #.2 What is a successful Feasibility Study?</a>
The text after title is displayed when you scroll over the Anchor Link.
#.4 Next you scroll down to the paragraph or section of the page where you want the reader to jump to i.e. the Anchor text and place this HTML before it.
You can see that we have used Anchor2 which relates back to the HTML we inserted earlier. Please note that any descriptive text can be put inside the inverted commas ” ” such as “feasibility” but I prefer to just change the numbers.
#.5 Don’t forget to update.
I am not a HTML expert but with some care and attention, adding Anchor links is definitely possible, if and when they are suitable.
#.6 Test (and a little tweak)
For some reason when I tested the anchor links they did not work precisely so I had to add some extra HTML to the code at step 4. The html for a line break is … <br></br> …. So step 4 is now:
The author of this blogpost Wendi Cholbi outlines a slightly different way to add Anchor or Jump links (same principles) and is worth checking out. She uses it to create footnotes and also has the nifty idea to create a reverse hyperlink so that the reader can go back to where they were before they read the footer.
As always I welcome your comments