{"id":91734,"date":"2023-04-04T11:09:55","date_gmt":"2023-04-04T11:09:55","guid":{"rendered":"https:\/\/www.vwthemes.com\/?p=91734"},"modified":"2023-04-04T11:15:55","modified_gmt":"2023-04-04T11:15:55","slug":"how-to-add-table-of-contents-in-wordpress","status":"publish","type":"post","link":"https:\/\/preview.vwthemesdemo.com\/old_website\/how-to-add-table-of-contents-in-wordpress\/","title":{"rendered":"How to Add Table of Contents in WordPress"},"content":{"rendered":"\n<p class=\"has-black-color has-text-color\">Have you ever visited a website with a lengthy explanation of the topic you are looking for? Did you find yourself reading the full article? Like most users, your eyes probably got tired from looking at too many words or gave up upon failing to find the required information.<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\">On the other hand, there is another website that also offers you a lengthy explanation but features an outline of the information. Is this not more convenient and makes finding the information you seek easy? Again, the simple solution is TOC or table of contents.<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\">Concerning your WordPress website, the user experience plays a significant role. The primary aim of any site is to satisfy your user&#8217;s demands and give them the best experience. You may use <strong><a href=\"https:\/\/www.vwthemes.com\/free-wordpress-themes\/\" target=\"_blank\" rel=\"noreferrer noopener\">free WordPress themes<\/a><\/strong> for this purpose. However, as effective as a theme is, it is essential to incorporate other elements into your WordPress.<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\">Therefore, one thing you cannot miss is TOC to increase post readability and keep your site organized. So, to let you enjoy the power of TOC, we will discuss how you can manually create it for your WordPress site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-table-of-contents-and-its-importance\"><strong>What is Table of Contents and Its Importance?<\/strong><\/h2>\n\n\n\n<p class=\"has-black-color has-text-color\">When you open a book, it features all the chapters the entire book has, along with the page numbers each chapter is on. Thus, readers do not have to skim through every page to find the chapter they seek. Instead, they can readily jump to the correct page number. The same for a website is known as the table of contents or TOC.<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\">The minimum time for websites to capture a user&#8217;s attention is fifteen seconds. When nothing catches the user&#8217;s eye, or they cannot find the relevant information, they are bound to move to another website. To maintain a low bounce rate and draw your users in, you will need a TOC.<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\">A TOC features links to various sections of the same page or post. Sometimes, such links also interlink other web pages of the same website. Generally, the links are for the same post and showcase all the main sections in one place to increase the user&#8217;s reading experience.<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\">When users come across a section that might hold the information they need, they do not have to scroll to that section but can readily jump to it to find the answers. Users may also use TOC to read the post in any order.<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\">When you are writing blog posts, the table of contents may feel like an unnecessary step. However, if you want your users to have the best browsing experience and leave your website with a good smile, TOC can hold great significance. Some of the important reasons are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Users can skip scrolling for hours through a lengthy page of information and comfortably jump to a relevant point with TOC.<\/li>\n\n\n\n<li>A TOC allows you to <a href=\"https:\/\/www.vwthemes.com\/wordpress-seo-optimization-checklist\/\" target=\"_blank\" rel=\"noreferrer noopener\">boost your website&#8217;s Search Engine Optimization<\/a> score. You can readily add relevant keywords with these helpful links and add to keyword density. As a result, your website will have better rankings.<\/li>\n\n\n\n<li>Google offers featured snippets or extended top search results with a short excerpt that quickly answers users&#8217; queries. If you want your post to obtain a featured snippet, you must include a TOC as a concise answer to communicate well with the user&#8217;s questions.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-black-color has-text-color\">You have knowledge of TOC and the importance of incorporating it into your WordPress web pages. Now, it is time to look at how you can add a table of contents manually.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-to-add-table-of-contents-in-wordpress-manually\"><strong>How to Add Table of Contents in WordPress Manually<\/strong><\/h2>\n\n\n\n<p class=\"has-black-color has-text-color\">Creating a table of contents without the help of any additional tool may seem challenging. Although it is time-consuming and demands loads of work, it is not impossible to achieve. The process will require you to do some coding to add TOC manually.<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\">In this process, you can use the Gutenberg block editor to add table of content in your post. When using any other page builder for WordPress, you will be more fortunate with a Table of Content plugin compatible with the builder.<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\">Now, let us discuss how to add table of contents for your WordPress website.<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\"><strong>Step 1. <\/strong>The first step is to visit the web page or post for which you want a table of contents.<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\"><strong>Step 2. <\/strong>Ideally, your posts must have headings that help users to find relevant information. However, if your post has no, you must first create headings that act as the various items for your table of contents.<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\"><strong>Step 3. <\/strong>Next, when you have the first block for the heading, click within it. You will see a toolbar pop-up with multiple options.<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\"><strong>Step 4. <\/strong>The toolbar will have an icon with three dots and the &#8220;More&#8221; option. Click on it to get a drop-down list, and select the &#8220;Edit as HTML&#8221; option.<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\"><strong>Step 5.<\/strong> To the heading&#8217;s opening tag, incorporate a unique ID. Any HTML element&#8217;s opening tag will have a distinctive identifier, in this case, an ID name. For a heading, this may look like this:<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\">&lt;h2 id=&#8221;unique-id&#8221;&gt; Section Name &lt;\/h2&gt;<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\"><strong>Step 6: <\/strong>In the next steps, you will iterate step 5 for all the headings you wish to add to your page&#8217;s table of contents. For example, if your ID name is ABC-1, ABC-2, ABC-3, and ABC-4. Then you can add as follows<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\">&lt;h2 id=&#8221;ABC-1&#8243;&gt; Section 1&lt;\/h2&gt;<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\">(Add information)<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\">&lt;h2 id=&#8221;ABC-2&#8243;&gt; Section 2&lt;\/h2&gt;<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\">(Add information)<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\">&lt;h2 id=&#8221;ABC-3&#8243;&gt; Section 3&lt;\/h2&gt;<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\">(Added information)<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\">&lt;h2 id=&#8221;ABC-4&#8243;&gt; Section 4&lt;\/h2&gt;<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\">(Added information)<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\"><strong>Step 7. <\/strong>For the next step, move to the top of your web page. The toolbar on the top features &#8220;Add Bock.&#8221; Select this option.<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\"><strong>Step 8. <\/strong>After you select this option, it will give you a drop-down menu with multiple blocks to add. Next, select the &#8220;Custom HTML&#8221; option, which enables you to create a table of contents for your post.<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\"><strong>Step 9. <\/strong>Now, it is time to add jump links to your table of contents. Hyperlinks that allow readers to jump from the TOC to the same post or page&#8217;s numerous sections refer to jump links. In this example, we will only add hashtags with the previously used ID name to every href attribute.<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\">You can copy the following HTML into a block and create a TOC for your page:<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\">&lt;div class=&#8221;toc&#8221;&gt;<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\">&lt;p&gt;Table of contents&lt;\/p&gt;<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\">&lt;ol&gt;<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\">&lt;li&gt;&lt;a rel=&#8221;noopener&#8221; target=&#8221;_blank&#8221;href=&#8221;#abc-1&#8243;&gt;Section 1&lt;\/a&gt;&lt;\/li&gt;<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\">&lt;li&gt;&lt;a rel=&#8221;noopener&#8221; target=&#8221;_blank&#8221;href=&#8221;#abc-2&#8243;&gt;Section 2 &lt;\/a&gt;&lt;\/li&gt;<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\">&lt;li&gt;&lt;a rel=&#8221;noopener&#8221; target=&#8221;_blank&#8221;href=&#8221;#abc-3&#8243;&gt;Section 3 &lt;\/a&gt;&lt;\/li&gt;<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\">&lt;li&gt;&lt;a rel=&#8221;noopener&#8221; target=&#8221;_blank&#8221;href=&#8221;#abc-4&#8243;&gt;Section 4 &lt;\/a&gt;&lt;\/li&gt;<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\">&lt;\/ol&gt;<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\">&lt;\/div&gt;<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\"><strong>Step 10: <\/strong>If you want your sections to link correctly, accurately alter the jump links and section names. Remember to write # (hashtag) before your ID name when customizing the jump link.<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\">You will have a well-established table if you have followed the given steps accurately. You can see how easy it is to follow the steps. However, you will need a basic understanding of CSS and HTML coding languages.<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\">But we know not every WordPress website owner is familiar with coding, and several may even find it difficult to code. Therefore, you always have the option to use an automatic option or a plugin. In addition, a range of plugins is available to readily add a table of contents to your WordPress pages or posts.<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\">To give you detailed knowledge, in the next section, we will discuss different options you can use to add a table of contents to your WordPress post or page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-add-table-of-contents-in-wordpress-using-plugins\"><strong>Add Table of Contents in WordPress Using Plugins<\/strong><\/h2>\n\n\n\n<p class=\"has-black-color has-text-color\">Now you understand how necessary a table of contents is on your WordPress websites. The benefits are not just limited to increasing your post&#8217;s readability and making it easy for your readers to find the information they seek. An efficient table of contents also enables you to optimize your website for search engines and increase rankings.<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\">However, manually creating a table of contents for your posts and web pages can require immense effort. Therefore, you can use other easier methods to incorporate a table of contents in your posts. Let us get started.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-black-color has-text-color\"><strong>Plugins for Adding Tables of Contents:<\/strong><\/h3>\n\n\n\n<p class=\"has-black-color has-text-color\">When looking for more functionality, plugins are always the number one option. You can find innumerable plugin solutions to incorporate a table of contents into your WordPress website&#8217;s posts.<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\">It is advisable to use this method as it consumes less time and automatically generates a TOC for your post using your content&#8217;s subheadings. It also allows you to create an entirely adaptive TOC featuring adjustable links.<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\">This post will use AIOSEO, which is short for an All-in-One SEO plugin. This plugin features a built-in block for a table of contents. Apart from this, there are multiple other plugins that you can use, such as Fixed TOC.<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\">With AIOSEO, you can readily use the free version to incorporate TOC. However, the premium version <a href=\"https:\/\/www.vwthemes.com\/how-to-rank-higher-on-google\/\" target=\"_blank\" rel=\"noreferrer noopener\">delivers better rankings on search engines<\/a>.<\/p>\n\n\n\n<p>To install the plugin, do the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Visit your WordPress dashboard and find &#8220;Plugins.&#8221;<\/li>\n\n\n\n<li>Find and select the button for &#8220;Add New.&#8221;<\/li>\n\n\n\n<li>Either use &#8220;Plugin Directory&#8221; to install your free plugin. If you have a premium plugin, you will upload its .zip file.<\/li>\n\n\n\n<li>&#8220;Activate&#8221; your plugin.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-black-color has-text-color\">Now that your plugin is active, you can enjoy its range of functions. With the AIOSEO, you must first configure it. After this, you can do the following:<\/p>\n\n\n\n<p>Add Toc Using Aioseo Plugin<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Visit or create the post\/page where you plan to add a TOC.<\/li>\n\n\n\n<li>Select the plus (+) icon or &#8220;Add Block&#8221; from the top toolbar.<\/li>\n\n\n\n<li>Drag the &#8220;AIOSEO-Table of Contents&#8221; block anywhere on your page\/post.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-black-color has-text-color\">Now, your plugin identifies the page&#8217;s headings and automatically adds them to your TOC. In the case of different heading styles, including heading 2, heading 3, heading 4, etc., the lower sub-head levels will appear indented. In case when you add more headings, the plugin will ensure they are present in the TOC. Remember, you can only add one TOC to a single post.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-conclusion\"><strong>Conclusion<\/strong><\/h2>\n\n\n\n<p class=\"has-black-color has-text-color\">Reading lengthy content and finding relevant information is no less than being lost in a maze. It could also be a big reason many users leave one website for another. If you want to lower your bounce rate and increase your content&#8217;s readability, add a table of contents.<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\">A TOC involves all your post\/page&#8217;s headings and sub-headings, along with jump links to multiple sections. So your user can effortlessly jump to the information they are looking for. It also improves the quality of the audience&#8217;s user experience and boosts your SEO.<\/p>\n\n\n\n<p class=\"has-black-color has-text-color\">You can use the manual method to create a TOC for your site. However, this involves writing codes and is time-consuming. Another option is to use plugins for TOC that automate the process and is the best if you are not a developer or know the basics of coding languages, such as CSS and HTML. Whatever option you use, you must add a TOC to make your user&#8217;s life easy and make them revisit your site.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Have you ever visited a website with a lengthy explanation of the topic you are looking for? Did you find yourself reading the full article? Like most users, your eyes probably got tired from looking at too many words or gave up upon failing to find the required information. On the other hand, there is [&hellip;]<\/p>\n","protected":false},"author":1809,"featured_media":91735,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-91734","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-about-wp-themes"],"_links":{"self":[{"href":"https:\/\/preview.vwthemesdemo.com\/old_website\/wp-json\/wp\/v2\/posts\/91734","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/preview.vwthemesdemo.com\/old_website\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/preview.vwthemesdemo.com\/old_website\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/preview.vwthemesdemo.com\/old_website\/wp-json\/wp\/v2\/users\/1809"}],"replies":[{"embeddable":true,"href":"https:\/\/preview.vwthemesdemo.com\/old_website\/wp-json\/wp\/v2\/comments?post=91734"}],"version-history":[{"count":1,"href":"https:\/\/preview.vwthemesdemo.com\/old_website\/wp-json\/wp\/v2\/posts\/91734\/revisions"}],"predecessor-version":[{"id":91736,"href":"https:\/\/preview.vwthemesdemo.com\/old_website\/wp-json\/wp\/v2\/posts\/91734\/revisions\/91736"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/preview.vwthemesdemo.com\/old_website\/wp-json\/wp\/v2\/media\/91735"}],"wp:attachment":[{"href":"https:\/\/preview.vwthemesdemo.com\/old_website\/wp-json\/wp\/v2\/media?parent=91734"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/preview.vwthemesdemo.com\/old_website\/wp-json\/wp\/v2\/categories?post=91734"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/preview.vwthemesdemo.com\/old_website\/wp-json\/wp\/v2\/tags?post=91734"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}