How to Automatically Add a Table of Contents to WordPress Using Kadence Pro
ฝัง
- เผยแพร่เมื่อ 30 ก.ค. 2024
- In this WordPress tutorial, I'll teach you step-by-step how to automatically add a Table of Contents to your blog posts for both desktop and mobile devices using the Kadence Theme Pro + Kadence Blocks.
Best of all, I'll also teach you how to make your desktop Table of Contents (TOC) be sticky on scroll within your sidebar and how to highlight the active section while the user is scrolling.
TABLE OF CONTENTS
0:00 Intro
0:42 Enable Kadence Hooks
0:57 Add Mobile Table of Contents
4:26 Add Desktop Table of Contents
6:25 Sticky Sidebar Table of Contents
8:30 Highlight TOC Section on Scroll
10:04 Outro
**************************
LINKS:
🖥 Recommended Hosting: startblogging101.com/hosting/
☁️ Cloudways - Fastest hosting and easiest to pass Core Web Vitals - Use Vultr HF server: startblogging101.com/cloudways
📈 FREE 7 Days to WordPress Speed Mastery Email Course: startblogging101.com/wordpres...
💰 Kadence Discount Code: 10% OFF any bundle using code SB10OFF
✅ Kadence Full Bundle: Includes Kadence Theme Pro + Kadence Blocks Pro + Kadence Cloud + Membership-Only Starter Templates and much more: startblogging101.com/kadence-... (10% OFF Use Code SB10OFF)
✅ Kadence Theme Pro: startblogging101.com/kadence-pro (10% OFF Use Code SB10OFF)
✅ Free Kadence Theme download: startblogging101.com/kadence
I’d love it if you joined my completely free Start Blogging 101 Community Facebook Group which is a group of rockstar individuals who are passionate about building fast, profitable WordPress sites with Gutenberg. Come join and say hi!
👋 Start Blogging 101 Facebook Community: / startblogging101
👉 Start Blogging 101 Facebook Page: / startblogging101
**************************
First, I'll show you how to automatically add a mobile Table of Contents to all of your blog posts after the first paragraph of text.
Second, I'll show you how to automatically add a desktop Table of Contents to all of your blog posts after the sidebar.
Third, I'll show you how to create a sticky Table of Contents in the sidebar of all your blog posts so that the TOC stays showing as users scroll down your page.
Lastly, I'll show you how to enable the scroll spy feature in the Kadence Table of Contents so that the active section is highlighted in your sticky TOC as users are reading your post.
**************************
My channel is supported by my viewers. If you purchase through a link in my description, I may earn a commission which allows me to continue providing tutorials and content for all of you. I appreciate all your support!
#kadencetheme #kadenceblocks #tableofcontents
![How to Build a COMPLETE Minimalistic Affiliate Blog in WordPress [Instant Import!]](http://i.ytimg.com/vi/qlskKYV70L8/mqdefault.jpg)
![How to Build a COMPLETE Minimalistic Affiliate Blog in WordPress [Instant Import!]](/img/tr.png)
![[ไฮไลต์] แบดมินตันหญิง "เมย์ รัชนก" ไทย vs เบลเยี่ยม รอบแบ่งกลุ่ม | โอลิมปิก 2024](http://i.ytimg.com/vi/qfMROCoiKMY/mqdefault.jpg)
WOW. I am just speechless. Thank you for sharing this valuable knowledge.
Glad you enjoyed it! It's pretty amazing what you can do with Kadence :)
Great tutorial
Glad it was helpful! Thanks for watching.
This was excelent. Just used this tutorial to create my TOC and it worked perfectly. It took me a while to get it just the way I liked it but man , you made it possible. Thank you.
Awesome to hear! Glad you were able to get everything working the way you wanted :)
Great video. Thank you!
a ton of thank you 🔥
You're welcome!
Straight to it, wonderful tips thank you.
Thanks for watching!
Hi Jake, awesome tutorial. How do I get rid of the bulleted list style TOC?
Hi Samantha! Glad you liked the tutorial. When you have the TOC chosen, there is a button in the toolbar that shows above it that says "Select List Style" and you can set it to "None" so there are no bullets. Hope that helps!
Good idea.
Thank you! Cheers!
Such clear and straightforward videos. Please make more about Kadence! :) Quick question. How do you think it affects SEO to include the TOC in your sidebar? From a user perspective, I like it. I'm wondering what G will think (or if having a TOC in the body even helps SEO). Also, I typically change the TOC title to include KWs for the post. Obviously, you can't do that with an auto TOC. Do you think using KWs there has a positive effect?
When making a sticky sidebar on desktop, if the table of contents is longer than the screen, the table of contents itself doesnt scroll as the reader gets further down the page. Any setting to change that?
Any chance you could update this. There is no container settings in the new design and no way to know what is right and wrong anymore.
in the Enable Sticky Sidebar the Only Stick Last Widget feature not working on my side
That's a great idea, thank you! This is especially handy with multilingual content. Why did you set the maximum width? There's probably a reason I can't understand
Setting the maximum width on desktop looks a little better in my opinion since the "collapsable" icon will be closer to the title and the container doesn't need to span the entire width of my desktop content area. But you don't need to sex a maximum width if you don't want!
@@StartBlogging101 can you see my recent comment about the question on the sticky sidebar/scroll - thanks!!!
Is it free kadence theme
Could u make a full wordpress setting up to design using kadence and Gutenberg tutorial vodeo
This is an example of making a toc with the pro edition of the Kadence theme, so it is not free.
Like Jouke said, the automatic Table of Contents in Kadence requires the use of Kadence Hooks which is a Kadence Theme Pro feature. I also have another video out there of how to build fast landing pages using Gutenberg + Kadence Blocks if you want to check that out.
Fact: if live "visible for" as unset for mobile (as placement after paragraph) is ok, if live unset for desktop (shortcode) block is disapear
Better to add that the video is about Kadence Pro on your title!!!
Added :)