How to Create a Table of Contents in WordPress Without Plugin (+Manually Using HTML and CSS)

In the new WordPress Block Editor, adding a table of contents (TOC) is very easy. You don’t need any extra plugin for that. In this article, we will show you how to add a table of content in WordPress posts and pages without a plugin using HTML Anchor text and CSS.

In our blog, we always create a table of contents for each post and page manually as using plugins for everything is not good for your site performance. We also recommend you to follow this article to add a table of contents manually.

Why You Should Add Table of Contents in WordPress?

1. A table of contents in long a post or a page helps users to see a quick overview of the article.
2. If you use a table of contents for a long article, visitors can easily jump to a certain section of your article they want to read first. Therefore, you should start adding the table of contents (TOC) in WordPress to improve the user experience.
3. Nowadays, sometimes, Google shows Jump to links in Search Engine Results Pages (SERPs). Your visitors can directly click a link and instantly reach a specific part of your content they want to read first. These links only appear if you start adding a table of contents using HTML Anchor text.

Steps by Step Guide for Creating a Table of Contents in WordPress Without Plugin

Step -1: Finish Your Writing First

Before adding a table of contents, first finish writing your article with appropriate headings and subheadings h1, h2, h3, etc.

Step-2: Create a Heading for Table of Contents

Go to the section where you want to create a table of contents and add a heading for the table of contents (TOC). The common heading is “Table of Contents”. You may use another heading also.

Note that it always better to create a table of contents just before the first heading.

Step -3: Create a List of Contents

After creating a heading, you have to create a list for headings and subheadings just below to the table of contents heading.

To create a list, you may either use a list block or you may create it manually.

In the list, copy and paste all the headings one by one. We used to create a table of contents only for h2 and h3 headings. You also use h3, h4, etc depending upon the structure of your article.

Step-4: Add CSS Class Names

• First, select both tables of content heading and list of contents block and transform them into a group block.

• Add a CSS class name for the whole Group block in the CSS Class field under the advanced section. Let’s say the class name is wp-table-of-contents.

• Select table of contents heading and give a CSS class name wp-toc-heading.

• Next, select the list block and add a CSS class name wp-toc-contents.

Note that if you want, you can use other CSS Class names. But you have to always remember these class names to create the same table of contents in other posts and pages.

Step-5: Add HTML Anchor Text for the Headings

Now, you have to add HTML Anchor text for the headings you have added in the list-block of your table of contents.

• Go to the heading and select a heading block
• Click on the Advanced on the right side under Block Settings.
• Under the advanced section, add a unique HTML anchor text for each heading separated by a hyphen or by an underscore. You have to repeat this process for all the headings.

HTML Anchor Syntax

• HTML anchor should be unique within a post
• The HTML anchor is case-sensitive
• In your HTML anchor field, you can include symbols like hyphen (-), underscore (_), colon (:), period (.) but you are not able to include space
• All of your HTML anchors must start in the alphabet

Step-6: Link to Your HTML Anchor with Table of Contents

Copy the HTML Anchor text you have created for each heading and paste the same HTML Anchor text for the same heading with a # tag in the list-block of your table of contents section.

Step-7: Style your Table of Contents

To style your table of contents, add the following CSS code in the Additional CSS section of your theme. Navigate to Appearance > Customize > Additional CSS and paste it.

.wp-table-of-contents {
    background-color: #fff;
    padding: 14px 18px 18px;
	  margin-bottom: 20px;
    margin-top: 40px;
	border: 2px solid #1b78e2;
}

.wp-toc-heading {
    font-weight: 900;
    font-size: 16px;
	  text-align: center;
	  background-color: #efefef;
}

ul.wp-toc-contents {
    margin-top: -1em;
}

.wp-toc-contents li {
    list-style-type: none;
    position: relative;
    margin-bottom: 5px;
}

.wp-toc-contents a:hover {
    color: #FF5722;
    border-bottom: 2px solid #585858;
}

Final Words

Creating a table of contents in WordPress without a plugin is quite easy and simple. Thanks to WordPress’s new block editor. If you are not comfortable adding a table of contents manually, you may add a table of contents using plugins like Fixed TOC, Easy Table of Contents, Table of Contents Plus, etc.