It can be discouraging to spend time crafting content for your website, only to have users quickly click away. Since most people scan text on the web, you may have better luck holding their attention if they can skip right to what they’re looking for, by providing them with a table of contents in WordPress.

A table of contents can make it a lot easier for readers to find exactly what they’re interested in, especially with longer content. It can also be helpful for Search Engine Optimization (SEO). Fortunately, whether you have some coding knowledge or you’re a complete beginner, adding a table of contents is a pretty simple process.

In this post, we’ll show you three ways to create a table of contents for a WordPress site, including using plugins and a manual approach.

Three ways to create a WordPress table of contents

Here are the three methods we’ll cover – you can click below to jump straight to a specific technique:

1. Use a dedicated plugin
2. Create your table of contents using blocks
3. Build a table of contents manually

1. Use a dedicated plugin

Using a plugin is a quick and easy way to add a table of contents to your posts or pages. Easy Table of Contents is a free tool that automatically generates a table of contents based on the headings in your text:

Install the plugin

Configure the plugin’s general settings

Next, you can tweak the plugin’s settings to your liking. Navigate to Settings > Table of Contents to find all of the available options:

First, you can determine which post types the plugin will support. Pages is selected by default, but you can choose any combination of the available settings.

Next, you can choose which post types will have a table of contents automatically generated and inserted. Note that you’ll need first to enable support for each post type you’d like a table of contents generated for.

Then you can decide where you’d like the table of contents to show up. You can place it before or after the first heading, or at the very top or bottom of the post:

You can also control how many headings need to be present before the table of contents is included. This is handy if you have a combination of long and short content, as you may not want a table of contents for your briefer posts:

After that, you can use the Header Label field to give whatever title you’d like to the table of contents. You can also choose whether to allow users to hide the feature. If you enable this option, readers can click a button to collapse the table:

You can also hide the table of contents by default by checking the Initial View box. This means that users will need to click on the button to display the information.

The last of the general settings enable you to tweak the table’s hierarchy and counters. If you check Show as Hierarchy, the table of contents will display subheadings as well as your main headings, like this:

Using the Counter drop-down menu, you can choose how each heading will be numbered. You can select from decimals, numerals, Roman numerals, or nothing:

Configure the plugin’s design settings

Next, you may want to make changes to your table of contents’ appearance with the following group of settings. You can control the width, as well as whether the table appears on the left, right, or center of the screen. If you’d like to alter the size of the font, you can do that here as well:

You can also choose from one of the plugin’s preset color themes. If none of them work well with your website, you can select Custom and define your own colors:

After changing any settings, be sure to click on the Save Changes button at the bottom of the page. Your table of contents should automatically appear according to your configuration settings.

2. Create your table of contents using blocks

You can also use the default WordPress Block Editor to add a table of contents to WordPress. First, you’ll need to download and activate the free Ultimate Addons for Gutenberg plugin:

To add a table of contents to your page or post while working in the Block Editor, click on the plus sign and search for Table of Contents. This block will automatically generate a table based on your post’s headings, but there are also plenty of settings you can experiment with.

Under the General options, you’re able to select which heading levels will be included in the table. You may want to remove lower levels to keep your table of contents looking neat:

The Scroll settings enable you to turn on Smooth Scroll. When you select this option, readers can click on an entry in the table and ‘smoothly’ scroll to that section instead of jumping straight there.

You can also add a Scroll to Top button that will appear as readers move down the page. When you enable this setting, you’ll be able to select the colors for the button:

Next, let’s have a look at the Content settings. The first group of options is related to the table’s heading. You can adjust the text alignment, color, and even font:

As with the Easy Table of Contents plugin, you can choose to make your table collapsible. If you’d like, the table can be collapsed initially, so users need to click on it to view it. In addition, you can select and customize the icon that’s displayed:

The last of the Content settings enables you to make changes to how the block displays the list of contents. You’re able to change the color of the bullet points or disable them entirely. You can also choose colors for the contents, including the hover color:

Finally, there are some Style settings. Here, you can select a background color for your table of contents. You can also adjust the width of the table, and even add a fancy border:

One advantage of using a block to add your table of contents is that you can style each table differently if you’d like.

3. Build a table of contents manually

The last method we’ll look at is building a table of contents manually using the Block Editor’s built-in functionality. This method offers less potential for customization, but is useful if you want to avoid adding another plugin to your site.

Since the editor doesn’t include a table of contents block by default, you can make your own using a simple list element:

For the section’s title, you can use a Heading block or just text (we recommend the former, as it’s better for SEO). Once you list every element within the post you’re working on, all that’s left to do is to add links to those sections.

The simplest way to do this is to navigate to the subheading for each section within the list, and open the Advanced tab within that block’s settings. You’ll see a field called HTML anchor, where you can enter a unique identifier for that block:

The anchor itself should be a single word, and it needs to be unique. Also, keep in mind that you can’t re-use the same identifier for multiple elements. For a section called “What Is Web Hosting?”, you could create an anchor labeled “webhosting”.

Then return to your table of contents, and select the entry within the list that corresponds to the section you want to link to. Add a link that includes the HTML anchor you just set preceded by a # sign, for example “#webhosting”:

Now when someone clicks on that link within your table of contents, their browser will automatically jump to the corresponding section. Just make sure you don’t set the link to open in a new page.

Repeat this process for every element within your table of contents, and you’ll be good to go. If you want the table itself to stand out visually, you can access the block’s settings and change its background color:

Once you find a style you’re comfortable with, save the changes to your post, and that’s it!

Conclusion

Add Automatic Table Of Contents In Blogger Posts. Please don’t forget to Like, Share, Comment and Subscribe to our Techno Vedant Channel for more videos.

Read More: গণিতের ভিত না গণিতের ভীতি? ঠিক করবেন আপনিই

Table Of Contents Code:

Be sure to backup the Blogger template

1) Copy and Paste above </head> tag in your HTML Code of Blogger

<link href=’http://fonts.googleapis.com/css?family=Oswald’ rel=’stylesheet’ type=’text/css’/><script type=’text/javascript’> //<![CDATA[ //*************TOC Plugin V2.0 function mbtTOC2(){var a=1,b=0,c=””;document.getElementById(“post-toc”).innerHTML=document.getElementById(“post-toc”).innerHTML.replace(/<h([\d]).*?>(.*?)<\/h([\d]).*?>/gi,function(d,e,f,g){return e!=g?d:(e>a?c+=new Array(e-a+1).join(“<ol class=’point”+a+”‘>”):e<a&&(c+=new Array(a-e+1).join(“</ol></li>”)),b+=1,c+='<li><a href=”#point’+b+'”>’+f+”</a>”,a=parseInt(e),”<h”+e+” id=’point”+b+”‘>”+f+”</h”+g+”>”)}),a&&(c+=new Array(a+1).join(“</ol>”)),document.getElementById(“mbtTOC2”).innerHTML+=c}function mbtToggle2(){var a=document.getElementById(“mbtTOC2”),b=document.getElementById(“Tog”);”none”===a.style.display?(a.style.display=”block”,b.innerHTML=”hide”):(a.style.display=”none”,b.innerHTML=”show”)} //]]> </script>

2) Search ]]></b:skin> code and just above it paste the following CSS code:

/*####TOC Plugin V2.0*/ .mbtTOC2{ border:5px solid #0008FC ; border-radius: 10px 50px 10px 50px; box-shadow:5px 5px 5px 5px grey; border-style:dashed; background-color:#ACDEFB; color:#707037; line-height:1.4em; margin:30px auto; padding:20px 30px 20px 10px; font-family:Oswald, arial; display: block;width: 70%; } .mbtTOC2 button{ background:#ACDEFB; font-family:oswald, arial; font-size:22px; position:relative; outline:none; border:none; color:#2E2E2E; padding:0 0 0 15px; } .mbtTOC2 button a { color:#FF0313; padding:0px 2px; cursor:pointer; } .mbtTOC2 button a:hover{ text-decoration:underline; } .mbtTOC2 button span { font-size:15px; margin:0px 10px; } .mbtTOC2 li{margin:10px 0; } .mbtTOC2 li a { color:#EA1414; text-decoration:none; font-size:18px; text-transform:capitalize; } .mbtTOC2 li a:hover { text-decoration: underline; } .mbtTOC2 li li {margin:14px 0px;} .mbtTOC2 li li a{ color:#040404; font-size:15px; } .mbtTOC2 ol{counter-reset:section1;list-style:none} .mbtTOC2 ol ol{counter-reset:section2} .mbtTOC2 ol ol ol{counter-reset:section3} .mbtTOC2 ol ol ol ol{counter-reset:section4} .mbtTOC2 ol ol ol ol ol{counter-reset:section5} .mbtTOC2 li:before{content:counter(section1);counter-increment:section1;position:relative;padding:0 8px 0 0;font-size:18px} .mbtTOC2 li li:before{content:counter(section1) “.” counter(section2);counter-increment:section2;font-size:14px} .mbtTOC2 li li li:before{content:counter(section1) “.”counter(section2) “.” counter(section3);counter-increment:section3} .mbtTOC2 li li li li:before{content:counter(section1) “.”counter(section2) “.”counter(section3) “.” counter(section4);counter-increment:section4} .mbtTOC2 li li li li li:before{content:counter(section1) “.”counter(section2) “.”counter(section3) “.” counter(section4)”.” counter(section5);counter-increment:section5} /* .point2 {list-style-type:lower-alpha} .point3 {list-style-type:lower-roman} .point4 {list-style-type:disc} */