How to Create a Table of Contents in WordPress without plugin?

In this tutorial, we are going to Create a Table of Contents in WordPress without plugin. With the latest WordPress update, many of us have migrated from Classic Editor to Gutenberg Editor. so, we are going to try to create TOC on Block Editor.

Furthermore, in this guide you will learn more about

  • Why use Table of Contents?
  • How to use TOC in WordPress?
  • Using Smooth Scroll JavaScript
  • Style Table of Contents using CSS
  • So on…
How to Create a Table of Contents in WordPress without plugin

Why use Table of Contents in WordPress?

The main reason to use Table of Contents in WordPress is about User Experience. Some of the users want to quickly read the lower part of the content and scrolling down might be annoying so creating Table of Contents helps to quickly reach the desired part of the contents.

Another reason for using Table of Contents is that Google Shows Jump to link in Search Engine Results Pages (SERPs) so that users can directly click to the link and read the article.

Jump to link in Google SERP

Furthermore, Google can also show multiple Jump to links in SERPs so using TOC on your website can help users to reach the desired area of the contents.

Anchor Links in Google SERP using Table of Contents

Steps to Create a Table of Contents in WordPress without plugin

1. Complete your article

The first step is to complete your article, write your blogpost using heading h1 and sub headings h2, h3, etc. and get ready for create table of contents.

2. Add HTML Anchor Tag

Now go to the headings and add HTML Anchor. Follow the process

  1. Go to the Heading/sub-heading
  2. Click on Block
  3. Now to go to Advanced
  4. Write the Anchor Text separated by an underscore

You can also use a hyphen (-) but don’t use space while writing Anchor Text. Finish writing Anchor Text in other heading and sub-headings using the same process but always make HTML Anchor Text unique.

Adding HTML Anchor in WordPress for TOC

3. Create a List with Text

After writing the Anchor Text go to the block where you want to display Table of Contents. Usually, we add Table of Contents before the first heading. So, before creating a list let’s add a TOC heading, so add a paragraph and write Table of Contents, and after that add a list block.

Add list block to create table of contents

In the list, copy all the heading text and paste it into a list block one by one. Here I am copying all my sub-headings h2 only. You can also copy h3, h4, etc using an Indent list item.

TOC List

Important Step: Now Select Table of Contents Heading and List Block by Holding Shift Key from the Keyboard and make it a Group.

Select TOC Heading and List Block in WordPress
Group Two Blocks in WordPress

Now let’s give a class name to the whole Group block, TOC heading, and list block so that we can style our table of contents.

Give wplogout-table-of-contents CSS Class to Group Block.

Giving CSS Class to Group Block

Give wplogout-toc-heading to the TOC Heading.

Giving CSS Class to TOC Heading

Give wplogout-toc-contents to the list block.

Giving CSS Class to List Block

4. Insert Links to the Table of Contents

Now it’s time to link each list with HTML Anchor text that we have created earlier. Select the list one by one and link them with a hash (#) and HTML Anchor Text respectively. Also, do the same for other lists and link them with their anchor text.

Linking HTML Anchor Text to Create TOC

5. Style Table of Contents

Now, let’s style our Table of Contents using CSS code. Copy the WPLogout TOC CSS code and Go to Appearance > Customize > Additional CSS and paste it.

Feel free to tweak the CSS code according to your theme requirements.

/*wplogout.com Table of Contents without plugin*/
.wplogout-table-of-contents {
    background-color: #eef2f5;
    padding: 10px;
}

.wplogout-toc-heading {
    font-weight: 900;
    font-size: 25px;
}

ul.wplogout-toc-contents {
    margin-top: -1em!important;
}

.wplogout-toc-contents li {
    list-style-type: none;
    position: relative;
    margin-bottom: 5px;
}

.wplogout-toc-contents a {
    font-size: 20px;
    color: #525ef0;
    border-bottom: 2px solid #525ef0;
    text-decoration: none!important;
}

.wplogout-toc-contents a:hover {
    color: #585858;
    border-bottom: 2px solid #585858;
}

.wplogout-toc-contents li:before {
    content: "→";
    margin-right: 1em;
    color: #585858;
    left: -30px;
    position: absolute;
}

6. Smooth Scroll Anchor Links

A lightweight Script developed by Chris Ferdinandi helps to Smooth Scroll the Anchor Links. Thanks to cferdinandi for this awesome script.

This step is completely optional to use, so test table of contents without using Smooth Scroll script and again test TOC by using Scroll code.

<script src = "https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
<script >
    var scroll = new SmoothScroll('a[href*="#"]', {
        speed: 500,
        speedAsDuration: true,
        offset: 70  // Set offset if you are using fixed header
    }); 
</script>

Here in the above code, you can increase or decrease speed. Also if you are using a sticky header then you can enable offset otherwise you can delete the offset from the above code.

Furthermore, some of the WordPress themes have an inbuilt script box to insert code and some themes don’t. so if your theme doesn’t have any box to add script then

  • install Insert Headers and Footers plugin
  • Go to Settings > Insert Headers and Footers
  • Copy and Paste the Smooth Scroll code in the Scripts in Footer Section
  • Hit Save Button.
Smooth Scroll using Insert Headers and Footers Plugin

How to add Smooth Scroll code in GeneratePress Theme?

  • Go to Appearance > Elements > Add New.
  • Choose Element Type as Hook.
  • Add a Title.
  • Copy and Paste the above code.
Smooth Scroll using Elements Module in GeneratePress

Furthermore, Choose the Hook settings as wp_footer and Go to Display Rules and choose Location as Entire Site and hit Publish button.

Hook-after-WP_Footer-in-WP-Show-Posts
Display Rules in Entire Site in GeneratePress Theme

Also Read: GeneratePress Review

Result

The Table of Contents look like this

Table of Contents Result

Add Table of Contents in WordPress without plugin Video Tutorial

How to Create a Table of Contents in WordPress without plugin? - WPLogout

Add Table of Contents in WordPress using Plugin

You can add Table of Contents to your posts and pages using a plugin too. It is an easier and quicker process since you don’t have to do anything once it is setup.

I am using the LuckyWP Table of Contents plugin in my blog. Before I was using Easy Table of Contents plugin but it was adding a small external request though it was not impacting my site’s performance. But I shifted to LuckyWP Table of Contents plugin which is fast and SEO friendly.

LuckyWP Table of Content

You can use other TOC plugins too in your blog. Test your site after installing the TOC plugin and use it.

Frequently Asked Questions

How to add HTML Anchor Links in WordPress?

You can add Anchor Links in WordPress using HTML Anchor Text and linking that Anchor Text directly using the link button.

Can I use plugin to add Table of Contents?

Yes, you can use Table of Contents plugin to your WordPress website. Install the plugin like LuckyWP Table of Contents that is SEO friendly and doesn’t add requests Extra DNS Lookup.

Does Google show Jump to Links in SERPs?

Yes, Google shows jump to links in Search Engine Result Pages if you are using a table of contents with anchor links. Table of Contents can be created easily with the help of a plugin or without using any plugin.

Will Table of Contents plugin make my website Vulnerable?

The answer is uncertain since it depends upon the standard of coding but it is always advised to avoid the uses of the plugin so, if you can, add Table of Contents manually to your WordPress website.

Wrapping Up

You can easily create a Table of Contents in WordPress without plugin. By using a manual method you can easily avoid the uses of the plugin but if you are writing a long blog post then creating TOC can be time consuming and annoying.

Furthermore, if you have any queries/feedback, please feel free to comment below.

Share:

GET 100+ FREE SEO TOOLS

Quickly access over 100+ popular SEO/Marketing tools to Boost your website traffic.

Thank you for subscribing. Check your Email(Didn't receive? check Spam Folder)

Something went wrong.

I love things to do with WordPress, Digital Marketing. Blogging has been my Passion. In my free time, I enjoy watching Series and Movies.

14 thoughts on “How to Create a Table of Contents in WordPress without plugin?”

  1. you are mad man lot’s of love bhai❤❤
    bhai can you please make a article on how to create table of contents like wplogout?? please

    Reply
  2. Would Using GenerateBlocks gain any time savings with the manual approach or creating a reusable block somehow? Thinking like creating a blog template with most of the styling ready to go and just fill out the anchors each time. Thanks and keep up these Generate-family tutorials. They’re awesome

    Reply
    • If you are using going to use same format for Container than you can make a reusable block and converting to a regular block you can use blocks while creating whole template
      Also, Thank You for the compliment.

      Reply
  3. Hi there just wanted to give you a quick heads up. The words in your post seem to be running off the screen in Internet explorer. I’m not sure if this is a format issue or something to do with internet browser compatibility but I thought I’d post to let you know. The design and style look great though! Hope you get the issue solved soon. Thanks

    Reply
  4. Hi Suraj,

    Rankmath is offering the FAQ Schema option. Would you recommend that we have both FAQ Schema and the Table Of Contents (generated either via a plugin or manually) on a same page? For instance if I’m writing about a new mobile phone, I’d like to explain the features and also have FAQ. Would there be any conflict here?

    Reply
    • Hi Shrawan, FAQ Schema and Table of Contents are totally different things. so, there won’t be any conflict. I am using both FAQ Schema and TOC in some of the posts. Also, in this post, I have used both TOC and FAQs

      Thanks

      Reply
  5. Hi Suraj,

    Your guide is awesome, but since my writers are non-techys, I decided to go with the LuckyWP TOC plugins.

    However once I installed this plugin and testing it out on a few pages, immediately Google Webmaster backend threw up errors on recrawling these pages with the “Clickable elements too close together” and “Text too small to read”

    These pages did not have any other changes apart from the addition of the table generated by the plugin. Note that this error appears only one those pages where I’m showing the table of contents.

    Have you faced a similar issue in your experience on Google Webmaster?

    Reply
    • Hello Shrawan, I haven’t face any problem while using the TOC plugin. If you think fonts are smaller then you can increase the font size for TOC. LuckyWP has an option to increase the font. Please give it a try and try to validate the error in Google Webmaster.
      Thanks

      Reply

Leave a Comment