How to create a Table Of Contents (TOC) in WordPress with/without plugin

The post

How to create a Table Of Contents (TOC) in WordPress with/without plugin

first appeared on VJ Design.

Most readers scan content rather than reading it in full. A Table Of Contents (TOC) helps your readers jump to different sections of a long page/post. Label each section of your content with a heading, and provide jump links to these headings. Creating a table of contents in WordPress is easy; let me show you how you can add a TOC using plugins and manually (without any code).

Bonus: Want to style the block to look like mine? Want to create jump links that scroll smoothly? It’s easy! See FAQs on smooth scroll and styling TOC block below.

How to Create a Table of Contents Manually

wordpress table of contents - How to create a Table Of Contents (TOC) in WordPress with/without plugin

Adding a link to a page or post in WordPress is easy with the block editor. To create a link to jump to a specific part of a page we need to create a unique address for that destination.
We use Headings to label different sections of content on our page/post. Let me show you how you create a link to such a heading.

Then to style the table of contents to look great using the free GenerateBlocks plugin, watch this video.

Total Time: 5 minutes

  1. Add a heading block

    If you have no headings, add some. Always use headings (heading level 2 or 3) to label your sections; thereby make your content easy to scan.

    To add a heading block, click on on Add block button and select Heading (or search for heading block)
    Headings introduce new sections and organise page/post content to help visitors (and search engines like Google) understand the structure of your content.

  2. Go to heading block advanced settings

    Select your heading block. Then from the Block settings on the right, select Advanced. You need to add a unique web address just for this heading block, called an “anchor”.

    To add an anchor, select the heading and then from advanced options, find the HTML anchor

  3. Create a unique web address for your heading block – via the HTML anchor field

    Type a short name – must be unique to this block on the page. Do not use spaces or wierd characters. Separate multiple words with a hyphen (-) or underscores (_).
    Add a unique name for your heading - via the the HTML anchor field
    Note: You can also copy-paste the full heading itself and let WordPress convert it into an anchor. For example, when I pasted the heading "How to Create a Table of Contents Manually" into the HTML anchor filed, WordPress automatically converted it to "How-to-Create-a-Table-of-Contents-Manually".

  4. Add the jump links at the top of your page

    Scroll back to the top of the page. Add a list block and create jump links to our headings (anchors).
    – Select the text (1)
    – Click on the Link button (2)
    – Enter the unique name you gave to the heading. Prepend a # to the unique name to create a jump link (3).

    wordpress-adding-link-to-anchor

    The # signals a jump link (also known as an anchor link).
    For example, the URL for this page is https://vjdesign.com.au/table-of-contents-wordpress/. We can add a #toc-manual to the end of the URL to send users directly to that heading.
    https://vjdesign.com.au/table-of-contents-wordpress/#toc-manual

  5. Repeat for the rest of the headings on the page

    Repeat steps 1 to 4 above for all the other headings on the page that you want to link to.
    wordpress table of contents - How to create a Table Of Contents (TOC) in WordPress with/without plugin

  6. Bonus – Smooth scroll

    Want to create jump links that scroll smoothly? It’s easy! See FAQ below.

    wordpress-jump-links-with-smooth scroll

How to Create a Table of Contents Using A Plugin

To create a table of contents with a plugin, you just need to install the plugin and configure a few settings. Whilst there are several WordPress table of contents plugins to choose from, here are a few that I like.

1. Heroic Table of Contents Plugin

The Heroic Table of Contents is a WordPress Block which means you can build your TOC right in the WordPress editor at a location of your choice. It is a new plugin that is gaining popularity.

  • There is no need to create the table yourself, our plugin automatically picks up all the headings in your existing article and creates a full table of content in a click.
  • You don’t have to use all the headings, you can decide to hide a specific type of heading such as h6 or just manually chose which titles to display.

Cost: Free

2. Easy Table of Contents Plugin

The Easy Table of Contents plugin adds a user-friendly and fully automatic way to create and display a table of contents generated from the page content.

I have this plugin installed on this site and use it to create a table of contents for all my posts. This is how the TOC generated by this plugin displays on my posts.

Example Table of Contents added using Easy Table of Contents plugin.
Example Table of Contents added using Easy Table of Contents plugin.

If you are interested, here are the settings I have used. Go to Plugins > Settings.

easy toc plugin - How to create a Table Of Contents (TOC) in WordPress with/without plugin

Settings Used on this site:

  1. Easy Table of Contents – Settings Page – 1
  2. Easy Table of Contents – Settings Page – 2
  3. Easy Table of Contents – Settings Page – 3
  4. Easy Table of Contents – Settings Page – 4
  5. Easy Table of Contents – Settings Page – 5

Cost: Free

3. SimpleTOC – Table of Contents Block

The SimpleTOC – Table of Contents Block works by parsing the post content and retrieving the heading blocks and creates a new dynamic block with a list of links to the headings. It does not need Javascript and additional CSS. It works out-of-the-box without any configuration.

Frequently Asked Questions (FAQ)

What is a table of contents?

A table of contents (TOC) is a list of headings with anchor links so that your readers can jump to specific sections on a long page/post quickly and easily.

toc plugin - How to create a Table Of Contents (TOC) in WordPress with/without plugin

How do I create jump links that scroll smoothly?

Anchor links typically jump the user to the heading instead of scrolling smoothly. This can be a jarring experience.
You will notice that the jump links on this page scroll smoothly.

To enable smooth scroll, simply copy-paste the following CSS code.

html {
scroll-behavior: smooth;
}

To add the above CSS code, from the WordPress menu, select Appearance > Customise > Additional CSS.

Additional CSS
You can also add CSS using a plugin like Simple CSS.

How do I style the table of contents to look nice?

To style the table of contents list (remove bullets), simply copy-paste the following CSS code.

.toc {
list-style: none;
margin-left:0;
margin-bottom:0;
}

To add the above CSS code, from the WordPress menu, select Appearance > Customise > Additional CSS.

Additional CSS
You can also add CSS using a plugin like Simple CSS.

Conclusion

A table of contents (TOC) improves SEO and reader experience allowing them to jump to the sections they want. Use the manual method described above if you only need TOC on a few pages/posts. If you write lots of long articles, there are several WordPress table of contents plugins to choose from. There is also a TOC block under development.

The post

How to create a Table Of Contents (TOC) in WordPress with/without plugin

first appeared on VJ Design.

Leave a comment

Affordable and creative web solutions from Melbourne, AU. I build robust fast-loading WordPress sites for a fraction of the price. Call VJ on +61389867186
Address :
106 Alamanda Blvd,
Point Cook,
VIC - 3030
Australia.
Tel : +61389867186
Email : hello@vjdesign.com.au

 Logo

Image of

$600-12000