How to Create a Table of Contents in WordPress – Plugin + Manual

Estimated reading time: 4 minutes

Last updated on March 26th, 2024 at 07:01 am

Do you want to know “How to create a Table of Contents in WordPress”?

Imagine your website is like a book, and you want readers to easily find specific chapters.

Well, that’s where a Table of Contents (TOC) comes in handy. It’s like a roadmap for your content.

Ever felt lost in a big book with no chapters listed?

Similarly, without a TOC, your readers might struggle to navigate through your content.

Research shows that websites with a clear TOC can increase user engagement by up to 47%.

2 Methods to Create a Table of Contents in WordPress

1. Plugin

To create and implement a table of contents easily, I use the Lucky WP Table of Contents plugin.

First of all, you need to login to your dashboard – click on plugins – add new – search table of contents – Lucky WP Table of Contents – Install – Activate.

luckywp-toc-install

Now on the left side, hover over to settings – you will find a new icon – table of contents – click on it.

LuckyWP-TOC-

Now we will explain to you every single setting step by step,

  • General
  • Appearance
  • Auto insert
  • Processing headings’
  • Misc.

General Settings

LuckyWP-General-Settings

Minimal count of headings: “2”

If the count of headings in the post is less, then the table of contents is not displayed.

Means – If your article contains less than 2 headings then a Table of content is not created.

Depth: 6

Hierarchical view: Enable

Numeration: Decimal numbers (nested)

Numeration suffix: None

Also Read  How to Add Default Alt Text in WordPress Gravatar?

Title: Table of contents

LuckyWP-General-Settings

Toggle show/hide: Enable

Label show: Show

Label hide: Hide

Smooth scroll: Enable

Scroll offset top: 24

Appearance Settings

LuckyWP-appearance-settings

Width: Auto

Float: None

Title font size: Default

Title font weight: Bold

Items font-size: Default

Colour scheme: Light colours

LuckyWP-appearance-settings

Background colour: Your choice

Border colour: Your choice

Title colour: Your choice

Link colour: Your choice

Hover link colour: Your choice

Visited link colour: Your choice

Auto-insert Settings

LuckyWP-auto-insert

Auto insert Table of contents: Enable

Position: Before first heading

Post types: Post

Processing Headings

LuckyWP-processing-Headings

Always for post types: Post

Misc Settings

LuckyWP-Misc

By level: Leave blank for proper heading hierarchy

By text: leave

Hash format: As heading(#Example_Heading_Text)

Convert to lowercase: uncheck

Replace underscores_ with dashes- : uncheck

LuckyWP-Misc

SEO: Default

Show panel “Table of contents” in post types: Post

List markup tags: DIV

Additional classes: Leave blank if you are not a developer

After done with all the above settings, now visit one of your posts.

You can get your Table of Contents ready!

2. Manual (Not Recommended to Beginners)

If you know how to code then you can freely use this code. Or you can also use this code after creating a backup.

Here’s an example code snippet that you can add to your theme’s functions.php file:

// Custom shortcode for Table of Contents
function custom_table_of_contents($atts) {
// Set default attributes
$atts = shortcode_atts(
array(
‘title’ => ‘Table of Contents’,
‘depth’ => 3,
),
$atts,
‘table_of_contents’
);

// Get the content
$content = get_the_content();

// Extract headings from the content
preg_match_all(‘/<h([1-‘ . $atts[‘depth’] . ‘])>(.*?)<\/h\1>/’, $content, $matches);

if (empty($matches[0])) {
return ”; // No headings found
}

Also Read  WordPress Favicon - Meaning, Definition, Size, How to Add and Change

// Build the table of contents
$output = ‘<div class=”table-of-contents”>’;
$output .= ‘<h2>’ . esc_html($atts[‘title’]) . ‘</h2>’;
$output .= ‘<ul>’;

foreach ($matches[2] as $index => $heading) {
$id = sanitize_title($heading);
$output .= ‘<li><a href=”#’ . esc_attr($id) . ‘”>’ . esc_html($heading) . ‘</a></li>’;
}

$output .= ‘</ul>’;
$output .= ‘</div>’;

return $output;
}

// Register the shortcode
add_shortcode(‘table_of_contents’, ‘custom_table_of_contents’);

To use this shortcode in your posts or pages, you can simply add the following shortcode wherever you want the table of contents to appear:

[table_of_contents title=”Table of Contents” depth=3]

You can customize the title and depth attributes as needed.

The depth attribute determines the maximum heading level to include in the table of contents.

The code will automatically generate links to each heading in your post.

Wrapping Up – How to Create a Table of Contents in WordPress

Adding a table of contents to your WordPress articles is like creating a roadmap for your readers.

It helps them find what they’re looking for quickly and makes your content easier to understand.

Whether you use the built-in options or plugins made for this job, it’s a simple way to organize your information and make your website more user-friendly.

Think of it as a helpful guide that makes it easy for your visitors to navigate through your content, making their experience better and keeping them engaged.