Table of Contents
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’.
Here, search for ‘Table of Contents Plus’. The first result is the one you need. Click ‘Install now’ to install the plugin.
Click ‘Activate’ to activate the plugin.
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+’.
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.
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.
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.
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.
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‘.
By default, hierarchy is used, and subheaders are shown with using an indent. Uncheck the box to disable hierarchy.
Number list items
Uncheck the box to remove the default 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.
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.
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.
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.
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.
Official site for the plugin: http://dublue.com/plugins/toc/