Top




how to create a table of contents

How To Create A Table Of Contents In WordPress

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.

  1. When you write a long post with a number of points you want to bring to the attention of a reader
  2. When you write a long Frequently Asked Questions (FAQ) page
  3. When you create a long tutorial about a subject
  4. 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):

Instructions

  1. How to create a table of contents within a single page or a post
  2. 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 table of contents within a page example

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“.


Steps to create table of contents within a page:

(I’ll create a table of contents as seen in the Image 1. from Wikipedia)

  1. 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…
  1. Create a TOC – a list of titles of the topics (segments) you want people to land on
  2. 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

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

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

  1. Create Table of Contents – basically, just create an ordinary list of titles
  2. 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.

  1. 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.

  1. 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#toctarget=”_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.

 

Don't Miss A Thing!  Sign Up For Weekly Newsletter & Updates
online success optin

Enter your name & email and  get a FREE copy of my ebook, Your Online Success Starts Here
 

 

ipro ad

 

, , , ,

17 Responses to How To Create A Table Of Contents In WordPress

  1. Kate December 24, 2015 at 4:32 pm #

    Hello Dita ,It’s very informative post about anchors and linking, you\’ve explained it very detail that how to use them correctly. Your tutorial was worth mentioning on Adrienne’s Magical Monday post
    Kate recently posted…Portland Trail Blazers vs New Orleans PelicansMy Profile

  2. Sumit May 2, 2015 at 9:10 am #

    Hi Dita,

    I knew about anchors and linking, but you’ve perfectly explained how to use them correctly. And no doubt about it that you have explained the points very, very well. Your tutorial was worth mentioning on Adrienne’s Magical Monday post. It’s my first comment on your awesome blog, and you’ve got a regular visitor here 😀

    P.S: If you use TinyMCE advanced plugin, there’s an option in the “Insert” menu to add anchors. This comes in handy if you have to create a lot of anchors.

    Thanks for the efforts 🙂

    Regards,
    Sumit
    Sumit recently posted…CashPiggy Review + Guide – A new trusted money making website!My Profile

  3. Dee Ann Rice April 7, 2015 at 9:40 pm #

    Dita,

    I can see where a table of contents would come in very handy when writing a long blog post. I have been on a few really long blog posts and wished they had a table of contents.

    Most of my blog posts are not long enough to warrant a table of contents but it is something to keep in mind for the future.

    I like the fact that you do not use a plugin. I am really trying to keep my plugins to a minimum for the reason you stated and that is they slow down my blog.

    I would much rather use the coding you have showed us in order to produce a table of contents.

    Thanks for a great tutorial.

    Dee Ann Rice
    Dee Ann Rice recently posted…A Blogging Community Is…My Profile

    • Dita Irvine April 12, 2015 at 9:51 am #

      Hi Dee Ann,

      It is true for most articles one does not need TOC. However, as long articles are more favored these days by the major search engines I find that more and more bloggers write longer articles, often more than 1200 words. It is a pain sometimes to scroll through a long page and I often wished the authors would include TOC.

      Like anything else, sometimes TOC have a place in a post, other times they don’t. I too don’t include TOC in all articles but when there is a need, I do.
      Dita Irvine recently posted…The Millionaire’s Brain – What Is It About: ReviewMy Profile

  4. Nisha Pandey April 5, 2015 at 4:42 pm #

    Hi Dita,

    This is my first visit to your blog. I came to know about you via Adrienne’s blog. Nice to meet you here.

    creating a table of content is a great way to give your visitor the option of choosing and reading any part that he/she may like to read. Thanks a ton for sharing this technique with us.

    I’m book marking this page right now. Though you explained pretty well, I still may have to go though again.

    Have a great day ahead.
    Nisha Pandey recently posted…Google Chromecast Offers more Control with TV Remote UpdateMy Profile

    • Dita Irvine April 12, 2015 at 9:59 am #

      Hi Nicha,

      nice to see you here. You know, it also took me a little time to understand how this is done, but one you learn it you find that it is no big deal and it is just a few steps we need to learn and follow. But I believe, having a TOC sometimes, really ads to the article and the readers really appreciate it.
      Dita Irvine recently posted…Is Your Blog Mobile Friendly – A New Ranking FactorMy Profile

  5. Tom Southern April 3, 2015 at 4:32 am #

    Excellent post Dita! I’ve been after information on how to do just this for ages and now, thanks to Adrienne’s magical Monday post in which you were featured, I’ve found it. I’ll have a go at putting into action because I have a long resource post with 101 resources on my blog that I think would benefit greatly from just such a contents list.

    Also, although this information will be useful to everyone with a lot of posts on their blog, I think people who are blogging their book and creating posts that may later become chapters in their book will find this information especially useful because I’m sure there will be a lot of jumping between posts, just like there is in a book between chapters.

    Thanks again Dita.

  6. Mi Muba April 3, 2015 at 3:41 am #

    Hi Dita

    Wonderful tutorial and I am much impressed to see your in-depth knowledge of web language.
    I do feel sometime while reading a lengthy post to get the things which I need to know and for that I have to scroll deep down and it irks me a lot.

    Placement of TOC at the beginning of the post offers liberty to readers directly jump on the topic which they badly want to read.

    The whole process you explained in very easy to understand terms and a person quite unaware of HTML can also follow it without much difficulty.

    Thanks a lot for sharing.

    • Dita Irvine April 12, 2015 at 10:02 am #

      Hi Mi,

      Thank you for your kind comment. I find that many technical articles are very long and like you I am always miffed when there is no TOC. It makes the article very hard to understand because by the time you arrive at the end of the article you kind forget what the author is trying to explain.

      A simple Table of Contents would make it much clearer.
      Dita Irvine recently posted…List Of Key Things To Do After Installing WordPressMy Profile

  7. Kalista April 1, 2015 at 11:09 pm #

    One of the well needed article I came across. Still I’m wondering why some bloggers don’t use this method. Because it’s easy and powerful. Thanks for sharing this Dita.

  8. Sherman Smith March 30, 2015 at 9:20 pm #

    Hey Dita,

    You just gave me the aha moment Dita! I believe this is my first time on your blog and this topic caught my interest thanks to finding this post through Adrienne Smith.

    I always wondered how some bloggers create a TOC. They would have the links of what they’re going to talk about and they have it set up to where once you click on it, it takes you directly to the particular section of that post.

    I thought it was a plug that actually did this and all it is is a couple of lines of code. I usually don’t write really long blog posts, but whenever I do, this will come in handy! Thanks for the share Dita and I hope you have a fabulous week! Take Care!
    Sherman Smith recently posted…Why You’re Not Actually Finding Success In Attraction Marketing?My Profile

    • Dita Irvine March 31, 2015 at 2:31 pm #

      First, welcome to my site. I’ve visited yours, by the way. I am so glad you found this info helpful. It took me forever to find information online how to create table of contents in WordPress, especially when I was creating the tutorial.

      It turned out to be so simple!

      Take care!
      Dita Irvine recently posted…21 Inspirational Quotes About ProductivityMy Profile

  9. Adrienne March 18, 2015 at 2:50 pm #

    Hi Dita,

    I’ve seen a few people do this and wondered how the heck they did that. I thought it was actually pretty cool because the post they were using it on was really really really long. Being able to jump to certain parts of it was really very convenient.

    Now reading through this once I will admit it was a little confusing to me but I think if I do it with you as you explain it then I think it will make a little more sense. I don’t have time right now to do that but I’m saving this post because this is a great one to hold on to for future reference and I would love to learn how to do this myself.

    Thank you so much for taking the time to explain this, awesome my dear.

    Great to see you again and hope your week is going well.

    ~Adrienne
    Adrienne recently posted…How Understanding Your Readers Can Lead To Improved BusinessMy Profile

    • Dita Irvine March 18, 2015 at 3:41 pm #

      Hi Adrienne,
      Thanks for stopping by. And thanks for the comment. After I read your comment, I went back to the post and in fact I realized that I made a common mistake that many people who know how to do something do. I realized that I did not make the article as clear as I thought I did.

      So I re-worked it and updated it to make it much clearer, I think. I hope this is better.
      Dita Irvine recently posted…What Is Nofollow Tag And How To Add Rel Nofollow To A LinkMy Profile