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 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 “Easy Table of Contents”.
It automatically generates a Table of Contents on 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.
How to Create a Table of Contents in WordPress
1. Installing Easy Table of Contents Plugin
From your WordPress Dashboard, visit the Plugins –> Add New. Inside the search box search for “Easy Table of Contents”.
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+.
1. General Settings
Under the main options:
Under enable support setting, you have the option to enable Table of contents for various post types.
- Custom CSS
- oEmbed Responses
- User Requests
- TablePress Tables
- Affiliate Links
You can select the post types to enable support for the table of contents.
Auto Insert: With the auto-insert feature, you can select post types to automatically insert a table of contents to your page.
You can auto-insert table of content with post types like products, shops coupons, table press page etc. I just use it for blog posts.
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
I personally use and recommend the default option.
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.
Display Header Label: You can tick the box to display header text above the table of contents.
Heading Label: 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.
Toggle View: It allows the user to toggle the visibility of the table of contents.
Initial View: With an initial view option, you can initially hide or unhide the table of contents.
Show Hierarchy: Checking this button will allow showing a hierarchical view.
Counter: You can select from the dropdown menu to enable numbered list items. The options include:
- Decimal (default)
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.
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 also have the option to customize the color theme of the table of contents. You can change background, border, title, link, link hover, and link visited colors.
Under advanced settings, you can adjust anchor links with lowercase and use (-) or (_).
You have 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.
In case you need any kind of 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.
There are several other advanced options like smooth scroll offset, mobile smooth scroll offset, limit path, default anchor prefix, and widget affix selector. to adjust and configure Table of Contents.
Read more such WordPress tutorials.
Hope you will find this tutorial on how to create a Table of Contents in WordPress useful. I would like to hear your views in the comment section below.