---
title: "How to Add a Table Of Contents in WordPress?"
url: https://nexterwp.com/docs/add-a-table-of-contents-in-wordpress/
date: 2024-12-03
modified: 2026-04-14
author: "Aditya Sharma"
description: "A table of contents not only provides your readers with a clear overview of the content but allows them to navigate easily to the sections that interest them most. With..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-Table-Of-Contents-in-WordPress_-1024x519.jpg
word_count: 838
---

# How to Add a Table Of Contents in WordPress?

## Key Takeaways

- Nexter Blocks offers a Table Of Contents block that is highly customizable for WordPress websites.
- The Table Of Contents block includes multiple styles, allowing users to choose from four pre-defined styles.
- Users can select between ordered and unordered list types for the Table Of Contents block.
- The Table Of Contents block supports features like smooth scroll and collapsible items for enhanced navigation.

A table of contents not only provides your readers with a clear overview of the content but allows them to navigate easily to the sections that interest them most.

With the Table Of Contents block from Nexter Blocks, you can add a highly customizable table of contents to your WordPress website.

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-table-of-contents/)

## Required Setup

- Make sure the default WordPress Block editor is active. 

- You need to have the [Nexter Blocks](https://wordpress.org/plugins/the-plus-addons-for-block-editor/) plugin installed and activated.

- This is a Premium block, and you need the [PRO version of Nexter Blocks](https://nexterwp.com/pricing/?utm_source=tpag&utm_medium=docs&utm_campaign=text).

- Make sure the Table Of Contents block is activated, to verify this visit Nexter → Blocks → and Search for Table Of Contents and activate.

## How to activate the Table Of Contents Block?

Go to 

- **Nexter **→ **Blocks **

- **Search **the block nameand**turn on the toggle**.

![](https://nexterwp.com/wp-content/uploads/2024/12/table-of-content-activation-new.png)

## Key Features

- **Multiple Styles** - You can choose from multiple pre-defined styles.

- **List Type** - You can easily select between ordered and unordered list types.

- **Select Tag** - You can manually include or exclude tags from the table of contents.

- **Child Collapsed** - You can easily show or collapse the child items in the table of contents.

- **Collapsible** - You can easily [make the table of contents collapsible](https://nexterwp.com/docs/create-a-collapsible-table-of-contents-in-wordpress/).

- **Smooth Scroll** - You can [add a smooth scroll to the table of contents for smooth navigation](https://nexterwp.com/docs/add-smooth-scrolling-effect-to-wordpress-table-of-contents/).

- **Fixed** - You can easily [make the table of contents sticky](https://nexterwp.com/docs/make-a-sticky-table-of-contents-in-wordpress/).

- **Hash Tag** - You can enable hashtags to easily link to a specific section.

- **Restrict Container Area** - You can easily restrict the table of contents to a specific area.

- **Exclude Title** - You can easily [exclude a title from the table of contents](https://nexterwp.com/docs/exclude-a-title-from-a-table-of-contents-in-wordpress/).

## How to Use the Table Of Contents Block?

Add the Table Of Contents block to the page.

> *Note:* To create the header template, you can use the free [Nexter Builder](https://nexterwp.com/docs/nexter-theme-builder-explained/).

### Layout

From the **List Type** section, you can select the list type. Here you’ll find two options - 

- **UL** - For creating an unordered list, i.e. it will add bullet points in the table of contents.

- **OL** - For creating an ordered list, i.e. it will add numbers in the table of contents.

Select the option as per your requirements.

Then, from the **Style** section, you can select a style for the table of contents. Here you’ll find 4 pre-defined styles and None for a no style option. 

Select the style as per your requirements, let’s select None here.

![](https://nexterwp.com/wp-content/uploads/2024/12/tableofcontent-layout.gif)

By enabling the **Child Collapsed** toggle, you can hide the child tag from the table of contents.

> *Note: Any lower heading tag, added after a higher heading tag, is considered as the child tag of the higher heading tag. For example, if a H4 is added below a H3 tag then the H4 title is the child tag of the above H3 title.* 

From the **Smooth Scroll** toggle, you can [add a smooth scroll to the table of contents](https://nexterwp.com/docs/add-smooth-scrolling-effect-to-wordpress-table-of-contents/).

By enabling the **Position Fixed** toggle, you can [make a sticky table of contents](https://nexterwp.com/docs/make-a-sticky-table-of-contents-in-wordpress/).

From the **Heading Content Offset** section, you can set the top offset value, i.e. the distance of the section heading from the top where the heading will be activated.

### Content

From the **Headings** section, you can include the tags (H1 to H6) you want to show in the table of contents.

![](https://nexterwp.com/wp-content/uploads/2024/12/tableofcontent-heading-selector.gif)

To show the page content in the table of contents, you have to add the main container ID (with the # tag) of the page in the **Content Selector** field. To find the main container ID, you have to use the browser inspect element feature. 

![](https://nexterwp.com/wp-content/uploads/2024/12/tableofcontent-heading-selector-demo.gif)

.

> *Note: The Nexter theme has “content” as the main container ID so we’ve used “#content”, your theme could have a different main container ID, you have to use that ID in the ****Content Selector**** field.*

### Table Title

By enabling the **Show Title** toggle, you can add different elements to the table of contents. When enabled, you’ll find the following options - 

From the **Title** section, you can add a title to the table of contents.

![](https://nexterwp.com/wp-content/uploads/2024/12/tableofcontent-title.gif)

In the **Description** section, you can add a description to the table of contents.

By enabling the **Main Icon** toggle, you can add an icon to the table of contents.

From the **Toggle Icon** toggle, you can [make the table of contents collapsible](https://nexterwp.com/docs/create-a-collapsible-table-of-contents-in-wordpress/).

## How to Style the Table Of Contents Block?

You can style the Table Of Contents block from the Style tab. 

**Table Title** - From here you can style the table of contents heading.

![](https://nexterwp.com/wp-content/uploads/2024/12/tableofcontent-style-1.png)

**Heading Area **- From here, you can style the content area of the table of contents.

**Level 1 Typography** - From here, you can manage the typography and normal and active color of the table of contents top-level headings.

**Sub-Level Typography** - From here, you can manage the typography and normal and active color of the table of contents sublevel headings.

**Box Background** - From here, you can style the table of contents container.

Advanced options remain common for all our blocks, you can explore all its options from here.

[View Advanced tab tutorial.](https://nexterwp.com/docs/add-advanced-tab-in-wordpress/)

## Frequently Asked Questions

**Q: What should I do if the Table Of Contents block isn't showing up?**
A: If the Table Of Contents block isn't appearing, ensure that you have the Nexter Blocks plugin installed and activated. This block is part of the PRO version of Nexter Blocks, so you need to verify that the PRO version is active. Check by navigating to Nexter u2192 Blocks and searching for the Table Of Contents block to activate it.

**Q: What are the best practices for styling the Table Of Contents block?**
A: When styling the Table Of Contents block, consider using the Style tab to customize the Table Title, Heading Area, and typography for both level 1 and sub-level headings. This ensures that your table is visually appealing and matches your site's design. Remember to test different styles to see what enhances readability and user experience.

**Q: How can I add smooth scrolling to the Table Of Contents?**
A: To add smooth scrolling to the Table Of Contents, enable the Smooth Scroll toggle in the block settings. This feature improves navigation by allowing users to scroll smoothly to the sections they select from the table. It's particularly useful for long pages where quick navigation is essential. For more information, check the [smooth scrolling effect guide](https://nexterwp.com/docs/add-smooth-scrolling-effect-to-wordpress-table-of-contents/).

**Q: Are there any limitations when using the Table Of Contents block?**
A: One limitation of the Table Of Contents block is that it requires the Nexter Blocks plugin and the PRO version to function. Additionally, it relies on the default WordPress Block editor, so it won't work as a standalone theme without Gutenberg. Ensure your setup meets these requirements to avoid issues.