How to Create a Table of Contents in WordPress (9 Methods)

Table of Contents

You can add a Table of Contents (TOC) to a WordPress website in multiple ways. Below is a complete list of ALL practical methods, from easiest to advanced, with steps, pros & cons, and SEO impact

Method 1: TOC Using Plugin (Easiest & Most Popular)

 Best Plugins

  • Easy Table of Contents

  • LuckyWP Table of Contents

  • Rank Math TOC Block

  • Yoast SEO TOC Block

  • TOC Plus

Steps (Example: Easy Table of Contents)

  1. Go to Dashboard → Plugins → Add New

  2. Search Easy Table of Contents

  3. Install & Activate

  4. Go to Settings → Table of Contents

  5. Choose:

    • Auto insert (posts/pages)

    • Heading levels (H2–H6)

    • Position (top, after first heading)

  • Automatically generates TOC from headings
  • Best for long SEO articles

SEO Benefit

  • Improves UX

  • Helps Google sitelinks

  • Reduces bounce rate

Easy Table of Contents

Method 2: Gutenberg Block (No Plugin)

Using Rank Math / Yoast Block

  1. Edit page/post

  2. Click + Add Block

  3. Search Table of Contents

  4. Insert block

  5. Auto-fetches headings

  • Lightweight
  • No extra plugin needed (if Rank Math/Yoast is installed)

Method 3: Manual TOC (HTML Anchors – No Plugin)

Step 1: Add IDs to Headings

<h2 id="seo">SEO Services</h2>
<h2 id="ads">Google Ads</h2>

Step 2: Create TOC Links

<ul>
<li><a href="#seo">SEO Services</a></li>
<li><a href="#ads">Google Ads</a></li>
</ul>
  • Full control
  • Time-consuming
  • Best for landing pages

 

Method 4: CSS Sticky TOC (Advanced UX)

Make TOC Sticky

.toc {
position: sticky;
top: 100px;
}
  • Better navigation
  • Used in blogs & documentation sites

Method 5: JavaScript Auto TOC (No Plugin)

JS Script Example

<script>
document.addEventListener("DOMContentLoaded", function () {
let toc = document.getElementById("toc");
let headings = document.querySelectorAll("h2, h3");headings.forEach((heading, index) => {
let id = “heading-“ + index;
heading.id = id;
let li = document.createElement(“li”);
li.innerHTML = `<a href=”#${id}“>${heading.innerText}</a>`;
toc.appendChild(li);
});
});
</script>
  • Dynamic TOC
  • Needs developer knowledge

Method 6: TOC in Elementor

  1. Edit page with Elementor

  2. Drag Table of Contents Widget

  3. Choose:

    • Headings

    • Style

    • Position

  • Best for Elementor users
  • Visual control

Method 7: TOC in Classic Editor

  1. Switch to Text view

  2. Use manual anchor links (Method 3)

Method 8: TOC Using Shortcode

Many plugins provide shortcodes:

[ez-toc]
[lwptoc]
  • Place TOC anywhere
  • Useful for long-form pages

Method 9: TOC via Theme Feature

Some themes (Astra, GeneratePress Pro) have built-in TOC

  •  No plugin
  • Limited customization

Best Method Based on Use Case

Use Case Best Method
SEO Blogs Easy TOC Plugin
Lightweight Site Rank Math Block
Landing Page Manual HTML
Elementor Site Elementor Widget
Custom Website JS + CSS
Facebook
Twitter
LinkedIn
Pinterest

Interested in website maintenance for your company.?We can help. 

READ MORE
RECENT FAQs
FOLLOW US ON
X-twitter Facebook-f Pinterest-p Linkedin-in