How to Create a Table of Content in WordPress Post
Last Updated: June 21, 2021 in Guides
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.
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.
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:
- Title: Title of the table of contents. It is Contents in default.
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!
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.
Then, go to the post editor of a post in the post type you chose, click Enable TOC.
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:
My TOC after customizing looks like this:
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.
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!
Now, let’s see the final result of customizing the table of contents.
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.
Then, here is the 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.
The final result looks like this:
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.