{"id":11245,"date":"2023-08-15T15:00:26","date_gmt":"2023-08-15T13:00:26","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=11245"},"modified":"2023-08-15T16:30:40","modified_gmt":"2023-08-15T14:30:40","slug":"add-table-of-content-to-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/add-table-of-content-to-wordpress\/","title":{"rendered":"How to Add a Table of Contents to Your WordPress Posts"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]If you are looking for a way to improve the user experience of your WordPress website and allow your visitors a clearer view of your content\u2019s structure, we recommend adding a list of your headings with clickable links that will lead them directly to the section they want to read. Better known as a <strong>table of contents<\/strong>, this element is used by a great number of websites across the web. Wikipedia is a well-known example of a website that has incorporated this system quite successfully.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Wikipedia.jpg\" class=\"attachment-full size-full\" alt=\"Table of Contents Wikipedia\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Wikipedia.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Wikipedia-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Wikipedia-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Before we talk further about how you can add a table of contents to WordPress, let\u2019s see why you might need one in the first place.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Why Use Table of Contents on Your WordPress Site<\/h2>\n<p>[\/vc_column_text][vc_column_text]As we already mentioned above, <strong>a table of contents can improve the UX of your website as it allows your visitors to get around your page or post more easily<\/strong>. In other words, they will reach the sections they\u2019re interested in faster, and will also be able to explore your content in a more practical and efficient manner. We have to note that this system particularly comes in handy if your page or post contains large chunks of content, such as long-read articles.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Another reason why you should consider using a table of contents is because it can generally <strong>improve the SEO of your WordPress website<\/strong>. Namely, if you incorporate this system to a particular page or post, Google will automatically add a \u201cjump to\u201d link in the snippet search result that will lead users directly to the section they are interested in, or rather, to the heading that can be found on your page or post. In other words, if your visitors type in the keywords that can be found in your table of contents, this will make your page more likely to appear in the top results.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Google-Search-Jump-to-Form.jpg\" class=\"attachment-full size-full\" alt=\"Google Search Jump to Form\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Google-Search-Jump-to-Form.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Google-Search-Jump-to-Form-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Google-Search-Jump-to-Form-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Aside from adding a table of contents to your pages or posts, you will also be able to insert one into your sidebar. We\u2019re going to show you how to add a table of contents to WordPress with the help of Qi Addons for Elementor and the <a href=\"https:\/\/wordpress.org\/plugins\/easy-table-of-contents\/\" target=\"_blank\" rel=\"noopener noreferrer\">Easy Table of Contents plugin<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]And to illustrate the benefits of this feature and help you get around more easily, we\u2019ve decided to add a table of contents ourselves. These are the topics we will cover: [\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#using-qi-addons\">Adding a Table of Contents Using Qi Addons<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#setting-up-easy-table-plugin\">Setting Up the Easy Table of Contents Plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-a-table-of-contents-to-a-wordpress-page-or-post\">Adding a Table of Contents to a WordPress Page or Post<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-a-table-of-contents-to-wordpress-sidebar\">Adding a Table of Contents to Your WordPress Sidebar<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;qi-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"using-qi-addons\"><\/a>Adding a Table of Contents Using Qi Addons<\/h2>\n<p>[\/vc_column_text][vc_column_text]If you\u2019re using Elementor, the hands-down easiest way to add a table of contents to your posts is to use <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/\" target=\"_blank\" rel=\"noopener\">Qi Addons for Elementor<\/a>. It\u2019s a collection of 100+ free and premium widgets for the popular page builder that expand the functionality of Elementor and help you add advanced features that range from typography and showcase to SEO and business (and everything in between). The <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/table-of-contents\" target=\"_blank\" rel=\"noopener\">Table of Contents widget<\/a> is a free widget and all you need to do in order to use it is to have Elementor installed on your website, and to download the Qi Addons plugin.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After installing the plugin, all the widgets will automatically be added to the standard range of Elementor widgets and you can add them just like you would add any other widget.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Go to the post you want to add the table of contents to and find the right spot for it. Usually, it\u2019s placed just below the introduction, or below the title.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Click on the + sign in your editor to add a new widget. In the left-hand menu, search for the widget by typing \u201cTable of Contents\u201d in the search bar.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Add-Widget-Table-of-Contents.jpg\" class=\"attachment-full size-full\" alt=\"Add Widget Table of Contents\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Add-Widget-Table-of-Contents.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Add-Widget-Table-of-Contents-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Add-Widget-Table-of-Contents-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Add-Widget-Table-of-Contents-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The widget you need is the red one on the left. The other one is an Elementor Pro widget. If you\u2019re using Elementor Pro, you can pick between these two. We\u2019re sticking with the Qi widget.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Drag and drop the widget into an empty element on your page. By default the widget will look like this:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"416\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Default-Look.jpg\" class=\"attachment-full size-full\" alt=\"Table of Contents Default Look\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Default-Look.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Default-Look-300x129.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Default-Look-768x330.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Default-Look-620x266.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Notice that the widget has automatically detected your subheadings (in order for this to happen, they need to be H-tag headings (H2, H3, H4\u2026). If you have hierarchical subheadings (for instance, an H2 section can contain several H3 or H4 sections), these will be hierarchically represented in your table of contents.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In the example we\u2019re using, we only have a couple of H2\u2019s, so we don\u2019t need a hierarchy, and we also don\u2019t need a subtitle or a title for your table of contents. We\u2019ll delete those using the editing menu to the left &#8211; simply delete the dummy text and they will disappear.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We\u2019ll also delete the introductory text. Of course, you\u2019re free to keep any of these, if you need them. They are particularly suitable for longform posts with a lot of text and a lot of subheadings.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-General-1.jpg\" class=\"attachment-full size-full\" alt=\"Table of Contents General\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-General-1.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-General-1-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-General-1-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-General-1-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The menu also includes the option of limiting the table of contents to main page contact too. It\u2019s set to \u201cNo\u201d by default, meaning you can add other site content, like in the example above, such as related posts, contact page, social feeds, etc. If you don\u2019t need those, toggle the switch to \u201cYes.\u201d<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]There\u2019s also a very useful option of excluding certain H tags (for example, if you only want to include subheadings H2 and H3 but not H4), as well as classes and IDs.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Limit-ToC.jpg\" class=\"attachment-full size-full\" alt=\"Limit ToC\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Limit-ToC.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Limit-ToC-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Limit-ToC-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Limit-ToC-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now you can style the table of contents using the <em><strong>Style<\/strong><\/em> tab in the editor. Here you can set the typography options for the subtitle, title and text.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/ToC-Style-Tab.jpg\" class=\"attachment-full size-full\" alt=\"ToC Style Tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/ToC-Style-Tab.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/ToC-Style-Tab-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/ToC-Style-Tab-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/ToC-Style-Tab-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Scrolling down, you\u2019ll find <em>Spacing Style<\/em> options, which we\u2019ll also leave as they are. We\u2019ll move on to <em><strong>List Style<\/strong><\/em> set of options, where you can decide whether you want your table of contents to be ordered or unordered. If you opt for ordered, the items in your table of contents will be numbered.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<em>List Style Position<\/em> determines whether your list will be inside or outside of the element, and under List Style you can decide what you want your bullets to look like (the options include Disc, Circle, Square and None).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, here you can also set the <em>List Hover Underline<\/em> (it\u2019s set to \u201cYes\u201d by default, meaning an underline will appear under a list item when a user hovers over it).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/ToC-List-Style.jpg\" class=\"attachment-full size-full\" alt=\"ToC List Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/ToC-List-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/ToC-List-Style-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/ToC-List-Style-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/ToC-List-Style-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After this, it\u2019s time to style the typography of your list. The <em><strong>Item Typography<\/strong><\/em> is the option you\u2019re looking for. Here you can set the font family (we changed ours to match the typography of the rest of the post), as well as weight, spacing, decoration and so on.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Toc-Item-Typography.jpg\" class=\"attachment-full size-full\" alt=\"Toc Item Typography\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Toc-Item-Typography.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Toc-Item-Typography-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Toc-Item-Typography-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Toc-Item-Typography-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And that\u2019s pretty much it when it comes to setting the basic styling and functional options. The final tab, <em><strong>Advanced<\/strong><\/em>, features additional options for your table of contents. We won\u2019t go through them separately, but you can play around with the options and tweak the layout with margins and padding; add a motion effect if you want your table of contents to, for instance, fade in or out when the user reaches it, use the Transform options to have the section skew or flip; add a background or a border, and set the additional responsive options.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Advanced.jpg\" class=\"attachment-full size-full\" alt=\"Advanced\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Advanced.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Advanced-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Advanced-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Advanced-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As we saw, using the Table of Contents widget is very easy and intuitive, and it comes with a rich selection of options to tweak your list just right.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you\u2019re a Gutenberg user, note that <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/\" target=\"_blank\" rel=\"noopener\">Qi Blocks for Gutenberg<\/a> have an almost identical <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/table-of-contents\" target=\"_blank\" rel=\"noopener\">Table of Contents block<\/a> with almost identical styling options.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If, for whatever reason, you don\u2019t want to use either of these solutions, there\u2019s another, albeit less rich plugin you can use, so let\u2019s check it out.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"setting-up-easy-table-plugin\"><\/a>Setting Up the Easy Table of Contents Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]<a href=\"https:\/\/wordpress.org\/plugins\/easy-table-of-contents\/\" target=\"_blank\" rel=\"noopener\">Easy Table of Contents<\/a> is an extremely popular plugin that is just as easy to use and set up as its name suggests. Before we move any further into how to use it to add a table of contents to your WordPress website, let\u2019s go through some of the plugin\u2019s settings first.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Easy-Table-of-Contents.jpg\" class=\"attachment-full size-full\" alt=\"Easy Table of Contents\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Easy-Table-of-Contents.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Easy-Table-of-Contents-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Easy-Table-of-Contents-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After you <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-a-wordpress-plugin\/\">install the plugin<\/a> and activate it in your WordPress dashboard, go to <em><strong>Settings &gt;&gt; Table of Contents<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Settings-Table-of-Contents.jpg\" class=\"attachment-full size-full\" alt=\"Settings Table of Contents\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Settings-Table-of-Contents.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Settings-Table-of-Contents-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Settings-Table-of-Contents-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once there, you will be able to manage the plugin\u2019s <em><strong>General<\/strong><\/em> settings. This includes the options to enable the support for table of contents on pages, posts, custom CSS, and so on.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-General.jpg\" class=\"attachment-full size-full\" alt=\"Table of Contents General\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-General.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-General-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-General-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Similarly, you will be able to set the <em>Auto Insert<\/em> option, which will automatically add a table of contents for each post type. Personally, we do not recommend that you add a table of contents to all your posts unless they\u2019re all lengthy by nature.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Auto-Insert.jpg\" class=\"attachment-full size-full\" alt=\"Table of Contents Auto Insert\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Auto-Insert.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Auto-Insert-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Auto-Insert-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Note that the table of contents will be automatically added only to post types where the table of contents support has been enabled.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can also choose the position of your table of contents, select the number of headings that your page or post needs to have in order to make the table of contents appear (the default number is 4, but you can change it to any other number), choose whether to display the header label or not (and specify the header label name) and more.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Table of Contents Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Settings.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Settings-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Settings-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next comes the <em>Appearance<\/em> tab where you can set all appearance-related options when it comes to your table of contents. This includes width, title font size, weight, and so on.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Appearance.jpg\" class=\"attachment-full size-full\" alt=\"Table of Contents Appearance\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Appearance.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Appearance-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Appearance-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Another useful option that you can set here is the theme for your table of contents. There are a few different themes you get to choose, and you can also create a custom theme by changing its background color, border color, title color, link color, etc. You should keep in mind, however, that you will be able to apply the theme settings only if your table of contents is inserted into a page or post, while the table of contents widget will automatically be set to match the widget styles of the <a href=\"https:\/\/qodeinteractive.com\/themes-list\/\">WordPress theme<\/a> you\u2019re using.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Adittional-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Table of Contents Adittional Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Adittional-Settings.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Adittional-Settings-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Adittional-Settings-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, in the <em>Advanced<\/em> settings section, you can set all of your anchors to be lowercase, set the hyphenation, set which headings you want to include in your table of contents, ranging from h1 to h6, and more.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"450\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Advanced.jpg\" class=\"attachment-full size-full\" alt=\"Table of Contents Advanced\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Advanced.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Advanced-300x193.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Advanced-620x399.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you\u2019re done with adjusting all the settings according to your preferences, don\u2019t forget to hit the <em>Save changes<\/em> button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Save-Changes.jpg\" class=\"attachment-full size-full\" alt=\"Table of Contents Save Changes\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Save-Changes.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Save-Changes-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Save-Changes-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"adding-a-table-of-contents-to-a-wordpress-page-or-post\"><\/a>Adding a Table of Contents to a WordPress Page or Post<\/h2>\n<p>[\/vc_column_text][vc_column_text]If you have enabled the auto-insertion option, then your table of contents will be added to each of your posts automatically (for each article that has more than 4 headings, but you can change this number according to your preferences). That being said, you can also change these settings when needed on a page or post itself.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After you find a post\/page you want to add a table of contents to (by going to <em>Pages &gt;&gt; All Pages\/Posts &gt;&gt; All Posts<\/em>), click on edit of the page\/post in question, or go to <em>Pages\/Posts &gt;&gt; Add New<\/em> in case you wish to add it to an entirely new page or post.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You will see that an entirely new section has appeared in the page\/post editing screen, named <em>Table of Contents<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-on-Page.jpg\" class=\"attachment-full size-full\" alt=\"Table of Contents on Page\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-on-Page.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-on-Page-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-on-Page-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Here, you will get to disable the automatic insertion for this particular page or post, and also set the heading level you wish to appear as table items (Heading 1, Heading2, Heading 3, etc.).<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Changing any of the settings in this screen will override the preexisting settings (the ones you set in the <em>General<\/em> settings tab) <strong>when it comes to this page\/post only<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After you\u2019re done with adding all the content that you want to your page or post, you can preview the page and see what your table of contents looks like.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Table of Contents Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Preview.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Preview-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Preview-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Your table of contents will be located right above your article\u2019s first heading. Clicking on any of the available links in your list of contents will lead your readers to the specific section they are interested in.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"adding-a-table-of-contents-to-wordpress-sidebar\"><\/a>Adding a Table of Contents to Your WordPress Sidebar<\/h2>\n<p>[\/vc_column_text][vc_column_text]The Easy Table of Contents plugin also comes with a widget that allows you to add your table of contents to your WordPress sidebar.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To do this, go to <em>Appearance &gt;&gt; Widgets<\/em> and find a widget named <em>Table of Contents<\/em> in the list of available widgets.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Widget.jpg\" class=\"attachment-full size-full\" alt=\"Table of Contents Widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Widget.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Widget-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Widget-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, simply add your widget by dragging it to your sidebar area on the right, or click on the widget and then hit the<em> Add Widget<\/em> button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Add-to-Widget.jpg\" class=\"attachment-full size-full\" alt=\"Table of Contents Add to Widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Add-to-Widget.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Add-to-Widget-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Add-to-Widget-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you click on the Table of Contents widget in the sidebar area, you will be able to change its title, and also select the highlight color of the active section.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Widget-Area.jpg\" class=\"attachment-full size-full\" alt=\"Table of Contents Widget Area\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Widget-Area.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Widget-Area-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/08\/Table-of-Contents-Widget-Area-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;90px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Wrapping Up<\/h2>\n<p>[\/vc_column_text][vc_column_text]A table of contents is a must-have feature on any website or blog that has long-form text content. In case this applies to your WordPress site, we highly recommend adding this useful tool to your page, post, or sidebar area using Qi Addons for Elementor or Qi Blocks for Gutenberg. These two remarkable plugins will not only help you add a table of contents with great ease, but you\u2019ll also be able to use other widgets\/blocks that come with the collection. If you want to use a single plugin created specifically for this purpose, you can opt for the Easy Table of Contents. Whatever you decide, it\u2019s clear that creating a table of contents is so easy there\u2019s really no excuse for not using it &#8211; if your blogging style warrants it, of course.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>If you have a website or blog with long text, consider adding a table of contents. We\u2019ll show you how to add a table of contents in WordPress using a plugin.<\/p>\n","protected":false},"author":2,"featured_media":11288,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,4,13],"class_list":["post-11245","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/11245","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=11245"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/11245\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/11288"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=11245"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=11245"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=11245"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}