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 first:
It makes easier for users to jump to the section they want to read.
It also helps you to improve Search Engine Optimization (SEO), so when your website appears in Google search then Google automatically adds a jump to section link.
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 a WordPress plugin called “Table of Contents Plus”.
It automatically generates a Table of Contents on each page or blog post that resembles similar to the 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
Visit your WordPress Dashboard, navigate to 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 is generated on every page on your website. 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 long 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 types of content: 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 table of contents to hide or show the table.
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. When 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 another advance option available where you can adjust anchor links settings include or exclude CSS file choose heading levels. Here you can Specify what headings to be excluded in the table of contents box to appear on the front-end of the website. Multiple headings can be separated by using a pipe
|. The asterisk
* sign can be used 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 generate a sitemap for all pages and categories. The best part is you also use it 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 related to 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.