Did you ever want to add a table of contents just like Wikipedia have on its website? If yes, then I’m going to show you a way that you use to put a similar table of contents box on your blog or a website. But before we move further, you should know why to use a table of contents and how does it affect your website. If you write long blog posts and want to provide your audience with a structured way to navigate through the pages and posts, the table of contents becomes a very handy tool. Let’s have a look at some of the key benefits:
It makes easier for users to jump to the section they want to read.
It also helps you to improve Search Engine Optimization (SEO), as Google automatically adds a jump to section link when your website appears in Google search results.
It also helps Google to generate structured links in search engine results.
Table of content can be created manually by writing custom HTML and CSS. But it can be very time-consuming as you will have to write separate code for a table of contents, for your every web pages or blog posts that you have. Moreover, it can be much difficult for a WordPress beginners. In this article, I will show you how you can create a table of contents for all your web pages within a minute, no matter if you have thousands of pages on your website.
To create a table of content in we are going to use WordPress plugin called “Table of Contents Plus”.
It automatically generates a Table of Contents on the each page or blog post from section headings, resembling very much the great collapsible Wikipedia style contents boxes.
Table of contents plus can also auto-generate visual sitemap and indexes of your content.
1. Installing Table of Contents Plus Plugin
From your WordPress Dashboard, visit the Plugins –> Add New. Inside the search box search for “Table of Contents Plus”.
Click Install Now and Activate the plugin.
As soon as you activate the plugin, table of contents for every page on your website gets generated. Which looks somewhat like this:
We are done creating Table of Contents for our every blog posts, and web pages within a minute.
But if you want to customise the layout and adjust some functions, navigate to Settings link from the plugin menu: Settings –> ToC+.
Under main option tab
Position: Here you can adjust the position of your table of contents. You can choose from four options. Before first heading (default), After first heading, Top, or Bottom. I recommend using the default one.
Show when: As we read earlier that if you have longer posts with too many headings, table of contents becomes very handy to navigate directly on that particular post heading. But if you have very fewer headings in your post, you would want to restrict the table of contents to display on the page. So under this section, you can choose when to show a table of contents. I personally show a table of contents when 4 or more headings are present.
Auto Insert for the following content types: This option allows you to display a table of contents on various page types. You can choose pages for products, shops coupons, table press page etc. I just use it for pages and the posts.
Heading Text: Here you can adjust the heading text option. You have the option to display the title on top of the table of contents, choose heading text, and allow the user to toggle the visibility of the table of contents etc.
Show Hierarchy: Checking this button will allow showing hierarchical view.
Number List Items: You can check this box to enable numbered list items.
Enable Smooth Scroll Effect: Once you click on the on a link inside the table of contents, it jumps to the anchor link. But if you enable smooth scroll effect, you are scrolled down to the anchored link smoothly.
Appearance: Here you can adjust the width of the table of the content box, look and feel font size, and you have some other customization options.
You have an another advance option available too where you can adjust anchor links settings include or exclude CSS file choose heading levels. Specify headings to be excluded from appearing in the table of contents. Separate multiple headings with a pipe |. Use an asterisk * as a wildcard to match other text.
Apart from that, if you navigate to sitemap tab, you can generate a sitemap for your content as well. At its simplest, placing (sitemap between square brackets, ) into a page will automatically create a sitemap for all pages and categories. This also works in a text widget.
In case you need any kind of a help, you can navigate to the third tab “help”. It will direct you to its website. Where you can find some more help regarding this plugin.
Hope you will find this tutorial useful. I would like to hear your views in the comment section below. And do not forget to subscribe to our weekly newsletter.