How To Create Table Of Contents In Wordpress

A table of contents is a collection of jump links. It takes you to different sections of a page or article. They’re especially beneficial for lengthy posts because they emphasize the essential parts of content to improve the reading experience.

A reader may skip forward to the most relevant part to their query, or readers may read the entire piece only in the order they desire rather than the author setting it out on the page.

A table of contents may benefit both search engine algorithms and humans. For example, bots can grasp what an article is about, and It provides rich snippets in search results by explicitly labeling the main section titles.

What’s the Point of Including a Table of Contents in WordPress Posts?

You’ve probably seen a table of contents on a website like Wikipedia. Although insignificant articles, a table of contents makes it easy for visitors to jump to the part they want to read. It also aids WordPress SEO since Google places a jump-to-section link next to your site in search results.

Jump To Section Example In Serp

You may very well manually construct a table of contents in WordPress HTML code. However, this is challenging for newbies since you must manually create a list, add links, and add ID attributes across the post. But there is a simple solution. Let’s see how to quickly construct a table of contents in WordPress posts and pages.

Creating a Table of Contents in WordPress

To begin with, install and activate the Easy Table of Contents plugin. After activation, go to the Settings » Table of Contents page. You can manage the table of contents’ general settings from here, such as picking a position and a label for the container, among other things.

Table Of Content Settings

You can also activate or disable auto-insertion of the table of contents for each post type. If activated, the plugin will add a table of contents to any article with more than four headings.

You can alter it to any other number you choose unless all of your articles are extensive; we don’t suggest including a table of contents on each one.

After that, scroll down to modify the look of the table of contents box. You can choose a theme, change the width and height, change the font size, or create a custom color scheme for your table of contents box from this page.

Appearance Size Of Table Of Contents

After that, go to the Advanced settings area. For most websites, the default configuration is sufficient. But you may go over them to see if anything needs to be changed. Don’t forget to save your changes with the Save Changes button.

Advanced Setting For Toc

How to Make a Table of Contents for Posts or Pages in WordPress

Unless you stop auto-insertion, the plugin will add a table of contents to posts. It depends on the parameters you selected previously. You may also change the parameters for each post.

On the post edit screen, you’ll see a new area where you can create, and you can modify your post’s table of contents.

Modifying Post Table Of Content

You may disable the auto-insert option for the table of contents in WordPress. You may also specify the heading level used for table elements.

Remember that any changes you make in this box will override the global settings for this individual post/page after writing the article with various headers. You may see the Table of Contents in WordPress in action by previewing it.

Table Of Content Preview

The table of contents will show right above your article’s first heading. Your viewers may go to the part they wish to read by clicking on links.

Create a WordPress Table of Contents Table Manually.

Create a table of contents in WordPress without a plugin with a bit of coding. You can manually add a table of contents to your WordPress posts or pages. On the front end of your WordPress site, here’s how a table of contents may appear and function:

Creating A Toc Manually

It is important to note that we will be utilizing the Gutenberg block editor. It is WordPress’ primary editor. Suppose you’re using another WordPress page builder. Then you should use a table of contents plugin that works with that page editor.

Let’s go over how to make a table of contents the old-fashioned way.

  1. Navigate to the post or page to which you wish to add the table of contents.
  2. If there aren’t any, construct the headers used as a table of contents elements.
  3. Navigate to the first heading block, and it will show a toolbar.

Adding Sections For Toc

From the More Options box, choose Edit as HTML.

Choose Edit As Html In More Drop Down Manu

To the heading’s beginning tag, add a unique ID name. An ID name is a one-of-a-kind identifier appended to the beginning tag of an HTML element as an example of a heading; consider the following:

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

Repeat for the remaining page headers. I would use the IDs “anchor-1,” “anchor-2,” “anchor-3,” and “anchor-4” for this demonstration.

Add Unique Id Names

Return to the top of the page and click Add Block on the top of the toolbar.

Click On Add Block On Top Left Corner

Select the Custom HTML block from the drop-down menu. You may use this HTML block to build a table of contents.

Select Custom Html In Add Block Menu

Include a table of contents along with your jump links. Jump links are a sort of hyperlink. It allows users to “jump” to various parts on the same page by clicking on them.

We used a hashtag and the headers’ id name in the rel= “noopener” target= “blank” href attribute. Now copy and paste the following HTML into the block to create your table of contents in WordPress:

<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>

Modify the section titles and jump links to point to the correct sections. Then keep the hashtag in front of the ID name in mind. Finally, your table will be ready.

Table of Contents Styles

The design of your table of contents has a significant impact on how effectively it improves the UX of visitors. With that in mind, let’s take a look at the two most common WordPress TOC designs.

Floating Table of Contents

A floating TOC is a widget fixed to the page’s side, and it is implemented in two phases. To begin, create a WordPress TOC and add it as a widget to your WordPress site.

After that, you may use the Q2W3 Fixed Widget plugin to keep the TOC widget anchored to the page’s side. After installing this plugin, return to your site’s Widgets section and open the TOC widget. Then tick the Fixed widget box:

Setting-Up Floating Toc

The TOC will no longer disappear when the user scrolls down the page when this option is selected. Instead, it will scroll with the page’s contents to ensure that it is always visible. A floating table of contents in WordPress is also the default style used by the previously described Fixed TOC plugin.

Table of Contents Sidebar

This technique displays a sidebar to the right or left of your web page. The TOC sidebar does not scroll with the user and remains fixed:

Example Of Toc Sidebar

The TOC sidebar is quite simple to construct. If feasible, include a TOC widget or a shortcode in an existing sidebar widget your WordPress TOC will subsequently be shown as a fixed component of the sidebar.

The Most Effective WordPress Table of Contents Plugins.

No matter your budget, the free and premium plugins listed below may help you add tables of contents to your WordPress site.

Fixed TOC

Fixed Toc Plugin Logo
The TOC demonstration is on the right side of the page with a TOC table of contents (TOC). Fixed TOC is a well-coded WordPress plugin with many features. This makes adding a table of contents to your website a breeze. For example, using this premium plugin, you may view the headers of a post.

It generates a table of contents in WordPress that stays constant as you navigate the page. Fixed TOC includes over 50 animation effects. It has meta boxes for each page, several customization possibilities, and more. This plugin is also translation-ready. It allows you to translate your table of contents to whatever language you choose. Using this plugin, you may be confident that your readers will discover the material they want fast and straightforward.

Pros

  • Items in the table of contents can be nestled. It enables you to link to subsections within more significant sections.
  • It generates a table of contents automatically. It depends on the page’s headers.
  • Its “sticky” shortcut button maintains the table of contents in one place while the user scrolls down the page.

Cons

  • Because it is not optimized for Gutenberg, WordPress’ primary block editor, using it may not be as simple as it appears.
  • The ToC obscures material on the right side of the page when you click on the sticky button.

Pricing is a one-time charge of $20.

Heroic Table of Contents

Heroic Table Of Content Logo
Heroic Table of Contents uses Hugin, and It allows you to easily add an automatically produced table of contents to a WordPress website. This plugin analyzes your article and creates a table of contents in WordPress based on the heading tags in your article (h1, h2, h3, etc.).

You may conceal heading classes that you don’t want to see. This means you won’t have to construct your ToC manually or update it whenever you alter an article because it is designed as a WordPress block. It is simple to incorporate a Heroic ToC into your text.

Pros

  • It generates a table of contents based on the headers on the page.
  • You can rename Headings to make them shorter and more straightforward to scan.
  • It allows you to create a numbered, bulleted, or plain list.
  • It has been optimized with WordPress’s native block editor, Gutenberg.

Cons

  • It only comes with four different ToC styles.
  • You will not have significant customization choices like color, fonts, and border styles.

Price: None.

Easy Table of Contents

Easy Table Of Content Logo
Easy Table of Contents in WordPress is ideal for inexperienced bloggers and site owners on a tight budget. For your articles, pages, and custom post types. You also have numerous choices for configuring and controlling your table of contents. It includes smooth controlling and multiple counter bullet forms. You may also conceal the table of contents from individual posts.

Pros

  • It generates a table of contents based on the headers on the page.
  • The ToC can be enabled and disabled for specific pages and posts.
  • It allows you to layer headers to make a list easier to navigate.
  • It works with Gutenberg, WordPress’s native block editor.
  • On the backend, you may customize the color, width, and font size to your liking.

Cons

  • Some customers have complained that the plugin is bloated with additional code. Your site may become slower as a result of this.
  • You cannot manually insert the table of contents in WordPress to different page portions.

Price: None.

LuckyWP Table of Contents

Luckywp Plugin Logo
LuckyWP Table of Contents is a free WordPress plugin. It allows you to create a table of contents using a Gutenberg block. You can create a sidebar widget or manually insert it using a shortcode. This feature-rich plugin also allows you to include a table of contents on every page. In addition, you can change the design of your ToC down to the font-weight.

You can easily select a color theme and edit the item labels. It also has a “hide/show” option in the top right-hand corner of the table of contents in WordPress. That allows users to select whether or not to utilize the ToC. You can also use a shortcode to add this ToC anywhere in a post or page.

Pros

  • It is very configurable, with the ability to alter the colors. In addition, it provides you width, float, font-weight, and font size of the table elements.
  • For a better user experience, the ToC contains a “show/hide” option.
  • It works with Gutenberg, WordPress’s native block editor.
  • To show the ToC, you can specify a minimum number of headers if a page does not fulfill this criterion. Then it will not display a table of contents in WordPress.
  • You may personalize the labels for each area to make scanning simpler.

Cons

  • It is only compatible with a few page builders. It includes Gutenberg, Elementor, Beaver Builder, and WPBakery.
  • If the “auto-insert” option is enabled, a ToC will be placed on every page. That may seem strange depending on the page (e.g., a product page).

Price: None.

Ultimate Blocks

Ultimate Blocks Logo
Ultimate Blocks is a robust Gutenberg plugin with over 15 blocks. One of these blocks allows you to quickly create a table of contents in WordPress posts or pages.

There are no other settings to set up with this block. Enter the “Table Of Contents” block, and it will produce a ToC based on your headers.

You may choose which headers should be shown. It provides consumers the opportunity to control the appearance of the Table of Content.

Pros

  • The table of contents is made using the page’s heading tags.
  • Users can select whether to display or hide the Terms of Service.
  • You may place a ToC anywhere on a website or post by simply inserting the block.
  • For a better user experience, divide the list items into two or three columns.

Cons

  • It only works with Gutenberg and does not work with third-party page builders.
  • It has few modification choices. For example, you can’t modify the table of contents’ colors, typeface, or width.

Price: None.

Thrive Architect Table of Contents

Thrive Architect Logo
Thrive Architect is a feature-rich page builder that lets you enhance the functionality of your WordPress site. It includes the ability to generate a table of contents in WordPress automatically.

You can specify the headers you want in a table of content so that a table of contents is automatically produced whenever a specific title appears. You may also choose a template for your ToC and modify it with layout, color, typography, border, shadow, and other options.

Pros

  • It produces a table of contents based on the page’s headers.
  • You may select which heading to display in the table.
  • To better user experience, divide your list items into two or three columns and rename them.
  • Users may have the table of contents follow them down the page using the sticky scroll option.
  • If the table of contents is sticky, you may highlight the current section or all parts the visitor has already viewed.
  • You may alter the hover color, spacing, background styles, and border colors of the table and its elements using extensive customization options.

Cons

  • It is not accessible as a separate plugin. To gain access, you must first subscribe to the Thrive Suite.

The monthly cost is $19.

CONCLUSION

Following the step-by-step method or using any of the plugins listed above, you can create a table of contents in WordPress posts and pages. A table of content boosts your SEO, making it easier for your users to browse through your material. In addition, it gives them the freedom to read anything they want to read.

Load More Related Articles
Load More By Laurie Stanton
Load More In How to

Leave a Reply

Your email address will not be published. Required fields are marked *