How To Add Table Of Contents To Blog Post

Have you ever stopped reading an article because it was too long, you got bored, or you couldn't find the section you really wanted to read? This might not have happened if the author had added a table of contents.

A table of contents is a list of jump links that lead to different sections on a page or post. They're particularly useful for long posts, as they highlight the critical sections of an article in order to improve the reader experience. A reader might jump to the section that is most relevant to their question. Or they might read the entire article — just in the order that they want, instead of the way the author laid it out on the page.

A table of contents can help search engine bots as well as humans. By clearly labelling the important section names of an article, bots can understand what the article is about and display rich snippets in the search results.

Now that we've discussed the benefits of adding a table of contents to your WordPress website, let's look at how. First, we'll briefly walk through how we can manually add a table of contents. Then we'll look at how you can automatically with WordPress plugins.

How to Create a Table of Contents in WordPress Manually

You can manually add a table of contents to your WordPress posts or pages with a little bit of code. Here's how a table of contents might look and function on the front-end of your WordPress site:

Note that we'll be using the Gutenberg block editor, which is WordPress' native editor. If you're using another WordPress page builder, you'd be better off using a table of contents plugin that's compatible with that page editor.

Let's walk through the process of manually creating a table of contents.

1. Go to the post or page you want to add the table of contents to.

2. If there are none, create the headings that will be used as the items in the table of contents.

3. Click into the first heading block. A toolbar will appear.

4. Click the More Options button (the three vertical dots icon) and select Edit as HTML.

5. Add a unique ID name to the opening tag of the heading. An ID name is a unique identifier that's added to the opening tag of an HTML element. Here's what that looks like for a heading:

                    <h2 id="unique-id"> Section Name </h2>                  

6. Repeat for the rest of the headings on the page (or only the ones you want to include in the table of contents). For this demo, I'll use the ID names "anchor-1," "anchor-2," "anchor-3," and "anchor-4."

7. Scroll back to the top of the page. Click the Add Block button in the top toolbar.

8. Click the Custom HTML block. This HTML block will allow you to create the table of contents.

9. Add the table of contents with your jump links. Jump links are a specific type of hyperlink that readers can click on to "jump" to different sections on the same page. To create the jump links for this demo, I simply filled in the rel="noopener" target="_blank" href attribute with a hashtag and the id name of the headings I wrote in the previous step.

To create your table of contents, copy and paste the following HTML into the block:

                                          
<div class="toc">
                      
<p>Table of contents</p>
                      
<ol>
                      
<li><a rel="noopener" target="_blank" href="#anchor-1">Section 1</a></li>
                      
<li><a rel="noopener" target="_blank" href="#anchor-2">Section 2 </a></li>
                      
<li><a rel="noopener" target="_blank" href="#anchor-3">Section 3 </a></li>
                      
<li><a rel="noopener" target="_blank" href="#anchor-4">Section 4 </a></li>
                      
</ol>
                      
</div>
                                      

10. Customize the section names and jump links so that they link to the correct sections.

When editing your jump links, don't forget the hashtag in front of the ID name.

Finished! Your table is all set.

While this process only takes a few steps, it does require some knowledge of HTML and CSS. If you're not familiar or comfortable with coding, then you can use a plugin to add a ToC to your WordPress posts and pages. Below, we'll check out the best table of contents plugins that don't require any coding.

How to Create a Table of Contents with a Plugin

Creating a table of contents (or ToC) with a plugin is simple. You simply install a ToC plugin and configure its settings.

You'll start with general settings. Most plugins will allow you to pick what type of content should be supported, and whether you want a table of contents to be automatically inserted in every post, page, and other supported content type or whether you want to decide on a post-by-post basis.

Then you'll have some design options. How wide do you want the table to be? What font size? These are just a few options that will likely be included in the plugin's settings.

Let's take a look at some of the best ToC plugins on the market. You can check out the documentation for whichever plugin you choose for more detailed instructions on how to use it.

Best Table of Contents WordPress Plugins

Below are a range of free and premium plugins you can use to add tables of contents to your WordPress site, no matter what your budget is.

1. Fixed TOC

Fixed TOC is a powerful and cleanly coded WordPress plugin that will make it easy to add a table of contents to your blog. This premium plugin can automatically scan headings throughout a post and create the table of contents, which remains fixed as you scroll down the page.

Fixed TOC comes with more than 50 animated effects, meta boxes for each page, various customization options, and more. In addition to being compatible with the latest browsers and version of WordPress, this plugin is also translation-ready so you can localize your table of contents to any language you want.

By using this plugin, you can rest assured that your readers will find the content they want quickly and easily.

Pros

• You can nestle items in the table of contents, allowing you to link to subsections within larger sections.
• It creates a table of contents automatically based on the headings on the page.
• Its "sticky" shortcut button keeps the ToC on one spot as the user scrolls down the page.

Cons

• It could be difficult to use with Gutenberg, WordPress' native block editor, because it's not optimized for it.
• When you click on the sticky button, the ToC obscures content on the right side of the page (users have to close the ToC to see that content again).

Pricing: $20 one-time fee

2. Heroic Table of Contents

Heroic Table of Contents is an easy way to add an automatically generated table of contents to your WordPress website for free.

This plugin scans your articles and generates a table of contents that lists your article's headings (h1, h2, h3, etc). You can easily hide heading classes you don't want. This means no more manually building your ToC, or having to update it when you change an article. Plus, because it's built as a WordPress block, it's easy to drag and drop a Heroic ToC into your content.

Pros

• It automatically creates a table of contents based on the headings on the page.
• You can relabel headings so that they're shorter and easier to scan.
• It lets you choose between a numbered, bulleted, or plain list.
• It's Gutenberg-optimized for easy use within WordPress' native block editor.

Cons

• It only comes with 4 ToC styles.
• You won't have access to extensive customization options in terms of color, fonts, and border styles.

Pricing: Free

3. Easy Table of Contents

Easy Table of Contents is perfect for new bloggers and site owners on a budget.

This free plugin automatically generates a table of contents for your posts, pages, and custom post types by parsing content from headers. You can choose where and when to insert your table of contents in your articles. You also get several options to configure your table of contents and control how it is displayed, including smooth controlling and multiple counter bullet formats. You can even choose to hide the table of contents from particular posts.

Pros

• It automatically creates a table of contents based on the headings on the page.
• You can enable and disable the ToC for certain pages and posts.
• It allows you to nest headings so that the list is easier to sift through.
• It's compatible with Gutenberg, WordPress' native block editor.
• Extensive color, width, and font size customization options are available on the backend.

Cons

• Some users have reported that the plugin is bloated with extra code, which could slow down your site.
• You can't manually insert the ToC into different sections of the page.

Pricing: Free

4. LuckyWP Table of Contents

LuckyWP Table of Contents is another free WordPress plugin that helps you generate a table of contents with a Gutenberg block, a sidebar widget, or a manual insert (with a shortcode).

This feature-rich plugin allows you to automatically insert a table of contents on every page, customize the look of your ToC down to the font weight, easily choose a color theme, and customize the item labels. It also includes a "hide/show" button in the upper right-hand corner of the table of contents, allowing users to choose whether they'd like to use the ToC or not.

You can also place this ToC anywhere in a post or page using a shortcode.

Pros

• It's highly customizable: you can change the colors, width, float, font weight, and font size of the tabel items.
• The ToC includes a "show/hide" button for a better user experience.
• It's compatible with Gutenberg, WordPress' native block editor.
• You can set a minimum number of headings to display the ToC. If a page doesn't meet this number, it won't show a ToC.
• You can customize the labels of each section for easier scanning.

Cons

• It's only compatible with a handful of page builders: Gutenberg, Elementor, Beaver Builder, and WPBakery.
• If the "auto-insert" option is on, it will place a ToC on every page, which may look funky depending on the page (e.g. a product page).

Pricing: Free

5. Ultimate Blocks

Ultimate Blocks is a powerful Gutenberg plugin that has more than 15 blocks. One of these blocks enables you to add a table of contents to your WordPress posts or pages in no time.

With this block, there are no additional settings to configure. Just insert the "Table Of Contents" block and it will generate a ToC automatically from your headings. You can choose which headers you'd like to allow to be listed and give users the option to toggle the visibility of the ToC.

Pros

• It automatically generates a ToC based on the headings on the page.
• Users can choose whether to show or hide the ToC.
• You can add a ToC anywhere on a page or post by simply adding the block where desired.
• You can separate the list items into two and three columns for a better user experience.

Cons

• It's only compatible with Gutenberg — not with third-party page builders.
• It offers limited customization options; you can't change the colors, font, and width of the table of contents.

Pricing: Free

6.Thrive Architect Table of Contents

Thrive Architect is a feature-rich page builder that allows you to extend the functionality of your WordPress site, including the ability to automatically create a table of contents.

With Thrive Architect's Table of Content element, you can select which headings you want in a table of contents so that every time a particular title appears, a table of contents will be automatically generated. You can also select a template for your ToC and customize it by choosing its layout, color, typography, border, shadow, and more.

Pros

• It automatically generates a ToC based on the headings on the page.
• You can choose the heading types you'd like to display in the table.
• You can separate your list items into two and three columns and rename the items for a better user experience.
• The sticky scroll option allows the table of contents to follow users as they scroll down the page.
• If the ToC is sticky, you can highlight the current section or highlight all sections the user has already visited.
• Its advanced customization options allow you to change the hover color, spacing, background styles, and border colors of the table and its items.

Cons

• It's not available as a standalone plugin. You'll need to subscribe to the Thrive Suite for access.

Pricing: $19/month (for the entire Thrive Suite)

Improve the Reader Experience with a Table of Contents

You can add a table of contents to your WordPress posts and pages by following the step-by-step guide or using any of the plugins above. A table of content improves your SEO and makes it easier for your readers to navigate through your content, allowing them to read exactly what they want to.

Editor's note: This post was originally published in September 2020 and has been updated for comprehensiveness.

Originally published Mar 24, 2021 7:00:00 AM, updated March 24 2021

How To Add Table Of Contents To Blog Post

Source: https://blog.hubspot.com/website/best-table-of-content-wordpress-plugins

Posted by: gregoryleighte47.blogspot.com

Share this post