How to Automatically Add a Table of Contents to WordPress Using Kadence Pro

hey everyone i saw some people talking in the cadence community and wondering how to create a table of contents on both mobile and desktop using cadence element hooks and have them be separate and so i'm just going to show you a quick tutorial here so i have a test post on the get income starter template here and i'm just going to show you how to have the table of contents be after the sidebar here if you're on desktop and then if you're on mobile obviously that sidebar is going to be way at the bottom and so the table of contents there isn't going to help so for mobile we are just going to place it after the first paragraph of text and so let's get right into it so first and foremost when you're on the cadence section here this is going to be a cadence pro tutorial since it requires the use of hooked elements and so you'll want to make sure that hooked elements is on here and refresh your page and we're going to go into elements here and we're going to add a new element and let's do the mobile table of contents first so i'm going to type mobile toc and i'm going to do a forward slash and type table of contents and you can see it right here so i have a table of contents added the only thing you can obviously change this and style it and change all the settings to however you want i'm going to turn off h1 h5 and h6 and then the only other thing is i'm going to come into the container settings and change the max width to let's say 300 here actually let's do 400 for mobile and so that looks that way and i actually might just change the border color and border width a little bit so that it stands out all right so that's looking good so the nice thing about the cadence table of contents is it's going to automatically read in your headings no matter what page it's on and so you all you have to do is just add that block and style it and then when it gets added to the page it's just going to work and so now that we have that all set aside let's go up to element settings here and for placement since this is mobile we are going to scroll down here and you'll notice that after you scroll down some there is inside the content section and then you can specify here if you want it after the first second third fourth paragraph and things like that so i'm going to choose after the first paragraph and we're going to leave the priority at 10 and then for display settings we're going to show this on we will just scroll down and choose single posts because i want it to show on my blog post and then for user settings we're going to have this visible to all users and device settings here is where you can specify that you only want this to show on mobile for example so i'm just gonna do this on let's say mobile and we can add tablet here but you can do obviously whatever you would like we don't need any expire settings and once that saves here we'll just get this published and then we'll go view that on mobile and make sure that that's all looking good so i'm going to publish this here and publish and if i come here and i refresh this i'm going to press f12 and bring up the chrome dev tools and i'm going to click this icon which is to toggle the device toolbar and this will show me mobile and what it should look like on a phone right now it's just set to the moto g4 and if i scroll down here you can see that after the first paragraph i have the table of contents added here and it took all of my headings and it automatically dynamically added them in for this post and it's going to do this for all your posts and so this is really really nice and on mobile i have the table of contents showing after the first paragraph so that's all looking awesome and you didn't have to do anything to add your table of contents to all your posts other than just create the element and specify which pages you wanted it on so but if i turn this off you can see on desktop still we don't have anything and so that's what we want because we're going to choose the table of contents to be under the sidebar here so let's do that quick so we'll come back here and now that this is published we're going to come back and we will add new here for desktop table of contents so i'm going to choose default i'm going to type desktop toc i'm going to once again forward slash table and choose table of contents i'll make the same changes to this so i'm going to turn this and this and this off i'm going to go into container and i'm going to make the max width 300 pixels because that's actually what i have my sidebar currently set to is 300 fixed pixels i'm going to turn the border width to 2 and that should be good so that's styled the way i want once again obviously obviously you can style it however you would like and then for the element settings here for placement i'm going to come in here and choose go to content and sidebar and i'm going to choose after sidebar here and leave the priority at 10 for display settings we're going to once again show this on only single posts which is all your blog posts we'll go to user settings here we're going to show this to all users and then here is the device settings since we have mobile and tablet already covered i'm going to choose desktop here and we don't need expire settings and then i will just publish this once again and hit publish and now that's live and so let's come back here i'm going to x out of this and we're going to refresh our page and there you have it you have the table of contents that automatically shows after your sidebar now and that's going to show that way for desktop for all of your blog posts and then if i once again bring up the console here and change to mobile you can see that the table of contents switches to show right after the first paragraph so that's awesome one last thing that i'm going to show here is if i come back here you also have a cadence shortcode and so if you just created this desktop table of contents and you wanted to use the short code to specifically put it into a widget in your sidebar rather than have it show after your sidebar or before your sidebar i'm gonna copy this here and we're gonna come into widgets here and then you can see that this is your sidebar here and you could just place like an html element or whatever here so we can just add this to sidebar one and we'll just call the well i'll just leave the title as is and then in the content here i'm just gonna place that and we're gonna hit save and then let's just come here and go back to the desktop i'll x out of this and refresh here and you can see that i now have two because i already have the one that i added automatically but i'm also adding the widget itself as a table of contents and that's showing up actually within my sidebar and so then you can tweak with the settings with that in the customizer so then to get rid of that dual table of contents i'm going to come back here and we're going to go back into our elements here we're going to go to the desktop toc and in the element settings here i'm just going to remove this placement so that we're not specifying anywhere where we want this to be and we're just going to use the short code then which i had already plugged in so i'm going to update that quick and then one other thing to make this sticky is we're going to go into appearance and customize here and if we go to general and then sidebar we're going to enable the sticky sidebar and i also do have this option to only stick the last widget and so that's what i want since the table of contents is the last widget for me right now that should stick and then i'm going to go to publish and x out of this and one last thing that i want to just show you guys that just adds kind of the cherry on top of all this is if we go into the desktop toc and then if i click into the table of contents and go to the block settings here i can go to the scroll settings and i'm going to enable smooth scroll to id and then i'm also going to enable highlighting the heading when you're scrolling in the active area which is a scroll spy feature that ben just recently added and then you can come in here and you can choose whatever color you want in fact let's just choose something that's going to be really bright that we can see so i'm just going to choose this red here and we're going to update this and then we should be able to just go and view this and we should have one table of contents in the desktop and we will be able to see the scroll spy feature as well so let me go into my blog post under monetizing here so here's the blog post here it is on desktop and as i scroll down here you can see it sticks as soon as i get to that and then when i'm in that section that area is highlighted red and then as i scroll down i obviously have these really tiny sections right now but as i scroll down the appropriate areas highlight in red which is just amazing and then once again i've already showed this but if i go back to mobile then and i scroll up mobile is just going to show it right directly underneath the first paragraph so there you guys have it i hope you enjoyed the tutorial and i'll see you guys in the next one [Music] you

Channel: StartBlogging101 - WordPress Without Page Builders

Views: 474

Keywords:

Id: qnXKp3g-LwA

Length: 10min 29sec (629 seconds)

Published: Fri Oct 29 2021