How to add Table of Contents in WordPress Blog without Plugin

In this tutorial, we will learn how to add a table of contents to a WordPress blog without a plugin.

You often try to find a way to accomplish anything on your WordPress blog without plugins. This way, you can reduce the plugins you don’t need and make your WordPress blog much faster.

Here I will show you the easiest way to create a table of contents for a WordPress blog without a plugin.

So, let’s start the process now.

---

Why Use a Table of Contents

The table of contents plays a significant role in your article.

It helps the users to jump into a particular section of the article they want to read, and it delivers a better user experience.

A long article might be boring, and users may leave your page. But by using TOC (Table of Contents), you can make your article user-friendly and divide your content into several sections.

In this way, users can jump quickly into those parts of the article they want to read.

Google also shows Jump to links in SERPs (Search Engine Results Pages), so using the TOC, you can help your users to reach the specific area of the content they want to read.

[Back to Top ↑]

---

Add Table of Contents in WordPress without Plugin

Before creating the table of contents for your article, first of all, you need to complete your content article with proper headings and sub-headings like h1, h2, h3, etc.

After that,

Step #1

• Jump to headings and sub-headings.
• Click on the Block – Advanced and go to the HTML anchor box.
• Now write the Anchor text separated by an underscore (_) or a hyphen (-) without using space.
• Complete the anchor text in other headings and sub-headings using the same process.

Bonus tip: Always keep your HTML anchor text short and unique.

A short and unique HTML anchor text can be more attractive and impactful for a better user experience.

Step #2

After creating the HTML anchor text for the headings and sub-headings, go to the Block where you want the table of contents to appear.

Now add a Paragraph, name it Table of Contents, and then add a list Block. In the list, add headings and sub-headings text.

Step #3

Finally, select the list and link them one by one with a hash (#) and HTML anchor text.

---

Note: I’m using GP (Premium) WordPress theme and GenerateBlocks to create different blocks and styles.

GeneratePress is one of the best and fastest WordPress themes to provide a better user experience, and the theme loads much faster.

Download GeneratePress

While GenerateBlocks gives you complete control to create various blocks and styles like page hero, content template, layout, header & footer, etc.

For developers who prefer to build a website without a page builder, this block-based plugin is so helpful for creating different blocks on their website.

Download GenerateBlocks

[Back to Top ↑]

---

Add Smooth Scroll for Anchor Links

For this website, I’m using GeneratePress. To activate smooth scroll in GeneratePress, go to WordPress Dashboard Appearance – Customize – General and tick the Smooth scroll tab.

Now you can initiate smooth scroll on anchor links using the smooth-scroll CSS class.

To add a smooth scroll to regular links, give the <a> element the smooth-scroll class.

<a class="smooth-scroll" href="#my-section">My Section</a>

To use this CSS class:

• Go to the TOC anchor links list.
• Click the anchor link Block – Advanced and paste the smooth-scroll CSS class into the Additional CSS class(es) box.
• Repeat the same process for other anchor links one by one.

To control smooth scroll speed, use the following PHP snippet.

/* Smooth scroll speed */

add_filter( 'generate_smooth_scroll_duration', 'tu_smooth_scroll_duration' );
function tu_smooth_scroll_duration() {
    return 1200; // milliseconds
}

Copy the above PHP snippet and use the theme’s functions.php file to add your PHP.

The best option is to add a PHP snippet using a child theme without harming any line of code in your parent theme.

However, the Code Snippets plugin is a great way to add PHP snippets to your website. You can activate and deactivate any specific snippets and even add notes about what they do.

To install it, go to the WordPress dashboard Plugins – Add New, and search for Code Snippets.

[Back to Top ↑]

---

Adding Table of Contents using Plugins

Using a plugin is a quick and easiest way to create a table of contents for your WordPress blog posts or pages. Easy Table of Contents is free and the best tool that automatically generates a table of contents based on the headings in your text.

Even you can try other plugins like Table of Contents Plus, LuckyWP Table of Contents, etc. They are also the best plugins to create TOC.

Here is how to use it:

• Log in to the WordPress admin dashboard, go to Plugins – Add New
• Search the Easy Table of Contents plugin. Click the Install Now button and Activate it.

Next, you can change the plugin’s settings according to your choice. Navigate to Settings – Table of Contents to find all the available options.

[Back to Top ↑]

---

Conclusion

So this is the best way to create a table of contents on your WordPress blog without a plugin or with a plugin. Using any method, you should be able to accomplish this task with little hassle.

Using the manual method, you can easily avoid using a plugin, but adding a TOC can be time-consuming and annoying if you’re writing a long blog post.

Plugin like Easy Table of Contents is the fastest way to add a table of contents to your WordPress site.

Now, how would you like to create TOC for your WordPress website?

I would love to hear from you!

Also, if you have any questions, please don’t hesitate to comment below.

I love your comments. It makes me more precise to give you the best WordPress resources and guides.

You can follow WPSettingbox on Twitter and Facebook to receive fresh and updated content.

[Back to Top ↑]