Overview
In this post we will use hyperlinks to create a table of contents to navigate within a single page using basic HTML.
To do this we need to modify standard hyperlink markup <a href="#name"></a>
with unique #names
to differentiate each link. For example: <a href="#introduction"></a>
.
Once our links are correctly formatted we create a target headings for each unique link.
Let’s look at how to do this in WordPress.
#name Hyperlinks
In the WordPress block editor create a Custom HTML block.
The following code will produce a table of contents with three section links, Introduction, Contents, and Conclusion. Note that each section has its own unique #name
.
Target Headings
All we need now are the three headings that our links will jump to. Here we simply add id="name"
to our existing HTML tags as follows:
<h4 id="introduction">Introduction</a></h4>
<h4 id="content1">Content</a></h4>
<h4 id="conclusion">Conclusion</a></h4>
Example
Table of Contents
Introduction
Content
Conclusion
Introduction
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet tristique magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur tincidunt lacus ac erat auctor luctus. Donec ac leo non urna faucibus tempor. Etiam laoreet diam massa, sit amet mattis dui placerat eget. Morbi nec odio elit. Cras vulputate augue in iaculis tristique. Phasellus sed sollicitudin ipsum. Aenean ultrices, magna et consectetur lacinia, urna augue rhoncus enim, et lobortis est nibh sed eros.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet tristique magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur tincidunt lacus ac erat auctor luctus. Donec ac leo non urna faucibus tempor. Etiam laoreet diam massa, sit amet mattis dui placerat eget. Morbi nec odio elit. Cras vulputate augue in iaculis tristique. Phasellus sed sollicitudin ipsum. Aenean ultrices, magna et consectetur lacinia, urna augue rhoncus enim, et lobortis est nibh sed eros.
Content
Nulla vitae ex justo. Maecenas sed maximus orci. Aliquam vel metus eleifend, semper odio quis, dictum ipsum. Praesent et dictum augue, ut luctus quam. Sed luctus, lectus eu ornare volutpat, quam orci volutpat felis, nec varius magna diam in velit. Mauris venenatis facilisis quam, a posuere ipsum congue at. Quisque lacinia dui scelerisque scelerisque consectetur. Ut porta auctor cursus. Curabitur sodales urna et ex rutrum ultrices. Aliquam et posuere nisl. Donec eu hendrerit lectus. Maecenas sit amet augue facilisis, tincidunt neque non, consequat mauris.
Nulla vitae ex justo. Maecenas sed maximus orci. Aliquam vel metus eleifend, semper odio quis, dictum ipsum. Praesent et dictum augue, ut luctus quam. Sed luctus, lectus eu ornare volutpat, quam orci volutpat felis, nec varius magna diam in velit. Mauris venenatis facilisis quam, a posuere ipsum congue at. Quisque lacinia dui scelerisque scelerisque consectetur. Ut porta auctor cursus. Curabitur sodales urna et ex rutrum ultrices. Aliquam et posuere nisl. Donec eu hendrerit lectus. Maecenas sit amet augue facilisis, tincidunt neque non, consequat mauris.
Conclusion
Aliquam ac quam consequat, posuere mi sed, finibus magna. Vivamus imperdiet sollicitudin egestas. Pellentesque sit amet ante ullamcorper, blandit orci porta, ultricies sapien. Suspendisse sit amet malesuada ex. In tempus vestibulum elit, ac suscipit risus. Aliquam tristique ante sed auctor consequat. Cras lacus mauris, tristique vel orci sit amet, vestibulum maximus metus. Nam blandit magna tellus, id vehicula sem vehicula a. Pellentesque auctor porttitor ante egestas tristique. Aliquam mattis orci eu suscipit molestie. Aenean ac lorem suscipit, sodales ipsum sit amet, congue nibh. Phasellus et sapien sodales, fermentum nulla ac, lobortis mauris. Suspendisse dapibus at lacus id posuere. Mauris laoreet justo sed nunc aliquet, at mattis magna gravida.
Aliquam ac quam consequat, posuere mi sed, finibus magna. Vivamus imperdiet sollicitudin egestas. Pellentesque sit amet ante ullamcorper, blandit orci porta, ultricies sapien. Suspendisse sit amet malesuada ex. In tempus vestibulum elit, ac suscipit risus. Aliquam tristique ante sed auctor consequat. Cras lacus mauris, tristique vel orci sit amet, vestibulum maximus metus. Nam blandit magna tellus, id vehicula sem vehicula a. Pellentesque auctor porttitor ante egestas tristique. Aliquam mattis orci eu suscipit molestie. Aenean ac lorem suscipit, sodales ipsum sit amet, congue nibh. Phasellus et sapien sodales, fermentum nulla ac, lobortis mauris. Suspendisse dapibus at lacus id posuere. Mauris laoreet justo sed nunc aliquet, at mattis magna gravida.
Sources: https://www.computerhope.com/issues/ch000049.htm