{"id":4601,"date":"2021-07-11T16:51:39","date_gmt":"2021-07-11T06:51:39","guid":{"rendered":"http:\/\/vjdesign.com.au\/?p=4601"},"modified":"2024-03-19T20:30:41","modified_gmt":"2024-03-19T09:30:41","slug":"table-of-contents-wordpress","status":"publish","type":"post","link":"https:\/\/vjdesign.com.au\/table-of-contents-wordpress\/","title":{"rendered":"How to create a Table Of Contents (TOC) in WordPress with\/without plugin"},"content":{"rendered":"\n<p>Most readers scan content rather than reading it in full. A Table Of Contents (TOC) helps your readers jump to different sections of a long page\/post. Label each section of your content with a heading, and provide jump links to these headings. Creating a table of contents in WordPress is easy; let me show you how you can add a TOC using plugins and manually (without any code).<\/p>\n\n\n<div class=\"gb-container gb-container-32bd0eb4\"><div class=\"gb-inside-container\">\n\n<p class=\"gb-headline gb-headline-aafddfee gb-headline-text\"><strong>Page Contents<\/strong> (created manually)<\/p>\n\n\n\n<ul class=\"toc\">\n<li><a href=\"#manual\">How to Create a Table of Contents Manually<\/a><\/li>\n\n\n\n<li><a href=\"#rankmath\">How to Create a Table of Contents Using Rank Math SEO Plugin<\/a><\/li>\n\n\n\n<li><a href=\"#toc-plugins\">How to Create a Table of Contents Using Table of Contents Plugins<\/a><\/li>\n\n\n\n<li><a href=\"#faq\">Frequently Asked Questions (FAQ)<\/a><\/li>\n<\/ul>\n\n<\/div><\/div>\n\n\n<p><strong>Bonus: <\/strong>Want to style the block to look like mine? Want to create jump links that scroll smoothly? It&#8217;s easy! <a href=\"#faq\">See FAQs on smooth scroll and styling TOC block below<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"manual\">How to Create a Table of Contents Manually<\/h2>\n\n\n<div id=\"rank-math-howto\" class=\"rank-math-block\" >\n<div class=\"rank-math-howto-description\">\n<img loading=\"lazy\" decoding=\"async\" width=\"453\" height=\"193\" src=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2021\/07\/wordpress-table-of-contents.jpg\" class=\"attachment-full size-full\" alt=\"-\" srcset=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2021\/07\/wordpress-table-of-contents.jpg 453w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/2021\/07\/wordpress-table-of-contents-300x128.jpg 300w\" sizes=\"(max-width: 453px) 100vw, 453px\">\n<p>Adding a link to a page or post in WordPress is easy with the block editor. To create a link to jump to a specific part of a page we need to create a unique address for that destination. <br \/>We use <strong>Headings<\/strong> to label different sections of content on our page\/post. Let me show you how you create a link to such a heading. <\/p>\n<div class=\"lyte-wrapper\" style=\"width:1280px;max-width:100%;margin:5px auto;\"><div class=\"lyMe hidef\" id=\"WYL_ir1d0j-DrQI\"><div id=\"lyte_ir1d0j-DrQI\" data-src=\"https:\/\/vjdesign.com.au\/wp-content\/plugins\/wp-youtube-lyte\/lyteCache.php?origThumbUrl=%2F%2Fi.ytimg.com%2Fvi%2Fir1d0j-DrQI%2Fmaxresdefault.jpg\" class=\"pL\"><div class=\"tC\"><div class=\"tT\"><\/div><\/div><div class=\"play\"><\/div><div class=\"ctrl\"><div class=\"Lctrl\"><\/div><div class=\"Rctrl\"><\/div><\/div><\/div><noscript><a href=\"https:\/\/youtu.be\/ir1d0j-DrQI\" rel=\"nofollow noopener\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/vjdesign.com.au\/wp-content\/plugins\/wp-youtube-lyte\/lyteCache.php?origThumbUrl=https%3A%2F%2Fi.ytimg.com%2Fvi%2Fir1d0j-DrQI%2F0.jpg\" alt=\"-\" width=\"1280\" height=\"700\"><br \/>Watch this video on YouTube<\/a><\/noscript><\/div><\/div><div class=\"lL\" style=\"max-width:100%;width:1280px;margin:5px auto;\"><\/div><\/p>\n<p>Then to style the table of contents to look great using the free GenerateBlocks plugin, watch this video.<\/p>\n<div class=\"lyte-wrapper\" style=\"width:1280px;max-width:100%;margin:5px auto;\"><div class=\"lyMe hidef\" id=\"WYL_81ErQoqu67k\"><div id=\"lyte_81ErQoqu67k\" data-src=\"https:\/\/vjdesign.com.au\/wp-content\/plugins\/wp-youtube-lyte\/lyteCache.php?origThumbUrl=%2F%2Fi.ytimg.com%2Fvi%2F81ErQoqu67k%2Fmaxresdefault.jpg\" class=\"pL\"><div class=\"tC\"><div class=\"tT\"><\/div><\/div><div class=\"play\"><\/div><div class=\"ctrl\"><div class=\"Lctrl\"><\/div><div class=\"Rctrl\"><\/div><\/div><\/div><noscript><a href=\"https:\/\/youtu.be\/81ErQoqu67k\" rel=\"nofollow noopener\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/vjdesign.com.au\/wp-content\/plugins\/wp-youtube-lyte\/lyteCache.php?origThumbUrl=https%3A%2F%2Fi.ytimg.com%2Fvi%2F81ErQoqu67k%2F0.jpg\" alt=\"-\" width=\"1280\" height=\"700\"><br \/>Watch this video on YouTube<\/a><\/noscript><\/div><\/div><div class=\"lL\" style=\"max-width:100%;width:1280px;margin:5px auto;\"><\/div><\/p>\n\n<\/div>\n<p class=\"rank-math-howto-duration\"><strong>Total Time:<\/strong> <span>5 minutes<\/span><\/p>\n<ol class=\"rank-math-steps \">\n<li id=\"howto-step-1629599863833\" class=\"rank-math-step\">\n<h3 class=\"rank-math-step-title \">Add a heading block<\/h3>\n<div class=\"rank-math-step-content \"><p>If you have no headings, add some. Always use headings (heading level 2 or 3) to label your sections; thereby make your content easy to scan. <\/p>\n<p><img decoding=\"async\" alt=\"To add a heading block, click on on Add block button and select Heading (or search for heading block)\" src=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2021\/07\/wordpress-add-heading-block.jpg\"\/><br \/>Headings introduce new sections and organise page\/post content to help visitors (and search engines like Google) understand the structure of your content.<\/p>\n<\/div>\n<\/li>\n<li id=\"howto-step-1629599863833\" class=\"rank-math-step\">\n<h3 class=\"rank-math-step-title \">Go to heading block advanced settings<\/h3>\n<div class=\"rank-math-step-content \"><p>Select your heading block. Then from the Block settings on the right, select Advanced. You need to add a unique web address just for this heading block, called an &#8220;anchor&#8221;.<\/p>\n<p><img decoding=\"async\" alt=\"To add an anchor, select the heading and then from advanced options, find the HTML anchor\" src=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2021\/07\/wordpress-heading-html-anchor.jpg\"\/><\/p>\n<\/div>\n<\/li>\n<li id=\"howto-step-1629599863833\" class=\"rank-math-step\">\n<h3 class=\"rank-math-step-title \">Create a unique web address for your heading block &#8211; via the HTML anchor field<\/h3>\n<div class=\"rank-math-step-content \"><p>Type a short name &#8211; must be unique to this block on the page. Do not use spaces or wierd characters. Separate multiple words with a hyphen (-) or underscores (_). <br \/><img decoding=\"async\" alt=\"Add a unique name for your heading - via the the HTML anchor field \" src=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2021\/07\/wordpress-html-anchor.jpg\"\/><br \/><strong>Note:<\/strong> You can also copy-paste the full heading itself and let WordPress convert it into an anchor. For example, when I pasted the heading <kbd>\"How to Create a Table of Contents Manually\"<\/kbd> into the HTML anchor filed, WordPress automatically converted it to <kbd>\"How-to-Create-a-Table-of-Contents-Manually\"<\/kbd>.<\/p>\n<\/div>\n<\/li>\n<li id=\"howto-step-1629599863833\" class=\"rank-math-step\">\n<h3 class=\"rank-math-step-title \">Add the jump links at the top of your page<\/h3>\n<div class=\"rank-math-step-content \"><p>Scroll back to the top of the page. Add a list block and create jump links to our headings (anchors).<br \/> &#8211; Select the text (1)<br \/> &#8211; Click on the <strong>Link<\/strong> button (2)<br \/> &#8211; Enter the unique name you gave to the heading. Prepend a <strong>#<\/strong> to the unique name to create a jump link (3).<\/p>\n<p><img decoding=\"async\" alt=\"wordpress-adding-link-to-anchor\" src=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2021\/07\/wordpress-adding-link-to-anchor.jpg\"\/><\/p>\n<p>The # signals a jump link (also known as an anchor link). <br \/> For example, the URL for this page is https:\/\/vjdesign.com.au\/table-of-contents-wordpress\/. We can add a #toc-manual to the end of the URL to send users directly to that heading.<br \/><a href=\"https:\/\/vjdesign.com.au\/table-of-contents-wordpress\/#toc-manual\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/vjdesign.com.au\/table-of-contents-wordpress\/#toc-manual<\/a>  <\/p>\n<\/div>\n<\/li>\n<li id=\"howto-step-1629599863833\" class=\"rank-math-step\">\n<h3 class=\"rank-math-step-title \">Repeat for the rest of the headings on the page<\/h3>\n<div class=\"rank-math-step-content \"><p>Repeat steps 1 to 4 above for all the other headings on the page that you want to link to.<br \/><img decoding=\"async\" alt=\"-\" src=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2021\/07\/wordpress-table-of-contents.jpg\"><\/p>\n<\/div>\n<\/li>\n<li id=\"howto-step-1629599863833\" class=\"rank-math-step\">\n<h3 class=\"rank-math-step-title \">Bonus &#8211; Smooth scroll and show\/hide TOC<\/h3>\n<div class=\"rank-math-step-content \"><p>Want to create jump links that scroll smoothly? or want to show\/hide the links? It&#8217;s easy! <a href=\"#faq\">See FAQ below<\/a>.<\/p>\n<p><img decoding=\"async\" style=\"width: 600px;\" src=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2021\/07\/wordpress-jump-links-with-scroll.gif\" alt=\"wordpress-jump-links-with-smooth scroll\"><\/p>\n<\/div>\n<\/li>\n<\/ol>\n<\/div>\n\n\n\n\n\n\n<h2 class=\"wp-block-heading\" id=\"rankmath\">How to Create a Table of Contents Using RankMath SEO Plugin<\/h2>\n\n\n\n<p>I use the RankMath plugin for SEO and the free version includes 4 useful blocks, one of which is the Table of Contents (TOC) block.  <\/p>\n\n\n\n<p>Select [+] to toggle the block inserter, then scroll down to Blocks by Rank Math and select Table of Contents block.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"343\" height=\"328\" src=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/rankmath-insert-table-of-content-block.jpg\" alt=\"-\" class=\"wp-image-6026\" srcset=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/rankmath-insert-table-of-content-block.jpg 343w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/rankmath-insert-table-of-content-block-300x287.jpg 300w\" sizes=\"(max-width: 343px) 100vw, 343px\" \/><\/figure>\n\n\n\n<p>The Table of Contents by Rank Math comes with a few blocks settings as illustrated below:<\/p>\n\n\n\n<ol>\n<li>Choose the wrapper for title (default is H2)<\/li>\n\n\n\n<li>Exclude heading levels from the TOC. Select H3 if you only wish to show H2.<\/li>\n\n\n\n<li>Add additional class to style the block on the front end (better control than basic styles below).<\/li>\n\n\n\n<li>Use the <strong>Styles<\/strong> tab to set a background and text colours and change the font size.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"875\" height=\"689\" src=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/rankmath-table-of-content-block.jpg\" alt=\"WordPress editor showing the block settings fro Rank Math Table of Contents Block.\" class=\"wp-image-6027\" srcset=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/rankmath-table-of-content-block.jpg 875w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/rankmath-table-of-content-block-600x472.jpg 600w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/rankmath-table-of-content-block-300x236.jpg 300w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/rankmath-table-of-content-block-768x605.jpg 768w\" sizes=\"(max-width: 875px) 100vw, 875px\" \/><\/figure>\n\n\n\n<p>Here is a visual example of Rank Math TOC block with no headings excluded, background and text colours selected and font-size decreased to 16px.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"608\" src=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/rank-math-table-of-contents-1024x608.png\" alt=\"-\" class=\"wp-image-6050\" srcset=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/rank-math-table-of-contents-1024x608.png 1024w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/rank-math-table-of-contents-600x356.png 600w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/rank-math-table-of-contents-300x178.png 300w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/rank-math-table-of-contents-768x456.png 768w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/rank-math-table-of-contents.png 1063w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc-plugins\">How to Create a Table of Contents Using Table of Contents Plugins<\/h2>\n\n\n\n<p>To create a table of contents with a plugin, you just need to install the plugin and configure a few settings. Whilst there are several <a href=\"https:\/\/wordpress.org\/plugins\/search\/table+of+contents\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">WordPress table of contents plugins<\/a> to choose from, here are a few that I like.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-heroic-table-of-contents-plugin\">1. Heroic Table of Contents Plugin<\/h3>\n\n\n\n<p>The <a href=\"https:\/\/wordpress.org\/plugins\/heroic-table-of-contents\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Heroic Table of Contents<\/a> is a WordPress Block which means you can build your TOC right in the WordPress editor at a location of your choice. It is a new plugin that is gaining popularity.<\/p>\n\n\n\n<ul>\n<li>There is no need to create the table yourself, the plugin automatically picks up all the headings in your existing article and creates a full table of content in a click.<\/li>\n\n\n\n<li>You don&#8217;t have to use all the headings, you can decide to hide a specific type of heading such as h6 or just manually chose which titles to display.<\/li>\n<\/ul>\n\n\n\n<p><strong>Cost:<\/strong> Free<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-easy-table-of-contents-plugin\">2. Easy Table of Contents Plugin<\/h3>\n\n\n\n<p>The <a href=\"https:\/\/wordpress.org\/plugins\/easy-table-of-contents\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Easy Table of Contents plugin<\/a> adds a user-friendly and fully automatic way to create and display a table of contents generated from the page content. <\/p>\n\n\n\n<p>I had this plugin installed on this site and use it to create a table of contents for all my posts. This is how the TOC generated by this plugin displays on my posts.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2021\/07\/toc-plugin.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"496\" height=\"120\" src=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2021\/07\/toc-plugin.jpg\" alt=\"Example Table of Contents added using Easy Table of Contents plugin. \" class=\"wp-image-4608\" srcset=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2021\/07\/toc-plugin.jpg 496w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/2021\/07\/toc-plugin-300x73.jpg 300w\" sizes=\"(max-width: 496px) 100vw, 496px\" \/><\/a><figcaption class=\"wp-element-caption\">Example Table of Contents added using Easy Table of Contents plugin.<\/figcaption><\/figure><\/div>\n\n\n<p>If you are interested, here are the settings I have used. Go to Plugins &gt; Settings.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2021\/07\/easy-toc-plugin.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"669\" height=\"119\" src=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2021\/07\/easy-toc-plugin.jpg\" alt=\"-\" class=\"wp-image-4623\" srcset=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2021\/07\/easy-toc-plugin.jpg 669w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/2021\/07\/easy-toc-plugin-600x107.jpg 600w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/2021\/07\/easy-toc-plugin-300x53.jpg 300w\" sizes=\"(max-width: 669px) 100vw, 669px\" \/><\/a><\/figure>\n\n\n\n<p>Settings Used on this site:<\/p>\n\n\n\n<ol>\n<li><a href=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2021\/07\/easy-toc-settings-1.jpg\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Easy Table of Contents &#8211; Settings Page &#8211; 1<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2021\/07\/easy-toc-settings-2.jpg\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Easy Table of Contents &#8211; Settings Page &#8211; 2<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2021\/07\/easy-toc-settings-3.jpg\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Easy Table of Contents &#8211; Settings Page &#8211; 3<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2021\/07\/easy-toc-settings-4.jpg\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Easy Table of Contents &#8211; Settings Page &#8211; 4<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2021\/07\/easy-toc-settings-5.jpg\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Easy Table of Contents &#8211; Settings Page &#8211; 5<\/a><\/li>\n<\/ol>\n\n\n\n<p><strong>Cost:<\/strong> Free<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-simple-toc-table-of-contents-block\">3. SimpleTOC \u2013 Table of Contents Block<\/h3>\n\n\n\n<p>The <a href=\"https:\/\/wordpress.org\/plugins\/simpletoc\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">SimpleTOC \u2013 Table of Contents Block<\/a> works by parsing the post content and retrieving the heading blocks and creates a new dynamic block with a list of links to the headings. It does not need Javascript and additional CSS. It works out-of-the-box without any configuration. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"faq\">Frequently Asked Questions (FAQ)<\/h2>\n\n\n<div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"rm-faq-1290ef1ff2da5c3c681298949217d727\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">What is a table of contents?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>A table of contents (TOC) is a list of headings with anchor links so that your readers can jump to specific sections on a long page\/post quickly and easily.<\/p>\n<p><img decoding=\"async\" alt=\"-\" src=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2021\/07\/toc-plugin.jpg\"><\/p>\n\n<\/div>\n<\/div>\n<div id=\"rm-faq-f582e8a28c56224150ac4803fd2c722f\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">How do I create jump links that scroll smoothly?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Anchor links typically jump the user to the heading instead of scrolling smoothly. This can be a jarring experience.<br \/>You will notice that the jump links on this page scroll smoothly.<\/p>\n<p>To enable smooth scroll, simply copy-paste the following CSS code.<\/p>\n<p><code>html {<br \/>scroll-behavior: smooth;<br \/>}<\/code><\/p>\n<p>To add the above CSS code, from the WordPress menu, select Appearance > Customise > Additional CSS.<\/p>\n<p><img decoding=\"async\" alt=\"Additional CSS\" src=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2021\/07\/css-smooth-scroll.jpg\"\/><br \/>You can also add CSS using a plugin like <a href=\"https:\/\/wordpress.org\/plugins\/simple-css\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Simple CSS<\/a>.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"rm-faq-e96659baf924838f17d0d5a58f73f219\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">How do I style the table of contents to look nice?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>To style the table of contents list (remove bullets), simply copy-paste the following CSS code.<\/p>\n<p><code>.toc {<br \/>list-style: none;<br \/>margin-left:0;<br \/>margin-bottom:0;<br \/>}<\/code><\/p>\n<p>To add the above CSS code, from the WordPress menu, select Appearance > Customise > Additional CSS.<\/p>\n<p><img decoding=\"async\" alt=\"Additional CSS\" src=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/2021\/07\/css-smooth-scroll.jpg\"\/><br \/>You can also add CSS using a plugin like <a href=\"https:\/\/wordpress.org\/plugins\/simple-css\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Simple CSS<\/a>.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1652506559971\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">How to create a Table Of Contents (TOC) in WordPress Classic Editor<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Whilst Gutenberg Block Editor makes adding jump links easy, you can add smooth scroll links using the Text (CODE) tab in the classic editor. Group a bunch of these links and style them as a TOC. View my post on <a href=\"https:\/\/vjdesign.com.au\/table-of-contents-classic-wordpress-editor\/\" data-type=\"post\" data-id=\"6540\">How to create a Table Of Contents (TOC) in WordPress Classic Editor<\/a>.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1705186141907\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">How do I show\/hide my Table of contents links?<\/h3>\n<div class=\"rank-math-answer \">\n<img loading=\"lazy\" decoding=\"async\" width=\"282\" height=\"300\" src=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/table-of-contents-block-show-hide-282x300.jpg?ver=1705187379\" class=\"alignright\" alt=\"table-of-contents-block-show-hide\" srcset=\"https:\/\/vjdesign.com.au\/wp-content\/uploads\/table-of-contents-block-show-hide-282x300.jpg 282w, https:\/\/vjdesign.com.au\/wp-content\/uploads\/table-of-contents-block-show-hide.jpg 401w\" sizes=\"(max-width: 282px) 100vw, 282px\" \/>\n<p>Use Details-Summary HTML elements to show or hide your links.<br \/>As illustrated&#8230;<br \/>(1) Add a Custom HTML block and add the code that will become the visible header<br \/><code>&lt;details><br \/>\u00a0 &lt;summary>Table of contents &lt;\/summary><\/code><\/p>\n<p>(2) Add your usual TOC block with your links. <\/p>\n<p>(3) Add another  Custom HTML block to finish the code. <br \/><code>&lt;\/details><\/code><\/p>\n<p>OR<\/p>\n<p>If you use <a href=\"https:\/\/generateblocks.com\/?ref=21\" data-type=\"referral\" data-id=\"4226\" rel=\"nofollow noopener\" target=\"_blank\">GenerateBlocks<\/a> you can use the Accordion block. <\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1710840436964\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">How to add Scroll-to links in WordPress Classic Editor<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Whilst Gutenberg Block Editor makes adding jump links easy, you can add smooth scroll links using the Text (CODE) tab in the classic editor. View my post on <a href=\"https:\/\/vjdesign.com.au\/scroll-to-links-classic-wordpress-editor-2\/\" data-type=\"post\" data-id=\"6534\">How to add Scroll-to Links in Classic WordPress Editor<\/a>.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\">Conclusion<\/h2>\n\n\n\n<p>A table of contents (TOC) improves SEO and reader experience allowing them to jump to the sections they want. <a href=\"#toc-manual\">Use the manual method described above<\/a> if you only need TOC on a few pages\/posts. If you write lots of long articles, there are several <a href=\"https:\/\/wordpress.org\/plugins\/search\/table+of+contents\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">WordPress table of contents plugins<\/a> to choose from. There is also a <a href=\"https:\/\/wptavern.com\/the-gutenberg-wordpress-plugin-to-introduce-a-table-of-contents-block\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">TOC block under development<\/a>. <\/p>\n\n\n\n<p><br><br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A Table Of Contents (TOC) helps your readers jump to different sections of a long page\/post. Label each section of your content with a heading, and provide jump links to these headings. Creating a table of contents in WordPress is easy; let me show you how you can add a TOC using plugins and manually (without any code).<\/p>\n","protected":false},"author":1,"featured_media":4656,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":"","_links_to":"","_links_to_target":""},"categories":[22],"tags":[],"post_series":[],"post_folder":[],"acf":[],"_links":{"self":[{"href":"https:\/\/vjdesign.com.au\/wp-json\/wp\/v2\/posts\/4601"}],"collection":[{"href":"https:\/\/vjdesign.com.au\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vjdesign.com.au\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vjdesign.com.au\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vjdesign.com.au\/wp-json\/wp\/v2\/comments?post=4601"}],"version-history":[{"count":55,"href":"https:\/\/vjdesign.com.au\/wp-json\/wp\/v2\/posts\/4601\/revisions"}],"predecessor-version":[{"id":6554,"href":"https:\/\/vjdesign.com.au\/wp-json\/wp\/v2\/posts\/4601\/revisions\/6554"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vjdesign.com.au\/wp-json\/wp\/v2\/media\/4656"}],"wp:attachment":[{"href":"https:\/\/vjdesign.com.au\/wp-json\/wp\/v2\/media?parent=4601"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vjdesign.com.au\/wp-json\/wp\/v2\/categories?post=4601"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vjdesign.com.au\/wp-json\/wp\/v2\/tags?post=4601"},{"taxonomy":"post_series","embeddable":true,"href":"https:\/\/vjdesign.com.au\/wp-json\/wp\/v2\/post_series?post=4601"},{"taxonomy":"post_folder","embeddable":true,"href":"https:\/\/vjdesign.com.au\/wp-json\/wp\/v2\/post_folder?post=4601"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}