{"id":1977,"date":"2024-02-04T09:41:49","date_gmt":"2024-02-04T09:41:49","guid":{"rendered":"https:\/\/wptablebuilder.com\/?p=1977"},"modified":"2024-02-04T09:41:58","modified_gmt":"2024-02-04T09:41:58","slug":"add-table-of-contents-wordpress","status":"publish","type":"post","link":"https:\/\/wptablebuilder.com\/de\/add-table-of-contents-wordpress\/","title":{"rendered":"How to Add Table of Contents In WordPress (With\/out A Plugin)"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Having a table of contents in your WordPress posts\/pages makes it easy to navigate and gives users an option to jump to their point of interest. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It also helps you to get more clicks from Google search results as Google shows a table of contents links in the SERPs. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So if you are not using the table of contents on your WordPress posts and pages, you should start using a table of contents for your long content. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Like everything, you can do it by using a WordPress plugin. You can also do it without using a plugin. I&#8217;ll show you both ways. <\/p>\n\n\n<div class=\"wp-block-ub-table-of-contents-block ub_table-of-contents\" id=\"ub_table-of-contents-2cb05065-3ed3-4e30-93b7-f7e273b7f83f\" data-linktodivider=\"false\" data-showtext=\"show\" data-hidetext=\"hide\" data-scrolltype=\"auto\" data-enablesmoothscroll=\"false\" data-initiallyhideonmobile=\"false\" data-initiallyshow=\"true\"><div class=\"ub_table-of-contents-header-container\" style=\"background-color: var(--ast-global-color-0); color: var(--ast-global-color-5); \">\n\t\t\t<div class=\"ub_table-of-contents-header\" style=\"text-align: left; \">\n\t\t\t\t<div class=\"ub_table-of-contents-title\" style=\"color: var(--ast-global-color-5); \">Table of Contents:<\/div>\n\t\t\t\t\n\t\t\t<\/div>\n\t\t<\/div><div class=\"ub_table-of-contents-extra-container\" style=\"\">\n\t\t\t<div class=\"ub_table-of-contents-container ub_table-of-contents-1-column\">\n\t\t\t\t<ul style=\"\"><li style=\"color: var(--ast-global-color-8); \"><a href=\"https:\/\/wptablebuilder.com\/de\/add-table-of-contents-wordpress\/#0-adding-table-of-contents-without-using-a-plugin\" style=\"\">Adding Table Of Contents Without Using A Plugin<\/a><ul><li style=\"color: var(--ast-global-color-8); \"><a href=\"https:\/\/wptablebuilder.com\/de\/add-table-of-contents-wordpress\/#1-step-1-make-a-list-of-the-contents\" style=\"\">Step 1: Make A List Of The Contents<\/a><\/li><li style=\"color: var(--ast-global-color-8); \"><a href=\"https:\/\/wptablebuilder.com\/de\/add-table-of-contents-wordpress\/#2-step-2-highlight-the-contents-as-header-amp-add-html-anchor\" style=\"\">Step 2: Highlight The Contents As Header &amp; Add HTML Anchor<\/a><\/li><li style=\"color: var(--ast-global-color-8); \"><a href=\"https:\/\/wptablebuilder.com\/de\/add-table-of-contents-wordpress\/#3-step-3-assign-anchors-to-the-table-of-contents\" style=\"\">Step 3: Assign Anchors To The Table Of Contents<\/a><\/li><\/ul><\/li><li style=\"color: var(--ast-global-color-8); \"><a href=\"https:\/\/wptablebuilder.com\/de\/add-table-of-contents-wordpress\/#4-adding-table-of-contents-using-a-plugin\" style=\"\">Adding Table Of Contents Using A Plugin<\/a><ul><li style=\"color: var(--ast-global-color-8); \"><a href=\"https:\/\/wptablebuilder.com\/de\/add-table-of-contents-wordpress\/#5-step-1-install-the-ultimate-blocks-plugin\" style=\"\">Step 1: Install the Ultimate Blocks Plugin<\/a><\/li><li style=\"color: var(--ast-global-color-8); \"><a href=\"https:\/\/wptablebuilder.com\/de\/add-table-of-contents-wordpress\/#6-step-2-insert-%E2%80%98table-of-contents%E2%80%99-block\" style=\"\">Step 2: Insert \u2018Table of Contents\u2019 Block<\/a><\/li><li style=\"color: var(--ast-global-color-8); \"><a href=\"https:\/\/wptablebuilder.com\/de\/add-table-of-contents-wordpress\/#7-step-3-configure-your-table-of-contents\" style=\"\">Step 3: Configure Your Table of Contents<\/a><ul><li style=\"color: var(--ast-global-color-8); \"><a href=\"https:\/\/wptablebuilder.com\/de\/add-table-of-contents-wordpress\/#8-conclusion\" style=\"\">Conclusion<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul>\n\t\t\t<\/div>\n\t\t<\/div><\/div>\n\n\n<p class=\"wp-block-paragraph\">Now let&#8217;s dive into the details.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"0-adding-table-of-contents-without-using-a-plugin\"><a id=\"post-1977-_xvg8aujmd05q\"><\/a>Adding Table Of Contents Without Using A Plugin<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You can add a table of contents to your WordPress post\/page without using a plugin.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">WordPress Block Editor (Gutenberg) makes it extremely easy. You don&#8217;t need to have any coding skills to add a table of contents. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Just follow these simple steps.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-step-1-make-a-list-of-the-contents\">Step 1: Make A List Of The Contents<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Just examine your page and make a note of the key sections on it. Chances are you already have headings for your content.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Once done, make a list of them at the beginning of the page. It may be numbered, <a href=\"https:\/\/wptablebuilder.com\/de\/best-wordpress-bullet-list-plugins\/\" target=\"_blank\" rel=\"noreferrer noopener\">bulleted<\/a>, or plain \u2013 whatever fits best.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The entries on the list give your visitor a gist of the content, so make sure you write captivating and crisp titles and keep the naming scheme for the table and the actual headings consistent.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"709\" src=\"https:\/\/wptablebuilder.com\/wp-content\/uploads\/2022\/08\/Make-a-list-of-contents-1024x709.png\" alt=\"\" class=\"wp-image-9771\" srcset=\"https:\/\/wptablebuilder.com\/wp-content\/uploads\/2022\/08\/Make-a-list-of-contents-1024x709.png 1024w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2022\/08\/Make-a-list-of-contents-300x208.png 300w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2022\/08\/Make-a-list-of-contents-768x532.png 768w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2022\/08\/Make-a-list-of-contents.png 1202w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-step-2-highlight-the-contents-as-header-amp-add-html-anchor\">Step 2: Highlight The Contents As Header &amp; Add HTML Anchor<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Now make sure that the subtitle you&#8217;re going to add to the table of contents is tagged as a heading. Then add the HTML anchor. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To add an anchor &#8211;<\/p>\n\n\n<ul style=\"padding-left: 1.1em;text-align: left;--ub-list-item-icon-top: 3px;--ub-list-item-icon-size: 0.9em;);--ub-list-item-fa-li-top: 3px;--ub-list-item-spacing: 0px;column-count: 1;--ub-list-mobile-column-count: 1\" class=\"wp-block-ub-styled-list ub_styled_list\" id=\"ub_styled_list-2d60a07e-bde6-46f1-98ba-1978f011e383\">\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-806cf1c4-e796-4b19-ae88-562bddaa0af6\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.9em\" height=\"0.9em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\">Select the heading and navigate to the \u2018Block\u2019 sidebar on the right.<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-1c3187b9-5320-4341-a3fc-b7969379c481\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.9em\" height=\"0.9em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\">Click on advanced, and you find the \u2018HTML Anchor&#8217; box.<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-8b076cbe-e949-4ea9-a2e6-ebab19c3492f\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.9em\" height=\"0.9em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\">Name your anchor the same as your heading to keep things consistent.<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n<\/ul>\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"693\" src=\"https:\/\/wptablebuilder.com\/wp-content\/uploads\/2022\/08\/Heading-and-HTML-Anchor-1024x693.png\" alt=\"\" class=\"wp-image-9772\" srcset=\"https:\/\/wptablebuilder.com\/wp-content\/uploads\/2022\/08\/Heading-and-HTML-Anchor-1024x693.png 1024w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2022\/08\/Heading-and-HTML-Anchor-300x203.png 300w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2022\/08\/Heading-and-HTML-Anchor-768x519.png 768w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2022\/08\/Heading-and-HTML-Anchor.png 1196w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Now create anchors for other headings as well. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-step-3-assign-anchors-to-the-table-of-contents\">Step 3: Assign Anchors To The Table Of Contents<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Now go back to the list you&#8217;ve created in Step 1. Highlight the first entry and click on the &#8216;Link&#8217; icon from the toolbar. Then enter the # symbol followed by the name given in the HTML Anchor. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"647\" src=\"https:\/\/wptablebuilder.com\/wp-content\/uploads\/2022\/08\/Assing-Anchor-to-the-Table-of-Contents-1024x647.png\" alt=\"\" class=\"wp-image-9773\" srcset=\"https:\/\/wptablebuilder.com\/wp-content\/uploads\/2022\/08\/Assing-Anchor-to-the-Table-of-Contents-1024x647.png 1024w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2022\/08\/Assing-Anchor-to-the-Table-of-Contents-300x190.png 300w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2022\/08\/Assing-Anchor-to-the-Table-of-Contents-768x485.png 768w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2022\/08\/Assing-Anchor-to-the-Table-of-Contents.png 1204w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Do the same things for other lists. And that&#8217;s it. You now have a Table of Contents. <\/p>\n\n\n<div class=\"wp-block-ub-divider ub_divider ub-divider-orientation-horizontal\" id=\"ub_divider_c9413e4e-48f5-450b-8c3e-9129c005c21c\"><div class=\"ub_divider_wrapper\" style=\"position: relative; margin-bottom: 2px; width: 100%; height: 2px; \" data-divider-alignment=\"center\"><div class=\"ub_divider_line\" style=\"border-top: 2px solid #ccc; margin-top: 2px; \"><\/div><\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"4-adding-table-of-contents-using-a-plugin\"><a id=\"post-1977-_peoecao0bzl3\"><\/a>Adding Table Of Contents Using A Plugin<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">There are several<a href=\"https:\/\/wptablebuilder.com\/de\/best-table-of-contents-plugins-for-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\"> WordPress plugins that let you add the table of contents<\/a> to your WordPress posts\/pages. Here I&#8217;ll be using the <a aria-label=\" (opens in a new tab)\" class=\"rank-math-link\" href=\"https:\/\/ultimateblocks.com\" target=\"_blank\" rel=\"noreferrer noopener\">Ultimate Blocks<\/a> plugin. It&#8217;s a Gutenberg Blocks plugin that offers a Table of Contents block. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Whenever you insert the &#8216;Table of Contents&#8217; block, it will automatically generate the table of contents from headings. Let&#8217;s see how to add a table of contents using Ultimate Blocks. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"5-step-1-install-the-ultimate-blocks-plugin\">Step 1: Install the Ultimate Blocks Plugin<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Ultimate Blocks is a free plugin that is available on WordPress.org. You can install the plugin directly from your WordPress dashboard. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Just go to WordPress Admin Panel &gt; Plugins &gt; Add New and search for &#8216;Ultimate Blocks&#8217;. The very first result will be the Ultimate Blocks plugin. Then click on the &#8216;Install&#8217; button and activate the plugin. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"502\" src=\"https:\/\/wptablebuilder.com\/wp-content\/uploads\/2021\/04\/Ultimate-Blocks-Installation.png\" alt=\"\" class=\"wp-image-4198\" srcset=\"https:\/\/wptablebuilder.com\/wp-content\/uploads\/2021\/04\/Ultimate-Blocks-Installation.png 1024w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2021\/04\/Ultimate-Blocks-Installation-300x147.png 300w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2021\/04\/Ultimate-Blocks-Installation-768x377.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You can also download the plugin from <a href=\"https:\/\/downloads.wordpress.org\/plugin\/ultimate-blocks.2.0.0.zip\" target=\"_blank\" aria-label=\"here (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"rank-math-link\">here<\/a> and upload it to your WordPress site. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"6-step-2-insert-%E2%80%98table-of-contents%E2%80%99-block\">Step 2: Insert \u2018Table of Contents\u2019 Block<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Now go to the WordPress post or page where you want to add the table of contents. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Just type \/ followed by &#8216;table&#8230;&#8217; and you will see the &#8216;Table of Contents&#8217; block. Just click on it. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"597\" src=\"https:\/\/wptablebuilder.com\/wp-content\/uploads\/2022\/08\/Table-of-Contents-Block-1024x597.png\" alt=\"\" class=\"wp-image-9774\" srcset=\"https:\/\/wptablebuilder.com\/wp-content\/uploads\/2022\/08\/Table-of-Contents-Block-1024x597.png 1024w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2022\/08\/Table-of-Contents-Block-300x175.png 300w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2022\/08\/Table-of-Contents-Block-768x448.png 768w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2022\/08\/Table-of-Contents-Block.png 1204w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">An automatically generated ToC will appear. It is entirely dynamic and updates itself with every change you make, leaving you free from the hassle of editing your ToC along the way.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"7-step-3-configure-your-table-of-contents\">Step 3: Configure Your Table of Contents<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">It isn&#8217;t a necessary step, but know that Ultimate Blocks gives you the flexibility of styling the ToC to suit your needs better. You may \u2013<\/p>\n\n\n<ul style=\"padding-left: 1.1em;text-align: left;--ub-list-item-icon-top: 3px;--ub-list-item-icon-size: 0.9em;);--ub-list-item-fa-li-top: 3px;--ub-list-item-spacing: 0px;column-count: 1;--ub-list-mobile-column-count: 1\" class=\"wp-block-ub-styled-list ub_styled_list\" id=\"ub_styled_list-7bb5e775-ee77-4714-83d9-d3d0933b86d5\">\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-eb17c783-b8ee-4112-b00d-b08cb06766f1\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.9em\" height=\"0.9em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\">Choose which headings to include or exclude.<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-1ab74881-0db9-4514-b928-0599d4579e1a\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.9em\" height=\"0.9em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\">List the contents in one, two, or three columns.<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-7b914531-21a7-4a62-a611-9c351f4206f8\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.9em\" height=\"0.9em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\">Change the styling of the list to Bulleted, Numbered, or Plain.<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-520e706a-bfc5-4ff0-884a-b4cca090456e\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.9em\" height=\"0.9em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\">Add a toggle that shows\/hides the ToC.<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n<\/ul>\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"676\" src=\"https:\/\/wptablebuilder.com\/wp-content\/uploads\/2022\/08\/Configure-Table-of-Contents-Block--1024x676.png\" alt=\"\" class=\"wp-image-9775\" srcset=\"https:\/\/wptablebuilder.com\/wp-content\/uploads\/2022\/08\/Configure-Table-of-Contents-Block--1024x676.png 1024w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2022\/08\/Configure-Table-of-Contents-Block--300x198.png 300w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2022\/08\/Configure-Table-of-Contents-Block--768x507.png 768w, https:\/\/wptablebuilder.com\/wp-content\/uploads\/2022\/08\/Configure-Table-of-Contents-Block-.png 1204w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Using a plugin is ideal if you&#8217;re looking for a more automated approach to creating a Table of Contents. <a id=\"post-1977-_20c3guncxa30\"><\/a><\/p>\n\n\n<div class=\"wp-block-ub-divider ub_divider ub-divider-orientation-horizontal\" id=\"ub_divider_c2f15a9a-4182-4235-b49e-b56a120971b7\"><div class=\"ub_divider_wrapper\" style=\"position: relative; margin-bottom: 2px; width: 100%; height: 2px; \" data-divider-alignment=\"center\"><div class=\"ub_divider_line\" style=\"border-top: 2px solid #ccc; margin-top: 2px; \"><\/div><\/div><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"8-conclusion\">Conclusion<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">If you run a site with tens or hundreds of pages of content, it can be challenging to create a ToC for each page manually. In such a case, it is simpler to opt for the plugin as it does most of the work for you.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Using anchor tags removes the need for a plugin and keeps your page nice and lightweight. If you\u2019re a newcomer, using anchor links is the better option, since it grants you control over your content.<\/p>\n\n\n<div class=\"wp-block-ub-social-share\" id=\"ub-social-share-fa56ac6d-97e2-42ee-b3e2-0d0cc5079347\">\n\t\t\t<div class=\"social-share-icons align-icons-center orientation-icons-row\"><a aria-label=\"facebook-logo\" target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Fwptablebuilder.com%2Fde%2Fadd-table-of-contents-wordpress%2F&amp;title=How%20to%20Add%20Table%20of%20Contents%20In%20WordPress%20%28With%2Fout%20A%20Plugin%29\" class=\"ub-social-share-facebook-container\" style=\"border-color: #1877f2; \">\n\t\t\t\t<span class=\"social-share-icon ub-social-share-facebook square\" style=\"width: 30px; height: 30px; \"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"fill:#ffffff\" fill=\"#ffffff\" width=\"20\" height=\"20\" viewbox=\"0 0 264 512\"><path d=\"M76.7 512V283H0v-91h76.7v-71.7C76.7 42.4 124.3 0 193.8 0c33.3 0 61.9 2.5 70.2 3.6V85h-48.2c-37.8 0-45.1 18-45.1 44.3V192H256l-11.7 91h-73.6v229\"><\/path><\/svg><\/span><span style=\"\">Share<\/span>\n\t\t\t<\/a><a aria-label=\"twitter-logo\" target=\"_blank\" rel=\"nofollow\" href=\"http:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Fwptablebuilder.com%2Fde%2Fadd-table-of-contents-wordpress%2F&amp;text=How%20to%20Add%20Table%20of%20Contents%20In%20WordPress%20%28With%2Fout%20A%20Plugin%29\" class=\"ub-social-share-twitter-container\" style=\"border-color: #1d9bf0; \">\n\t\t\t\t<span class=\"social-share-icon ub-social-share-twitter square\" style=\"width: 30px; height: 30px; \"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"color:#ffffff\" fill=\"#ffffff\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\"><path d=\"M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584l-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z\"><\/path><\/svg><\/span><span style=\"\">Tweet<\/span>\n\t\t\t<\/a><a aria-label=\"linkedin-logo\" target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=https%3A%2F%2Fwptablebuilder.com%2Fde%2Fadd-table-of-contents-wordpress%2F\" class=\"ub-social-share-linkedin-container\" style=\"border-color: #2867b2; \">\n\t\t\t\t<span class=\"social-share-icon ub-social-share-linkedin square\" style=\"width: 30px; height: 30px; \"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"fill:#ffffff\" fill=\"#ffffff\" width=\"20\" height=\"20\" viewbox=\"0 0 448 512\"><path d=\"M100.3 480H7.4V180.9h92.9V480zM53.8 140.1C24.1 140.1 0 115.5 0 85.8 0 56.1 24.1 32 53.8 32c29.7 0 53.8 24.1 53.8 53.8 0 29.7-24.1 54.3-53.8 54.3zM448 480h-92.7V334.4c0-34.7-.7-79.2-48.3-79.2-48.3 0-55.7 37.7-55.7 76.7V480h-92.8V180.9h89.1v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3V480z\"><\/path><\/svg><\/span><span style=\"\">Share<\/span>\n\t\t\t<\/a><\/div>\n\t\t<\/div>\n\n<div class=\"wp-block-ub-divider ub_divider ub-divider-orientation-horizontal\" id=\"ub_divider_2d9ea99a-f11b-457f-bbe1-bf34eb163f65\"><div class=\"ub_divider_wrapper\" style=\"position: relative; margin-bottom: 2px; width: 100%; height: 2px; \" data-divider-alignment=\"center\"><div class=\"ub_divider_line\" style=\"border-top: 2px solid #ccc; margin-top: 2px; \"><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Having a table of contents in your WordPress posts\/pages makes it easy to navigate and gives users an option to jump to their point of interest. It also helps you to get more clicks from Google search results as Google shows a table of contents links in the SERPs. So if you are not using [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4195,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-1977","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to"],"featured_image_src":"https:\/\/wptablebuilder.com\/wp-content\/uploads\/2021\/04\/Add-Table-of-Contents-in-WordPress.png","author_info":{"display_name":"Istiak Rayhan","author_link":"https:\/\/wptablebuilder.com\/de\/author\/wpx_roadtobl\/"},"_links":{"self":[{"href":"https:\/\/wptablebuilder.com\/de\/wp-json\/wp\/v2\/posts\/1977","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wptablebuilder.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wptablebuilder.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wptablebuilder.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wptablebuilder.com\/de\/wp-json\/wp\/v2\/comments?post=1977"}],"version-history":[{"count":0,"href":"https:\/\/wptablebuilder.com\/de\/wp-json\/wp\/v2\/posts\/1977\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wptablebuilder.com\/de\/wp-json\/wp\/v2\/media\/4195"}],"wp:attachment":[{"href":"https:\/\/wptablebuilder.com\/de\/wp-json\/wp\/v2\/media?parent=1977"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wptablebuilder.com\/de\/wp-json\/wp\/v2\/categories?post=1977"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wptablebuilder.com\/de\/wp-json\/wp\/v2\/tags?post=1977"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}