How to Add a Table of Contents to Your WordPress Posts and Pages
Long articles often discourage users from reading the whole text. As a matter of fact, we are all used to scanning over text instead of reading it, when navigating over the web.
This generally happens because you are searching for some punctual information when you access the internet.
A table of contents at the beginning of the article proves to be useful in these cases. The LuckyWP Table of Contents plugin for WordPress provides this type of functionality.
Keep reading to learn how to use this plugin!
Step #1. – Install the Plugin
- Click Plugins > Add new.
- Enter “Table of Contents” in the Search box.
- Locate the LuckyWP plugin.
- Click Install Now.
- Click Activate.
Step #2. – The Plugin Settings
- Click Settings > Table of Contents
The configuration interface presents 6 tabs. Let’s take a look at some of them. The first tab refers to the global configuration options of the plugin, that is, the functionality of the table of contents.
- Change the Depth value to 4.
- Change the numeration to Roman numbers (nested).
- Add a period as the numeration suffix.
- Change the title to “Table of Contents”.
- Scroll down and click Save Changes.
- Click the Appearance tab.
This tab controls the overall look of the table. You can set your own colors or choose between predefined color schemes. I will choose the dark color scheme. Feel free to set the colors you prefer.
- Click Save changes after you configure your color scheme.
The Auto insert functionality allows you to insert a table of contents automatically at the beginning of each post. It is possible to change this position with the help of a dropdown selector. You can also insert a table of contents on pages or custom post types.
- Check Enable.
- Change the position to “After first heading”.
- Click Save changes.
- Click the Misc tab.
You can choose not to show particular heading levels of your post here. Furthermore, it is possible to filter out headings based on a certain text.
- Add the text “Sponsored content”, so this heading will be skipped and will not be included in the table.
- Scroll down to the SEO section.
- Check “Wrap table of contents with <!–noindex–> tag”
- Leave the other defaults.
- Click Save Changes.
Step #3. – Create a Post
- Click Posts > Add new
- Create a post with different headings.
You will only have the option to choose between h2, h3, and h4 since we set the depth value to 4 on the preceding step.
- Add a heading 2 – “Sponsored Content” (it will not appear in the table of contents).
- Save the post.
Step #4. – The Shortcode
The plugin provides a customizable table of contents block in the block editor and a shortcode as well. You can insert a table of contents in every part of the post by typing [lwptoc].
The LuckyWP Table of Contents plugin allows you to create tables of contents of WordPress posts, pages, and custom post types. This helps editors to better organize the written information. Furthermore, it improves the user experience by helping users locate the desired information quickly.
I hope you liked this tutorial. Thanks for reading!
hello can I find out how you set up the processing headings section
thanks for your question.
Let’s supose you don’t enable the automatic insertion of a table of contents, but you place a table of contents within a widget on the sidebar, or the footer, for example.
You will have the to enable “Processing of headings” for all post types you want this table of contents to appear. [b]Otherwise it won’t work.[/b]
This interpretation is vague and I’m not sure at all, but I think processing refers to adding an extra layer of PHP code, so the JS can do its work without a problem.
Hello Jorge, quick question: Can you please explain why you checked “Wrap table of contents with tag”? Does Google require it for SEO or is it just a suggestion?