Two ways to add and display a table of contents for article content in WordPress

How to add a table of contents to WordPress posts? There are two methods: Method one, integrate code into the Theme. Method two, use a Plugin, install and activate it. NaibaWebsite Building Notesshares with everyoneAdding a Table of Contents with a Plugin和Method to Add a Table of Contents with Code。

Recommended WordPress Table of Contents Plugins

When adding a table of contents to website posts, Naiba tested many table of contents plugins and ultimately found the following two to be excellent. Both of the following 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 refer to the table of contents effect 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 use Pinyin by default. It feels more comfortable to look at?Download Link

Easy Table of Contents

Easy Table of Contents is also a very useful WP table of contents Plugin. It has slightly fewer configuration features compared to the LuckyWP Table of Contents mentioned above, but it is also used by many people.Download Link Update: If you want a floating table of contents Plugin, you can considerFixed TOC

Table of Contents Plus

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

Method to Implement Table of Contents with Code

If you don't want to use a Plugin, you can also directly use code to implement the table of contents feature for Posts. It's all automatic and requires no additional operations.The image above shows the effect of the code-based table of contents previously used on Naibabiji.The implementation method is as follows：

//文章目录
function article_index($content) {
$matches = array();
$ul_li = '';
$r = '/(.*?)<\/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], ''.$title.'', $content);
$ul_li .= '
'.$title."
\n";
}
$content = "\n

文章目录
\n" . $ul_li . "
\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 your Theme's functions.php file. If you don't know how, it's recommended to use the Plugin below 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 your website Theme's stylesheet. If you don't know how to insert it, you can also use the method below.

• Plugin for inserting code into website header and footer

How to Display a Table of Contents for Posts?

After you add the Plugin or code above to your website, you find that your Posts still don't show a table of contents? Then it's likely because you didn't apply heading styles to your titles when writing the Post.Please note, do not use H1 (first-level headings) within your Post content, as it's not good for SEO. Setting H2 and H3 is usually sufficient. The table of contents will automatically display hierarchical levels based on different heading ranks.