Two Ways to Add and Display a Content Table of Contents in WordPress

How to add a table of contents to WordPress articles? There are two methods: Method one, integrate code into the theme. Method two, use a plugin, install and activate it. NaibaWebsite Building Notesshares with everyoneAdd article directory via plugin和Method to add article directory via code。

Recommended WP Table of Contents Plugins

When adding directories to website article content, Naiba tested many directory plugins and ultimately found the following two to be excellent. Both of these table of contents plugins are very useful; you can test them both.

LuckyWP Table of Contents

This is the table of contents plugin currently used by Naibabiji. You can directly see its effect by referring to the table of contents in this article.LuckyWP Table of Contents comes with rich configuration features, allowing customization of display styles, positions, etc. One reason for choosing it is that its default appearance better matches this site's theme; another reason is that its table of contents links default to using pinyin. It feels more comfortable to look at?Download Link

Easy Table of Contents

Easy Table of Contents is also a very useful WordPress article table of contents plugin. It has slightly fewer configuration features compared to the aforementioned LuckyWP Table of Contents, but it is also widely used.Download Link UpdateIf you want a floating article table of contents plugin, you can considerFixed TOC

Table of Contents Plus

The first plugin, LuckyWP Table of Contents, hasn't been updated for a long time and has compatibility issues. Now using this one.Download Link

Method to implement article directory via code

If you don't want to use a plugin, you can also directly use code to implement the function of displaying a table of contents in articles. It's all automated and requires no additional operations.The image above shows the effect of the code-based article table of contents previously used by Naibabiji.The implementation method is as follows：

//文章目录
function article_index($content) {
$matches = array();
$ul_li = '';
$r = '/<h([2-6]).*?\>(.*?)<\/h[2-6]>/is';
if(is_single() && preg_match_all($r, $content, $matches)) {
foreach($matches[1] as $key => $value) {
$title = trim(strip_tags($matches[2][$key]));
$content = str_replace($matches[0][$key], '<h' . $value . ' id="title-' . $key . '">'.$title.'</h2>', $content);
$ul_li .= '<li><a href="#title-'.$key.'" title="'.$title.'">'.$title."</a></li>\n";
}
$content = "\n<div id=\"article-index\">
<strong>文章目录</strong>
<ul id=\"index-ul\">\n" . $ul_li . "</ul>
</div>\n" . $content;
}
return $content;
}
add_filter( 'the_content', 'article_index' );


@media screen and (max-width:600px) {
	#article-index {
    width: 100% !important;
}
}

Copy the code above and insert it into the theme's functions file. If you don't know how, it's recommended to use the following plugin to help you.

• Safe Method to Add Code to the functions.php File: Code Snippets

	/* 文章目录 */
#article-index {
-moz-border-radius: 6px 6px 6px 6px;
border: 1px solid #DEDFE1;
float: right;
margin: 0 0 15px 15px;
padding: 0 6px;
width: 300px;
line-height: 23px;
}
#article-index strong {
border-bottom: 1px dashed #DDDDDD;
display: block;
line-height: 30px;
padding: 0 4px;
}
#index-ul {
margin: 0;
padding-bottom: 10px;
}
#index-ul li {
background: none repeat scroll 0 0 transparent;
list-style-type: disc;
padding: 0;
margin-left: 20px;
}
#index-ul a {
	color: #4c4c4c;
}
#index-ul a:hover {
	color: #009cee;
}

Insert the CSS code above into the website theme's stylesheet. If you don't know how to insert it, you can also use the method below.

• Plugins for inserting code into website header and footer

How to make articles display a directory?

After adding the plugin or code above to your website, you find the article still doesn't display a table of contents? Then it's likely because you didn't set heading styles when publishing the article.Please note, do not use first-level headings (H1) within the article content, as it's not good for SEO. Setting H2 and H3 is generally sufficient; the table of contents will automatically display hierarchical levels based on different heading levels.