Up next in 10
How To Add Automatic table of contents in WordPress using Kadence Pro theme
40 views
Jan 27, 2024
In the video titled "How To Add Automatic Table of Contents in WordPress using Kadence Pro Theme," viewers will be walked through the process of incorporating an automatic table of contents into their WordPress website, specifically using the Kadence Pro theme. The tutorial provides step-by-step guidance on leveraging the theme's features to create a dynamic and user-friendly table of contents for articles or pages. Whether you're a WordPress user aiming to enhance navigation on your site or a Kadence Pro theme enthusiast exploring its capabilities, this video offers practical insights into optimizing content presentation with an automatic table of contents. Follow the tutorial to learn how to seamlessly implement this feature and improve the overall user experience on your WordPress website.
View Video Transcript
0:00
Hello everyone, welcome to Kit Blogging and in this video I will show you how you can
0:04
add an automatic table of content to your WordPress website. And here in this tutorial I am using the Cadence hook element to add the automatic table of content
0:14
As you know, there is a table of content feature that we get in the Cadence blog plugin
0:19
So let me just open a blog post from here and let's click on a blog post
0:26
So you can manually add the table of content to each page. each blog post. So here I will click on this plus icon and here I will add the table of content
0:37
So just click on it and it will create the table of content automatically
0:42
But we can automate this process and add the table of content to each and every blog post
0:48
by using the cadence hook element. So I have already made a video on how to use the cadence hook element
0:54
So for this you need to install the Cadence Pro theme. So let's go back and let's click on leave and let's check how you can add the automatic
1:05
table of content in cadence. So for this you have to enable the hook element and here under the cadence section click
1:13
on element. Now here click on add new and here I will choose the default option
1:23
Now here you can add a title like table of content. Now let's click on plus icon and let's click on the table of content section
1:35
Now you can design this table of content. So let me just scroll down and here in the list section you can select the link style
1:44
so I will click on no underline and here you can adjust the font size, font height
1:51
Now in the container setting let me just add a container background like this and let's add
1:58
container border so I will add a one pixel or two pixel content border and let's add a border
2:06
radius now you can add a box shadow effect so let's leave this so you can easily
2:15
edit your table of content now let's place the table of content to each and every
2:21
blog post so for this you have click on this icon and here in the placement section
2:27
you have to select the placement of the table of content. So let's scroll down and here you will see this section before fast heading tag or after
2:37
the fast heading tag or you can select the after first paragraph So let me just select the after first paragraph so that it will show the table of content after every first paragraph in the blog post Now click on the display
2:52
setting and let's click on block post. So here I will click on the single post section
2:59
Now here you can select all blog post or you can add an individual blog post or individual author
3:07
So I will click on all and here you can also exclude this table of content to certain post category
3:15
So let me just click on it and here you can set a exclude rule like you can exclude from
3:22
certain archive pages or certain category pages. So let's skip this. Now click on user setting and here you can visible to all users
3:33
Now in the device setting you can leave this to all. Now let's publish this. Okay
3:41
Now let's go back to the blog post and let's click on blog section
3:47
Now let me just open the fast blog post from here and let's scroll down and here as you
3:52
can see the table of content is added to the first blog post
3:56
Now let's go back and let's open the third blog post. And here as you can see the table of content is added to the first blog post
4:03
added in the third block post. So in this way you can automatically add the table of
4:08
content to your cadence theme. So you don't need to manually add the table of content
4:13
to each and every blog post. And here as you can see the table of content is
4:18
shown after the first paragraph. Now let's go back and let's enable the sidebar in
4:26
this blog post. So for this I will go to the customize section. Okay, let me just open
4:32
the blog post from here. Now let's click on the blog post option and let's click on single post
4:40
layout. Now let me just open the right sidebar option from here. Okay, now the right sidebar
4:49
is added. Let's publish this first. Now let me just go to the cadence element and let me just
4:56
disable this. So I will click on edit. And let's click on switch to draft
5:06
Now let's go back and let's create another table of content. So I will click on default and let's add the title like TOC sidebar
5:22
Now let add the table of content Now let click on more settings and let click on list setting and here I will click on underline
5:35
on hover and let's click on container setting and let's add a container background
5:45
Now add a content border of 1PX and here in the scroll setting I will enable the smooth
5:52
scroll to ID. Now close this and let's add the table of content to sidebar
5:59
So for this I will click on this option and here in the placement section I will choose
6:05
the sidebar. So let's scroll down and here you will see this option content and sidebar
6:13
So here I will select the after sidebar. Now click on display setting and let's click on single block post
6:22
Now let's click on user setting and make it to all users and in the device setting leave it to all
6:32
Now let's publish this. Now let me just open the blog post
6:42
Let's visit the site. Let's go to the blog section and let's open a blog post
6:51
Now scroll down and here as you can see the table of content is added in the sidebar
6:56
But when I scroll down the table of content will go above
7:00
So you have to make this table of content sticky. So when a user scroll down the block post it will stay stick in this position
7:10
So for this I will go to the customizer. Now let's click on back and let's go to the general settings and here click on the sidebar option
7:20
So, you can enable the sticky sidebar using the Cadence Pro theme, so just click on enable it
7:31
Now when you scroll down the right sidebar will stick. So you can only select the last wizard so that it will stick only the last wizard
7:43
And let me just publish this here. Okay, after that it will show in the sidebar but to make the table of content, you will
7:50
Level of Contraintensity in the sidebar, you have to click on this
7:54
Let's just skip this placement option and let's click on update. Now let's click on back and we have to add the short code method
8:04
So let me just copy the short code for the sidebar and let go to the sidebar option So you can direct go to the wizard section or you can add it from the customizer So I will click on next
8:22
Now let's add the table of content in the sidebar. So I will click on this and let me just add the short code and let's paste the short code here
8:34
Now let's update this. Now let me just refresh the blog post
8:38
and scroll down and here as you can see the table of content is stick to the right
8:45
sidebar so in this way you can display a sticky table of content to your website
8:51
but we don't want to add the table of content sticky when it is shown in the mobile
8:57
devices so for this we will make a small changes to the cadence hook element so let me
9:05
Let me just click on the element setting and let's click on TOC sidebar
9:13
Now here we will change the device setting. So here I will select only the desktop option and let's click on update
9:22
Now let's click on back and let me just select this option, table of content
9:29
And here in the device setting I will select only tablet and mobile devices
9:35
so that when a user opened it from mobile devices then it will show the table of content
9:40
after the first paragraph and when it user open your website from desktop then it will
9:46
show in the right sidebar. So let me just refresh this page and as you can see the table
9:54
of content is shown in the right sidebar. So let me just click on inspect element and here
10:00
as you can see the table of content is shown after the first paragraph in the mobile sidebar
10:04
in the mobile devices and when I close this the table of content will show in the right sidebar
10:10
and it will stick to the right sidebar. So in this way you can add table of content to each and every blog post
10:18
So let me just open a blog post from here. So let me just open this and let's scroll down and here as you can see the table of content
10:28
is added in the sidebar. I hope you got the idea how to add an automatic table of content
10:34
using the cadence hook element and if you have any doubt regarding this then you can
10:39
ask me in the comment section and if this video is helpful to you then make sure to
10:44
hit the like button and subscribe to my channel for more upcoming videos like this and
10:48
I recommend you to follow the cadence theme tutorial playlist and I will leave this
10:53
link in the description and I will see you in the next video thank you