A Simple Plugin-Free Way to Implement a Table of Contents

Anyone who has visited Baidu Baike has probably noticed that almost every article has a table of contents at the beginning. Clicking a heading in that table of contents takes you quickly to the corresponding section in the article, as in Marketiva. This makes it easier for readers to find the content they want in longer articles, much like an index in a dictionary. The code introduced in this article implements exactly that kind of feature: it adds clear content navigation to a post, lets readers understand the general structure before reading, and lets them jump directly to the section they want. It can also add some internal links, anchor text, and keywords, which is helpful for SEO. You can see the actual effect in the article table of contents on the right side of this post.

In fact, implementing this feature is fairly simple: insert heading tags into the post content, then generate a table of contents from them. Below is a short piece of code I wrote. Open the functions.php file under your current theme directory with a text editor, and place the following code below <?php (remember to save it in UTF-8 encoding, otherwise Chinese text will appear garbled):

function article_index($content) {
    /**
     * 名称：文章目录插件
     * 作者：露兜
     * 博客：http://www.ludou.org/
     * 最后修改：2011年2月10日
     */
    $matches = array();
    $ul_li = '';
    $r = "/<h3>([^<]+)</h3>/im";

    if (preg_match_all($r, $content, $matches)) {
        foreach ($matches[1] as $num => $title) {
            $content = str_replace(
                $matches[0][$num],
                '<h4 id="title-' . $num . '">' . $title . '</h4>',
                $content
            );
            $ul_li .= '<li><a href="#title-' . $num . '" title="' . $title . '">' . $title . "</a></li>n";
        }

        $content = "n<div id="article-index">n<strong>文章目录</strong>n<ul id="index-ul">n" . $ul_li . "</ul>n</div>n" . $content;
    }

    return $content;
}

add_filter('the_content', 'article_index');

Instructions

When editing a post, switch to HTML mode and wrap the headings you want to add to the table of contents with <h3> and </h3>, for example: <h3>I am an index heading</h3>. Of course, you can also use other tags, such as <h1> or <p>; just change the h3 in the code above to the tag name you want to use.

The code above only inserts a table of contents when the post is displayed; it does not modify your post content. It also does not include any styling code, so if you only add the code above, the table of contents may look rather messy. You will still need to add some CSS yourself to style it. If you do not know CSS, you can use the version I wrote below. Place the following CSS code in the style.css file under your theme directory (it may not suit every website):

#article-index {
    -moz-border-radius: 6px 6px 6px 6px;
    border: 1px solid #DEDFE1;
    float: right;
    margin: 0 0 15px 15px;
    padding: 0 6px;
    width: 200px;
    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;
}