Up next in 10
How To Add A Table of Contents in WordPress _ (Manual _ Automatic)
8K views
Jan 28, 2024
The video titled "How To Add A Table of Contents in WordPress (Manual & Automatic)" provides a comprehensive guide on incorporating a table of contents into a WordPress website. The tutorial covers both manual and automatic methods, ensuring viewers have options based on their preferences and needs. Whether you prefer a hands-on approach or an automated solution, the video walks you through the step-by-step process, making it accessible for users of varying technical skill levels. By the end of the tutorial, viewers should have a clear understanding of how to enhance their WordPress site's user experience by implementing an effective table of contents.
View Video Transcript
0:00
Hello everyone, welcome to Key to Blogging and in this video I will show you how you can
0:03
add table of content to your WordPress website. And here as you can see, I have added a table of content in my WordPress website
0:11
So let's check how you can add this table of content in WordPress
0:15
So for this you can use different methods, either you can use the manual methods or you can
0:20
use the plugin method. So let me just open the blog post and here let me open a blog post
0:28
And let's check how you can add to the blog post. table of content in this blog post
0:32
So let me just add different headings in this blog post. So here I will add a heading
0:40
And let's another heading. So let's check how you can manually add the table of content
0:50
To add it manually, you have to set an anchor attribute to each of the headings
0:55
So here click on the heading and click on setting. Now click on Advance and let's set a HTML anchor of 1
1:04
Now scroll down and let's click on Heading 2 and click on Advance and here in the HTML
1:10
anchor set it to 2. And here in the Heading 3, let's click on Advance and set it anchor to 3
1:19
So let's add the table of content. So you can simply write Table of Content
1:26
Now you can make it bold. Now click Enter. Now let's click on list
1:37
And here let's copy this first heading and add it to your list
1:43
Now then copy this second heading and add it to your list like this
1:53
So let me just copy the third heading from here. Let's add it
1:59
Now click on the first heading and click on the link. Now you have to add the link
2:05
So here you have to add the link like has 1 and click on enter
2:12
Now in the heading 2 add the link like has 2 and click enter and let add the third heading link has 3 so you have to set the anchor so you can set anchor like heading to heading 3
2:30
and here you can set the link like as heading 2 has heading 3 so let's update this
2:38
and let's open the blog post Okay, the table of content is added
2:48
So let's click on heading to and here as you can see the table of content is working
2:53
So in this way you can add a manual table of content to your WordPress website
2:57
So let's check how you can dynamically insert the table of content to each of the blog post
3:03
So for this go to the WordPress dashboard and here in the plugin section click on Add New
3:12
And here in the search bar, search for Table of Content. And you can install the Easy Table of Content
3:23
Now click on Activate. Now you have added the Table of Content plugin, click on Settings
3:31
And here you can set the pages. So here I will select to Post and Pages
3:37
And here you can auto insert to Post. So it will automatically add the table of content to each of the blog post
3:45
Now scroll down and here select the heading. So here I will select two headings
3:52
So when there is two headings, the table of content will show. So you can set it to four headings or five headings so that it will automatically detect
4:00
the number of headings and if the number of heading is more than four then the table of content
4:06
will display. And here you can set a title like table of content or content
4:11
content table. So let's scroll down and here you can set the styling option
4:19
I will leave it to gray. So let's save this. Now go to the blog post and click on refresh
4:29
So as you can see the table of content is not showing because we have three headings So let change it to two headings for now and let scroll down and let click on save changes
4:44
Now let's replace this page and here as you can see the table of content is added
4:50
So in this way you can dynamically insert the table of content to each of the blog post
4:56
So let's check how you can add table of content using the page builder
5:01
So if you are using Elementor or any Gutenberg Page Builder, then you can easily insert
5:06
Table of Content. So here I am preferred to use the Gutenberg Page Builder
5:12
So let me just click on plugins. So here I am using the Cadence Blog Builder
5:18
So it is just like the Elementor. So you can easily use this block builder to customize your blog post in the Gutenberg Editor
5:27
So let's open the blog post. And here, let me just open the sample post form
5:36
So let's delete this table of content from here. And let's remove this table of content
5:46
So to add the table of content, just click on Slash and here you will see the different options
5:52
So I will type Table of Content. So click on this and as you can see, it will automatically generate the Table of Contents
5:59
of content. So here you can set headings like H2 or H3 tag
6:05
So let me just close the H2 and here as you can see the table of content is gone
6:10
So let me just select H2 and I will deselect this. Now in the title setting you can enable or disable the title and here you can increase the
6:21
font size, line height or line spacing. So I will leave this as default and let's click on collapsible setting and let me just open
6:29
the enable collapse content. So it will click a button like this so user can easily close the table of content
6:38
And you can also click on the start collapse so that it will automatically show to the
6:43
user like this. So I don use this table of content in collapse mode and here you can set an icon So let me just close this and let select the icon So let me just use this icon and here as you can see the icon is changed So in this way you can change the table of content
7:03
icon. So let's click on list setting and here in the link list tile I will select to no underline
7:11
And here you can change the link color. So let me just select to different color and as you can
7:18
see the link color is changed. I will leave this to black and here you can change the font
7:26
size. Now scroll down and here you can set the font family. Now let's click on container
7:34
setting and here you can set a content background. So here I will set a background like this
7:40
and here I will add a border. So to add the border you have to add the border you have to
7:48
the content border width so here I will set it to 2 and here you can set a border radius
7:54
so let me just set it to 15 and you can also add a box shadow effect to the table of content
8:03
now click on scroll setting and click on enable smooth scroll to ID now click on update
8:11
now let's refresh this page so you have increased the text size
8:18
So to fix this, go to the link setting and here in the font size, let me just reduce it
8:27
And let's update this. Let's refresh this again. And here as you can see, we have added the table of content
8:35
So in this way you can change the look of your table of content, change the text size, add
8:41
a border radius and you can change the table of content icon
8:46
I hope you have understand how to add table of content in WordPress
8:50
You can either use a plugin like easy table of content or you can manually add the table of content
8:56
And if you are using any page builder, then you can use that page builder to generate the table
9:01
of content. And if this video is helpful to you, then hit the like button and subscribe to my channel for
9:07
more upcoming videos like this. I will see you in the next video
9:12
Thank you
#How-To
# DIY & Expert Content