In today’s tutorial I will show you how to create a Table of Contents in WordPress. Having a Table of Contents (TOC) is a great way to help your readers and search engines navigate through long pages and multi-page tutorials or guides.
I have decided to write this post because a number of readers commented very positively about the table of contents that are a part of my WordPress and How to Start a Blog tutorials. Since it took me quite a while to figure out how to create table of contents in WordPress, I thought I would share this knowledge and save you a lot of time if you ever decide to create a table of contents for some of your pages and posts.
Interestingly, very little can be found on the topic of how to create a table of contents in WordPress, and if you do find something online, the articles refer you to plugins which will help you create a Table of Contents in WordPress. But plugins may slow down your site and you may not even use this feature very often.
In my opinion, creating a TOC is so simple that you really do not need to burden your blog with another plugin.
When Would You Use Table of Contents In WordPress Posts or Pages
There a couple of instances when a table of content on your blog posts or pages becomes handy.
- When you write a long post with a number of points you want to bring to the attention of a reader
- When you write a long Frequently Asked Questions (FAQ) page
- When you create a long tutorial about a subject
- When you write a tutorial or a guide that consists of several lessons, each on its own page
Now I will show you how to create a table of contents in WordPress for two different situations. As well, for a demonstration purpose, when you’ll click on the links below, you will be redirected to the instruction for each of these two ways of creating the TOC within the article (click on the links to see what I mean):
- How to create a table of contents within a single page or a post
- How to create a table of contents for multi-page guides or multi-page series of related topics
1. How To Create A Table Of Contents For A Single WordPress Page
Creating a table of contents within a single page or a post would be applicable for a long post with many different subtopics. Frequently Asked Questions (FAQ) is a good example. Another good example are Wikipedia pages. There, most pages have a large number of subtopics and all the subtopics are listed in a TOC with each entry clickable and able to transport you to the specific topic.
Image 1. An Example Of Table of Contents Within a Page
The example in Image 1. is from Wikipedia on a topic of online marketing. If you click on the article, you will notice that the article is very long and you would have to scroll forever to arrive at topics that are on the bottom of this particular index.
However, the table of contents within that page enables you to easily navigate to the topic of your interest without any scrolling.
To create this type of a TOC you use the technique of “jumping to specific locations within a post“.
(I’ll create a table of contents as seen in the Image 1. from Wikipedia)
- Create an anchor or a mark where you want your reader to land after they click on the redirecting link.
Your mark will be <a name=”your marking word”>. You will place this command just above the spot in your text where you want the reader to land when they click on the link in the Table of Contents. Write this command in the Text mode of your WordPress editor. Change “your marking word” to anything that suits you and make sure that you keep the quotation marks around this marking word.
You would create a different mark (or anchor) for the different segments you want your readers reach. So in the Wikepedia example they would use anchors:
- <a name=”segment 1″> – place this anchor above segment 1 (in text editor)
- <a name=”segment 2″> – place this anchor above segment 2 (in text editor)
- <a name=”segment 3″> – place this anchor above segment 3 (in text editor)
- and so on…
- Create a TOC – a list of titles of the topics (segments) you want people to land on
- Create a link from each of the titles in the TOC. When a reader will click on this link he will be redirected to the specific topic (segment) of the article.
The links are created by adding a link command in the Text mode of your WordPress editor. The command will be:
<a href=”#your marking word”>your text</a>. You will place this command in the Table of contents you are creating. Let’s see how to create these links in your Text editor with the segment examples used for anchors and the Wikipedia examples (Image 1.).
Table of Contents (again used the example of Wikipedia)
- <a href=”#segment 1”>History</a>
- <a href=”#segment 2”>Delivery Methods</a>
- <a href=”#segment 3”>Display Advertising</a>
- and so on…
As you can see, to create a table of contents within your WordPress post or a page is very simple. Just make sure that you preserve each element of the anchor and the link and that the anchor and the link names are the same. The main difference between the anchor and the link, is that the anchor does not contain the href command and the # sign besides the name and that the anchor is surrounded by quotation marks.
2. How To Create A Table Of Contents For Multi Pages In WordPress
Creating a table of contents across multi-pages would be applicable to tutorials, guides, menus and other documents that are multi page, have a central theme and originate from one main, typically summary page. The same idea applies to books and documents.
An example of this type of a TOC is the How To Start A Blog Table of Contents. Click on this link to see it. You will arrive directly at TOC, rather than the top of the page.
Image 2. Example Of Multi Page Table Of Contents
There when you click on a link you are redirected to a new page through a regular link. However, on the page you arrive at, at the bottom, you have a redirecting link (Back to Table of Contents) that brings you back to the TOC of this tutorial, and this is actually the crux of this demonstration.
Image 3. Redirecting Back to Table of Contents
► Steps to create a Table Of Contents in WordPress for multi page situation
There are 4 steps you need to follow to create a TOC across multi pages in WordPress
- Create Table of Contents – basically, just create an ordinary list of titles
- Link each entry in the TOC to its destination – This is a regular hyperlink which redirects people to exactly the post or a page where you want them to go to. In Image 3. example I redirected the reader to a page called “What is Web Hosting – Choosing The Best Web Host – Overview”.
The title of the link in the TOC was “What Is Web Hosting – Choosing The Best Web Host – Overview” and I linked that title to the actual post.
The link, as it appears in the text editor is:
<a href=”http://bloggingspree.com/web-hosting-best-web-host/” target=”_blank”>What Is Web Hosting – Choosing The Best Web Host – Overview</a>
The blue part is the URL of the post, the green part is the anchor text and the red part allows the link to open in a new window.
- Create an anchor for Table of Contents. The anchor is the place where you want your readers to land when they come from a different page.
To create the anchor follow exactly the same steps described above, in the section on creating TOC within a single page. Briefly, place the anchor just above the TOC title.
Your anchor will be: <a name=”your marking word”>. Use any marking word that suits you. In the example that I am using the marking word I chose was toc.
Therefore my anchor was: <a name=”toc”> which I placed directly above the Table of Content title in the Text editor.
- Design a redirecting link. This link will be placed on the page from which you will be redirecting your readers back to TOC. This link is very similar to a regular hyperlink with one exception.
In Image 3. you will notice a link called “Back to the Table of Contents”. This link will redirect people back to the top of WordPress Tutorial TOC
When you create this link you need to add an anchor recognition element to it. In the case of my example here where the anchor is “toc”, the anchor recognition element will be #toc. This recognition element is devoid of quotation marks and contains a # sign in front of it. The resulting link will be:
<a href=”http://bloggingspree.com/how-to-start-a-blog#toc” target=”_blank“>Back to Table of Contents</a>
To summarize the elements of a redirecting link:
- blue – URL of the page you want your reader to reach
- purple – anchor recognition element
- red – prompt to open the link in a new tab
- green – anchor text
That is all that is to it! As you can see in a few short steps you can create amazing TOCs.
In summary, I believe that knowing how to create a table of contents offers you an opportunity to organize your content in an easily navigational fashion. It will offer your readers a quick overview of the content in your post, especially if your post is a long one and contains different subtopics. As well, knowing how to create a table of contents for multi-page guides or series of articles will allow your readers to stay focused on your blog and easily traverse the different pages you want your readers reach.
Did you find this post useful. Please let me know in the comments. Your comments help me to know that I am answering your questions. Thanks.