lets learn to add table of contents in your wordpress posts, pages and custom post types
its important to provide a table of content above the post body because of easy navigation. according to google they entertain websites who provides easy navigation to their visitors so adding table of contents to your website is a wise decision.
afew years before website development was a challenge but we should thanks to WordPress who made the development of website just a fun
if you are using wordpress like our website then its not recommended to make table of contents manually with HTML tags
at soft beginners we use Table of contents plus to make contents above the posts and pages
there are many plugins who can provide the table of contents facility but personally we like the most ifficient plugin and that is table of contents plus. its available in multiple languages including:
- Australian English (default)
- Brazilian Portuguese
- Simplified Chinese
Table of contents plus functionality
directly taken from WordPress plugin page
A powerful yet user friendly plugin that automatically creates a context specific index or table of contents (TOC) for long pages (and custom post types). More than just a table of contents plugin, this plugin can also output a sitemap listing pages and/or categories across your entire site.
Built from the ground up and with Wikipedia in mind, the table of contents by default appears before the first heading on a page. This allows the author to insert lead-in content that may summarise or introduce the rest of the page. It also uses a unique numbering scheme that doesn’t get lost through CSS differences across themes.
This plugin is a great companion for content rich sites such as content management system oriented configurations. That said, bloggers also have the same benefits when writing long structured articles.
how to use
although this is not a complicated plugin but for nooby bloggers i’ll like to describe the method of propper use in order to get this plugin in working position, perform the following steps:
- download and install the plugin
- activate the plugin
- click dashboard and open TOC+ settings page from the settings tab
in TOC+ settings you will have 2 tabs
- Main options
- Site map
Main options tab
in main options tab, you will have to select the position of Contents above the posts and pages. there are following options:
- Before first heading (Default)
- After first heading
select the option which you like and proceed to the next step. tip: at soft beginners, we use the “Top” option
after this, you will be asked to choos the next options antd that is “Show when headings are available” you can select the options through 2 to 10. at soft beginners, we have selected the (2)
after this step, you need to choos the options “auto insert for the following content types”
check the checkbox for posts if you wish to show table of contents above the posts
check the check box if you want to display contents above the pages
ok, now proceed to the next step and that is “headings text”
check the “heading text” checkbox if you want to include headings name by default in table of contents.
in next edit box, type the name which will display above to your content lists. by default its Content, you can type table of contents, page contents
next, you will be asked to enable toggle visibility for the users.
if you want to allow your visitors to toggle the contents, check the checkbox so they will become able to hide and show the contents
next, type the names for show and hide, its recommended that use default. however there is no issue if you want to change them
next, check the checkbox for hierarchy
after that, check the checkbox if you want to enable number lists for contents
check the checkbox if you wish to enable the smooth scroll effect
lets configure the appearance for the plugin, the default appearance options works well but you can select according to your wish
you can configure following:
- Font size
configure this section wisely otherwise leave it as it is.
you can configure following options:
- lowercase checkbox
insure anchors are in lowercase
- hyphenate checkbox
use rather than in anchors
- include homepage checkbox
show the table of contents at homepage
- exclude CSS file checkbox
turned off CSS styles for content lists
- Preserve theme bullets
If your theme includes background images for unordered list elements, enable this to support them
- heading levels
check the checkbox for heading level which you want to include in table of contents, uncheck headings will be excluded from lists
- exclude the headings with names
type the names to exclude manually from table of contents list
- Smooth scroll top offset
If you have a consistent menu across the top of your site, you can adjust the top offset to stop the headings from appearing underneath the top menu. A setting of 30 accommodates the WordPress admin bar. This setting appears after you have enabled smooth scrolling from above.
- restrict path
Restrict generation of the table of contents to pages that match the required path. This path is from the root of your site and always begins with a forward slash.
Eg: /wiki/, /corporate/annual-reports
- Default anchor prefix
targets are restricted to alphanumeric characters as per HTML specification (see readme for more detail). The default anchor prefix will be used when no characters qualify. When left blank, a number will be used instead. This option normally applies to content written in character sets other than ASCII. Eg: i, toc_index, index
this section allows you to configure some advanced features but its default options works well therefore its highly recommendded to use default options instead of changing them.
i hope you will feel no trouble in the installation and configuration procedure after reading my article, but if you feel any trouble, of you need some more help please let me know in comments below. thanks