How to add a table of contents to WordPress pages and posts

By | February 26, 2015

Introduction

If you’re writing long articles on your site, using a table of contents will improve the user experience. To add a table of contents to WordPress pages and posts, I prefer using a plugin. The best plugin I have found is Table of Contents Plus by Michael Tran. It’s the plugin I’m using on this website. This plugin automatically generates links to anchor tags for each header on your page. This is a lot faster than manually creating these links.

Installing Table of Contents Plus

Full video instructions:


In WordPress, click ‘Plugins’ and then ‘Add New’.

Installing-Table-of-Content-plus

Here, search for ‘Table of Contents Plus’. The first result is the one you need. Click ‘Install now’ to install the plugin.

Installing-Table-of-Content-plus-2

Click ‘Activate’ to activate the plugin.

Installing-Table-of-Content-plus-activate

Once installed and activated, table of contents will be automatically be used on your existing pages; there is no way to toggle the plugin on or off.

You can now find the settings for the pluging by clicking ‘Settings’, and then ‘TOC+’.

Accessing-Table-of-Content-plus-settings

Table of Contents Plus options

In the TOC+ settings page in WordPress, you’ll find multiple options.  When changing options, always use the blue ‘Update Options’ button at the bottom of the page to save the changes.

Table-of-contents-plus-Options

Position

This will determine where your table of contents appears on your pages. There are four options. By default, the ‘Before first heading’ option is used. In most cases, this is the most logical choice. The ‘After first heading’ will move the TOC down below the first heading. This is useful if you use a theme that doesn’t automatically use the page title as a heading (h1), so your first heading is actually the title of the article. The ‘Top’ option makes the table appear at the top of the article, disregarding headers. The last option is ‘Bottom’, which makes the table of contents appear at the bottom of your article. This option doesn’t make much sense to me; it doesn’t really improve the user experience.

Table-of-contents-plus-position-options

The four position options; before first heading (default), After first heading, Top, and Bottom.

Show when

Because a table of contents is mostly useful for longer articles, the TOC will, by default, only show up in articles with 4 or more headings. You can change this amount to anything between 2 and 10, by clicking on the dropdown menu and selecting another number.

Auto insert for the following content types

By default, the TOC is set to only appear in pages. This makes sense, as pages in WordPress are usually used for longer, information-driven articles, and posts are often used as shorter blog posts. If you want the TOC to also show up in your Posts, check the box in front of ‘posts’. You can also completely deactivate the plugin by unchecking both posts and pages.

Heading text

You can uncheck the box in front of ‘Show title on top of the table of contents‘ to use no headers for the TOC at all. In the textbox, you can enter your custom text to show up as the header of the table of contents box. This is mostly useful when you’re using another language than English on your website.

To disable the ability to hide or show the TOC, uncheck the box in front of ‘Allow the user to toggle the visibility of the table of contents‘. You can also use custom text to display for the hide and show links, by typing a different text in the textbox.

Table-of-contents-header-text

Default heading and hide text, and edited to another language (Dutch).

If you want to hide the table of contents when the page loads, you can check the checkbox in front of  ‘Hide the table of contents initially‘.

Show Hierarchy

By default, hierarchy is used, and subheaders are shown with using an indent. Uncheck the box to disable hierarchy.

Table-of-contents-plus-position-hierarchy

With hierarchy and without hierarchy.

Number list items

Uncheck the box to remove the default numbering.

Table-of-contents-plus-numbering

With numbering and without numbering

Enable smooth scroll effect

When you check this box, clicking on a link in the table of contents will scroll you to the heading instead of instantly jumping to the heading.

Appearance options

Table-of-contents-appearance-options

Width

You can choose 9 different fixed widths, and 7 different relative widths. Click on the dropdown menu to select a width. The default option ‘Auto’, scales the box if necessary. For instance, when using long titles. When using a fixed or a relative width, the long titles will be shown as multiple lines of text. In most cases, ‘Auto’ is the best option.

Table-of-contents-plus-width-relative-vs-auto

Relative width (25%) and Auto.

Wrapping

You can allow text to wrap around your table of contents. I’d recommend doing so if you have very long tables of content, and enough text in the first paragraph to wrap around it. This prevents your page from too much white space. The options you can select from the dropdown menu are; None (default), Left, and Right. In my opinion, when you’re using wrapping, the Right wrapping looks the best, because this means there is still text below the header.

Table-of-contents-plus-wrapping

No wrapping, left, and right.

Font size

This option allows you to make the font in the table of contentsbox smaller or larger. You can input values in a percentage, pixels or in em. Note that heading text on the table of contents (Contents [hide/show]), doesn’t change size when changing this.

Table-of-contents-default-vs-20px

Default and 20px font sizes.

Presentation

Here, you can select 5 different themes for your TOC box, or make a custom one.

By default, the table of content is grey, and uses the font and link color that you use sitewide. In most cases, this is fine. However, if you want to customize the box to go with your website design better than the default, click the last option; ‘Custom’. Here you can use hex codes, or use the color picker to pick colors for your custom table of contents box.

The result could look like this:

Hide the table of contents on an individual page or post

To disable the table of contents on one of your posts, add the shortcode [no_toc] to the start of your post.

Links

Official site for the plugin: http://dublue.com/plugins/toc/

 

8 thoughts on “How to add a table of contents to WordPress pages and posts

  1. Tammy

    I learned so much about putting in a table of contents…..wow!
    The way you have it laid out, I think I can do it. Wish me luck!
    Thanks again, this is awesome and I also book marked this.
    Tammy

    Reply
  2. tinnakon

    Hey Guido. I have never used this plugin before but it seems to be user friendly one. I am interested in your website and would love to request for video tutorials of this. This will be gorgeous and I am sure everyone will love it. Above of all this is a very nice place of information.

    Reply
    1. GuidoGuido Post author

      I’m actually planning to add video tutorials some time in the future. I have done a lot of video before for another project, so I do have the required editing skills and the software to do it.
      However, producing good videos is really time consuming, and I’m currently really busy working on other sites, so I just don’t have the time right now. If you want to make sure you don’t miss out on videos once I start adding them, follow me on social media.

      Reply
  3. Lal

    Hi,
    Thank you very much for the very useful plugin.

    I tried to use the setting ” Allow the user to toggle the visibility of the table of contents”
    but it does not seem to work. That would be a nice feature if you could get it to work.

    Thanks again,
    Lal

    Reply
    1. GuidoGuido Post author

      You’re welcome, Lal!

      The “Allow the user to toggle the visibility of the table of contents” function seems to be working fine for me on my sites, so I’m not sure why it isn’t working for you.

      Reply
  4. Vijay

    Hi Guido,
    Greetings,
    Just saw your YT video on how to use this plugin.
    And subscribed to your channel too.

    However, would be keen to know
    as to how to go back to the top of the page/post,
    (or to the table of contents)
    once you’ve clicked on a link
    and have come to a lower part of the page / post.

    Is there a way we can achieve that?

    Thanks

    Vijay

    Reply
    1. GuidoGuido Post author

      Not with this plugin, but you could manually make ‘anchor links‘. Make an anchor above your table of contents, then put anchor links in your article that you can click to go back up.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

*