Adding a Table of Contents (TOC) to articles on WordPress sites can significantly improve user interaction with content and optimize the site for search engines. A TOC not only makes navigation easier but also promotes deeper engagement with the material, which is especially important for long, information-dense texts.
- Why add a Table of Contents in WordPress?
- Improved user experience
- Impact on SEO
- How to add a TOC via theme code
- Step 1: Edit theme files
- Step 2: Add PHP code
- Step 3: Style the TOC with CSS
- Top 5 plugins for adding a TOC in WordPress
- 1. Easy Table of Contents
- 2. Table of Contents Plus
- 3. SimpleTOC – Table of Contents Block
- 4. LuckyWP Table of Contents
- 5. Ultimate Blocks
Why add a Table of Contents in WordPress?
Improved user experience
A TOC in WordPress articles simplifies navigation through the text, allowing readers to quickly find and jump to the sections that interest them. This is especially valuable for long articles where, without a TOC, a user can easily get lost in the large volume of information. This functionality not only enhances the site’s usability but also reinforces the impression of quality and well-structured content. Moreover, a TOC allows readers to assess the structure of the article before reading it, which can increase their interest and willingness to explore the material in more detail.
Impact on SEO
From an SEO perspective, a TOC can significantly increase a site’s visibility in search engines. First, it helps reduce bounce rate, as users who find the information they need tend to spend more time on the site. Second, search engines like Google actively use structured data to create “jump” links directly in SERPs (search engine results pages), making the site’s snippets more attractive and clickable.
In addition, having a TOC can help search algorithms better understand the structure and hierarchy of content on the page, which improves indexing and raises the page’s overall rank. Structured and easily accessible content simplifies the work of search engines, directly influencing the site’s SEO.
How to add a TOC via theme code
Adding a TOC in WordPress through theme code is a more advanced method that allows you to integrate TOC functionality directly into your theme files. This method requires basic knowledge of HTML, PHP, and CSS. Below are the steps to help you add a TOC in WordPress via theme code:
Step 1: Edit theme files
- Determine the TOC location: The TOC is usually added at the beginning of the article, so you can edit the
single.phporpage.phpfile, depending on where you want the TOC to appear. - Create a backup of your theme file: This is an important step before making any changes to the code.
Step 2: Add PHP code
Extract headings from content: Use PHP to extract headings from the content. Example code for extracting headings:
function extract_headings($content) {
preg_match_all('/<h[1-6].*?>(.*?)<\/h[1-6]>/s', $content, $matches);
return $matches[1];
}Add a function to insert the TOC:
function insert_toc($content) {
$headings = extract_headings($content);
if (!empty($headings)) {
$toc = "<div id='toc'><h2>Contents</h2><ul>";
foreach ($headings as $heading) {
$sanitized_heading = sanitize_title($heading);
$toc .= "<li><a href='#$sanitized_heading'>$heading</a></li>";
$content = str_replace($heading, "<span id='$sanitized_heading'>$heading</span>", $content);
}
$toc .= "</ul></div>";
$content = $toc . $content;
}
return $content;
}
add_filter('the_content', 'insert_toc');This code adds an anchor to each heading and generates a TOC list that is inserted before the article content.
Step 3: Style the TOC with CSS
After making changes, test your site for errors and verify that the TOC displays and functions correctly. Make sure all TOC links scroll to the corresponding sections of the article.
Add CSS styles to your theme’s style.css file to style the TOC:
#toc {
margin: 20px 0;
padding: 10px;
background-color: #f9f9f9;
border: 1px solid #ccc;
}
#toc h2 {
margin-top: 0;
}
#toc ul {
list-style: none;
padding: 0;
}
#toc li a {
color: #333;
text-decoration: none;
}After making changes, test your site for errors and verify that the TOC displays and functions correctly. Make sure all TOC links scroll to the corresponding sections of the article.
Adding a TOC via theme code gives you full control over its appearance and behavior, but it requires care and accuracy when editing code. If you’re not confident in your programming skills, consider using plugins to add a TOC.
Top 5 plugins for adding a TOC in WordPress
Here is an overview of the top 5 plugins for adding a TOC in WordPress to help you improve the structure and navigation of your articles, enhancing user interaction with content and optimizing SEO.
1. Easy Table of Contents
Easy Table of Contents automatically adds a TOC to posts, pages, and custom post types on your site. The plugin provides flexible settings for where and how the TOC is displayed, including the ability to exclude specific headings. Users can choose from several themes and customize the TOC’s appearance to their preferences.
- Downloads: 300,000+
- Rating: 4.5 out of 5
- Features: multiple bullet styles, automatic insertion, compatibility with various page builders
- Best for: WordPress beginners
- Price: free
2. Table of Contents Plus
Table of Contents Plus is a powerful plugin that creates a TOC and manages related elements such as sitemaps and copyright notices. The plugin is easy to use and supports a wide range of settings, allowing users to fine-tune the TOC’s appearance and behavior.
- Downloads: 300,000+
- Rating: 4.6 out of 5
- Features: indexing tools for pages, including content indexing for sidebars
- Best for: sites with long pages that require indexing
- Price: free
3. SimpleTOC – Table of Contents Block
SimpleTOC is a Gutenberg block that makes it easy to add a TOC to your posts and pages without using shortcodes. This plugin is ideal for those who prefer simplicity and don’t want to dive into complex settings. SimpleTOC automatically updates the TOC when the document structure changes.
- Downloads: 4,000+
- Rating: 5 out of 5
- Features: editor block widget for sidebars, column block support, compatibility with non-Latin text
- Best for: Gutenberg users
- Price: free
4. LuckyWP Table of Contents
LuckyWP Table of Contents offers numerous settings for creating a responsive and beautifully styled TOC. The plugin supports multi-level TOCs (e.g., H1–H6) and allows users to choose whether sections are collapsible. LuckyWP also includes widgets to add TOCs to sidebars or footers.
- Downloads: 80,000+
- Rating: 4.9 out of 5
- Features: compatibility with multiple page builders beyond Gutenberg, customizable appearance, SEO-friendly
- Best for: Elementor, Beaver Builder, and WPBakery users
- Price: free
5. Ultimate Blocks
Ultimate Blocks is designed specifically for Gutenberg and includes a TOC block along with other useful blocks such as FAQ and social sharing buttons. This plugin is ideal for those looking for a comprehensive solution to enhance their articles with various blocks that improve interactivity and functionality.
- Downloads: 30,000+
- Rating: 4.9 out of 5
- Features: various block types for different functions, including call-to-action and testimonial blocks
- Best for: WordPress experts
- Price: free
Adding a TOC to your WordPress posts provides readers with a clear navigational structure, making it easier for them to dive into your content. This not only increases user engagement by allowing them to jump straight to the sections they’re interested in, but also significantly reduces bounce rate, since visitors tend to stay on the site longer rather than leaving after a quick glance. In addition, a well-organized TOC improves your site’s SEO by logically structuring content, helping search engines better understand and index your pages.
