Skip to content
How to Create a Table of Content in WordPress Post

How to Create a Table of Content in WordPress Post

A table of contents is a necessary part of WordPress posts, especially long posts with many headings. Creating a table of contents helps readers follow and grasp the idea easily and quickly. Besides, it also helps you add more keywords in posts, which is very good for SEO.

Methods to Create a Table of Contents

There are 2 methods to create a table of contents in a WordPress post.

The first method is using a plugin. That is simple, fast and free for both code experts and newbies in WordPress.

The second one is using code. That lets you customize your table of contents, even the smallest details, but it is quite complicated for non-coder. We will write down the code to create a table of contents in this post. Just copy and paste it!

Let’s walk through the process of creating a table of contents with a plugin first:

Method 1: Use a Plugin to Create Table of Contents

Step 1: Create and Set up Contents for the Table of Contents

There are many free plugins for creating a table of contents in WordPress. We choose LuckyWP Table of Contents because it provides us a highly customizable and beautiful result. However, this plugin has quite a lot of settings, which might confuse you at first. So, follow our instructions to save your time.

LuckyWP Table of Contents is a free plugin and available on wordpress.org. You just install and activate the plugin on Dashboard.

LuckyWP Table of Contents is free plugin for creating tables of contents in WordPress.

Then, go to Settings > Table of Contents, you will see the settings screen.

Here, there are 4 tabs you need to pay attention to: General, Appearance, Auto Insert, Processing headings. They are tabs used to set up and customize the display of the table of contents. Misc. is a tab having complex and unimportant settings, so you can ignore it.

There are some sections you must pay attention to on setting table of contents.

In this step, you just work on the General tab.

There are plenty of settings in this section. To save time, you should focus on the below important parts:

  • Numeration: To number the headings. You should choose one from these options: Without numeration, Decimal numbers (nested), Roman numbers (nested).

I choose Decimal numbers (nested), so my TOC looks like this:

You can choose style of numbers in front of headings.

  • Title: Title of the table of contents. It is Contents in default.

You also can give your table of contents a name.

Let’s leave the rest of settings as default, because that does not affect your TOC much.

Click Save Changes to finish. So, we have done general settings of the TOC. Let’s move on to the next step.

Step 2: Insert the Table of Contents in the Post

There are 2 methods to insert a table of contents in your post: automatically and manually inserting.

Automatically inserting means a table of contents is added in all posts automatically. This way saves a lot of time and effort, but it doesn’t work if you want to insert a TOC into just some posts.

Manually inserting means if you want to have an TOC in a post, you need to insert it in that post yourself. This may take more time and could make mistakes.

We will introduce both methods in detail. You can choose the option that suits you.

Automatically Inserting

Go to tab Auto Insert > Enable. The plugin chooses Post as default. If you don’t want it, you can change to another post type.

In the Position section, choose where you want to insert the table of contents. Don’t forget to click Save Changes!

Set post type and position of the index.

So, all posts in the chosen post type have the tables of contents.

Manually Inserting

Manually inserting sounds complicated, but actually it is very simple. Go to the Processing Headings tab. There, choose post type as well, then click Save Changes.

In manually, you also must choose post type.

Then, go to the post editor of a post in the post type you chose, click Enable TOC.

Click Enable TOC in post editor of what post you want to insert the char.

Now, your TOC is basically done. In addition, we even can style its color, font, size of items,… to make it prettier. Follow the next step.

Step 3: Customize the Table of Contents Display

There are also 2 methods to customize the table of contents display: customize it in all posts at once and individually customize it in each post.

Customize the Table of contents in All Posts

You can customize all tables of contents in detail by going on the Appearance tab. There are many settings such as Title Font Size, Items Font Size, Link Color,…

It is unnecessary to notice all the settings, just focus on what you want.

For example, I don’t like blue and the current title font size. I want to change the color to dark grey and smaller size so that they look better with the post. So, I will customize Title Font Size, Items Font Size, Link Color and keep the rest settings like the below image:

We can customize many settings of the table of contents.

You can setting color of text or background.

My TOC after customizing looks like this:

Example of my table of contents.

Now, it looks much more harmonious.

However, maybe you want to have different tables of contents in different posts, just scroll down to read how to customize it in each post.

Customize the Table of Contents in Each Post

This work also is simple and quick. First, go to the post editor, choose Table of Contents > Customize.

You can customize table of each post in the post editor.

A Customize Table of Contents Popup appears. You will see some familiar tabs as above. They are General, Appearance and Misc..

Go to the Appearance tab and change some settings likewise editing on Dashboard of the plugin. Click Save to finish!

There are familiar settings to customize the index.

Now, let’s see the final result of customizing the table of contents.

My table of contents after customizing.

Both customizing methods bring very pretty and detailed tables of contents. So you are free to choose the way you like.

Now, let’s go and see how to use code for creating a table of contents.

Method 2: Use Code to Create a Table of Contents.

Step 1: Create the Table of Contents for Post

Go to Appearance > Theme > Editor > functions.php.

Then, add the following code into file functions.php to insert tables of contents into posts.

Note: This code is to add only 2 heading levels into the table of contents.

function create_toc($html) {
    $toc = '';
    if (is_single()) {
        if (!$html) return $html;
        $dom = new DOMDocument();
        libxml_use_internal_errors(true);
        $dom->loadHTML(mb_convert_encoding($html, 'HTML-ENTITIES', 'UTF-8'));
        libxml_clear_errors();
        $toc = '<div class="toc-bound">
            <div class="toc-ctr">
                table of contents
            </div>
            <ul class="toc">';
        $h2_status = 0;
        $h3_status = 0;
        $i = 1;
        foreach($dom->getElementsByTagName('*') as $element) {
            if($element->tagName == 'h2') {
                if($h3_status){
                    $toc .= '</ul>';
                    $h3_status = 0;
                    }
                 if($h2_status){
                    $toc .= '</li>';
                    $h2_status = 0;
                  }
                  $h2_status = 1;
                  $toc .= '<li><a href="' . get_the_permalink() . '#toc-' . $i . '">' . $element->textContent . '</a>';
                  $element->setAttribute('id', 'toc-' . $i);
                  $i++;
            }elseif($element->tagName == 'h3') {
                if(!$h3_status){
                    $toc .= '<ul class="toc-sub">';
                    $h3_status = 1;
                }
                $toc .= '<li><a href="' . get_the_permalink() . '#toc-' . $i . '">' . $element->textContent . '</a></li>';
                $element->setAttribute('id', 'toc-' . $i);
                $i++;
            }
        }
        if($h3_status){
            $toc .= '</ul>';
        }
        if($h2_status){
            $toc .= '</li>';
        }
        $toc .= '</ul></div>';
        $html = $dom->saveHTML();
    }
    return $toc . $html;
}
add_filter('the_content', 'create_toc');

Explanation:

Code Explanation
Function $toc = ‘<div class=”toc-bound”>
<div class=”toc-ctr”>
table of contents
</div>
<ul class=”toc”>
To add a title to the table of contents and display it on top of this. You can replace the text “table of contents” with anything you want to be in the title.
Variable h2, h3 The levels of headings are inserted in the table of contents. If you want to replace h2, h3 with other tags, change the whole parameters like h2, h3 into tags you want in code.
Function  $toc .= ‘<li><a href=”‘ . get_the_permalink() . ‘#toc-‘ . $i . ‘”>’ . $element->textContent . ‘</a>’;  To create jumps links to the corresponding sections in the post as soon as you click it.
Function  if($h3_status){
$toc .= ‘</ul>’;
}
if($h2_status){
$toc .= ‘</li>’;
}
$toc .= ‘</ul></div>’;
$html = $dom->saveHTML();
}
return $toc . $html;
To add bullet points in front of each heading in the table of contents.

Don’t forget to click the Update file after inserting the code.

Insert code in function.php file to create a table of contents.

Then, here is the result:

Using code to create a table of contents is so easy and here is my result.

Of course, we need to style it a bit. We will use CSS – a favorite tool of all coders.

Step 2: Use CSS to Customize

To customize by CSS, go to file style.css in Theme Editor. There, you need to insert the code that you write by yourself to customize the TOC as you like.

For example, I want to customize the color and intensity of the table of contents, so I will insert the following code:

.toc-bound {
    background-color: #619162;
    color: #fff;
}
.toc-ctr {
    border-bottom: 1px solid #fff;
    padding: 10px;
    font-size: 20px;
    text-transform: uppercase;
}
ul.toc {
    list-style-type: none;
    padding: 10px;
    padding-left: 25px;
}
.toc li a {
    color: #fff;
}
ul.toc > li {
    font-size: 18px;
    font-weight: 700;
    padding: 5px 0;
}
ul.toc-sub {
    list-style-type: none;
}
ul.toc-sub li a {
    font-weight: 200;
}

Don’t forget to click the Update file to save it.

You can style the index with CSS as well.

The final result looks like this:

My chart is more attractive after customizing.

In conclusion, both using a plugin and coding give us the same pretty tables of contents. You can choose any option as long as you are satisfied.

Last Words

As you can see, creating a table of contents in WordPress posts is not complex at all. Follow our tutorial and you will have beautiful tables of contents. A good table of contents makes your post clearer and more professional. Thus, your viewers may have friendlier experiences when reading your blog.

If you have any questions, please give them in the below comment box.

Leave a Reply

Scroll To Top