How to Add a Table of Contents in WordPress. A Table of Contents boosts your WordPress post’s readability and SEO. Learn how to easily add one using plugins or manual methods to improve user experience and navigation.

How to Add a Table of Contents in WordPress

Adding a Table of Contents (ToC) to your WordPress posts or pages is a smart way to enhance user experience, increase on-page SEO, and keep readers engaged. Here’s how you can do it.

Why Use a Table of Contents?

A Table of Contents offers several benefits:

• Improves readability for long posts
• Helps with SEO through anchor links
• Increases time on page
• Provides quick navigation for readers

Method 1: Use a Table of Contents Plugin

Recommended Plugins:

1. Easy Table of Contents
2. LuckyWP Table of Contents
3. Table of Contents Plus

How to Use Easy Table of Contents:

• Install from Plugins > Add New
• Search “Easy Table of Contents”
• Install and activate
• Go to Settings > Table of Contents to customize appearance
• Automatically inserts ToC based on heading tags (H1–H6)

Method 2: How to Add a Manual Table of Contents

For advanced users or those who prefer no plugins:

1. Use anchor links: <a href="#section1">Jump to Section 1</a> ... <h2 id="section1">Section 1</h2>
2. Create a list of links at the top of your post
3. Match each heading with an id attribute

Best Practices for a Table of Contents

• Place it near the top of the post
• Use consistent heading levels (H2, H3)
• Keep it minimalistic
• Avoid overwhelming readers with too many items

Table of Contents for SEO

Google often displays jump links in search results if your page uses ToC with anchor links, which can improve CTR and visibility.

Here’s a simple and clean CSS style for a Table of Contents (ToC) box you can use in your WordPress theme or post. You can place it in your Custom CSS (Appearance > Customize > Additional CSS) or include it in your theme’s stylesheet.

🎨 CSS for a Stylish Table of Contents Box

/* Table of Contents container */
.toc-container {
  background: #f9f9f9;
  border: 1px solid #ddd;
  padding: 16px;
  margin-bottom: 24px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Title */
.toc-container h2 {
  font-size: 1.2rem;
  margin-bottom: 12px;
  color: #333;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 6px;
}

/* List items */
.toc-container ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

.toc-container ul li {
  margin: 8px 0;
}

.toc-container ul li a {
  text-decoration: none;
  color: #0073aa;
  transition: color 0.3s ease;
}

.toc-container ul li a:hover {
  color: #005177;
  text-decoration: underline;
}

/* Optional nested list styling */
.toc-container ul ul {
  margin-left: 16px;
  border-left: 2px solid #ddd;
  padding-left: 12px;
}

🛠 Example HTML Structure

<div class="toc-container">
  <h2>Table of Contents</h2>
  <ul>
    <li><a href="#introduction">Introduction</a></li>
    <li><a href="#method1">Method 1: Using a Plugin</a></li>
    <li><a href="#method2">Method 2: Manual HTML</a></li>
    <li><a href="#seo-benefits">SEO Benefits</a></li>
    <li><a href="#conclusion">Conclusion</a></li>
  </ul>
</div>

This style works great whether you’re adding a ToC manually or customizing a plugin output (like Easy Table of Contents).

📩 Do you have questions or suggestions? Leave a comment or contact us!
🏷️ Tags: WordPress, Table of Contents, WordPress plugins, SEO tips, readability, blog structure, Easy ToC, LuckyWP ToC, navigation, user experience