--- 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-09-15 lang: en author: "Aditya Sharma" description: "A long article is easier to read when the reader can see its shape before they start. The Table of Contents block reads the headings already on your page and..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-Table-Of-Contents-in-WordPress_-1024x519.jpg word_count: 753 --- # How to Add a Table Of Contents in WordPress? ## Key Takeaways - Nexter Blocks Table Of Contents block is a Premium block and requires the PRO version of Nexter Blocks, with the default WordPress Block editor active. - Nexter → Blocks lets the user activate Table Of Contents by searching for the block name and turning on the toggle. - Table Of Contents offers 4 pre-defined styles, UL and OL list types, Child Collapsed, Smooth Scroll, Position Fixed, and Heading Content Offset controls. - Nexter theme uses “content” as the main container ID, so the Content Selector field uses “#content” to show page content in the table of contents. A long article is easier to read when the reader can see its shape before they start. The Table of Contents block reads the headings already on your page and turns them into a linked outline, so nobody has to scroll to find the part they came for. [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-table-of-contents/) ## Before You Start - **Edition:** **Pro** — the Table of Contents block is part of Nexter Blocks Pro.- **Block to enable:** Table of Contents, switched on under **Nexter > Blocks** in your WordPress dashboard.- **Real headings on the page:** the list is built from your H1–H6 blocks, so text that only *looks* like a heading will not appear. ## Steps - Add the **Table of Contents** block to your post or page and click **Design from Scratch**. - In the **Layout** panel, pick a **List Type** — **UL** for bullets or **OL** for numbers — and a **Style**. ![The List Type setting with UL and OL](https://nexterwp.com/wp-content/uploads/2026/09/toc-list-type.webp) - Open the **Content** panel and check **Content Selector**. Leave it at **#content** unless your theme uses a different wrapper. ![The Content panel with the heading switches and Content Selector](https://nexterwp.com/wp-content/uploads/2026/09/toc-selector.webp) - In the **Table Title** panel, switch **Show Title** on and name the list — *On this page* reads better than the default. ![The Table Title panel with Show Title](https://nexterwp.com/wp-content/uploads/2026/09/toc-title.webp) - Publish, then open the page and check the list matches your headings. > ***Content Selector** starts at **#content**, which is the wrapper most WordPress themes use — including the Nexter theme — so on most sites you can leave it alone.* ## What Each Panel Controls | Panel | What you set there | | ----- | ------------------ | | Layout | List type, style, collapsing, smooth scrolling and whether the list sticks as you scroll | | Content | Which heading levels are listed, and which part of the page is searched for them | | Table Title | The heading above the list, its description, and the icons beside it | ## The Settings That Matter Most | Setting | What it does | Guide | | ------- | ------------ | ----- | | Position Fixed | Keeps the list on screen while the reader scrolls | [Sticky table of contents](https://nexterwp.com/docs/make-a-sticky-table-of-contents-in-wordpress/) | | Toggle Icon | Lets the reader fold the whole list away | [Collapsible table of contents](https://nexterwp.com/docs/create-a-collapsible-table-of-contents-in-wordpress/) | | Smooth Scroll | Glides to the section instead of jumping | [Smooth scrolling](https://nexterwp.com/docs/add-smooth-scrolling-effect-to-wordpress-table-of-contents/) | | Headings (H1–H6) | Decides which heading levels are listed | — | | Child Collapsed | Hides sub-headings until their section is reached | [Collapsible table of contents](https://nexterwp.com/docs/create-a-collapsible-table-of-contents-in-wordpress/) | ## How It Behaves - **The list is built in the reader's browser, not saved into the page.** Add a heading later and it appears in the list on its own — there is nothing to refresh or rebuild.- **Links are made from the heading text.** A heading reading *Getting Started* becomes the link `#Getting-Started`, and the block writes that id onto the heading itself. Renaming a heading therefore changes its link, so anything shared earlier will stop landing in the right place.- **Sub-headings nest.** An H3 after an H2 is listed inside it, so the outline mirrors the shape of the article.- Turning heading levels off in the **Content** panel shortens the list — with H3 to H6 switched off, a page with two H2s and four H3s listed just the two H2s.- **One per page.** With two Table of Contents blocks on the same page only the first one is filled in — the second stays empty. This was measured on the front end. ## Limitations - **Pro only.**- The list can only contain real heading blocks. Bold text styled to look like a heading is invisible to it.- **Child Collapsed only works on Style 1.** On **None** and Styles 2, 3 and 4 the sub-items stay visible whether the setting is on or not — measured on the front end.- **Leave the Smooth Scroll *Offset* at 0.** With any other value the page scrolls past the heading and then jumps somewhere else entirely. See [the smooth scrolling guide](https://nexterwp.com/docs/add-smooth-scrolling-effect-to-wordpress-table-of-contents/) for what was measured.- The block lists headings; it does not number your actual headings or change them in any way. ## Troubleshooting ### The list is empty and there is an error message on the page If the reader sees *Table of Content Class/Selector ID not found! Please Update "Content Selector" Option.*, the **Content Selector** does not match anything on the page. Put it back to **#content**, or use **.entry-content**, which works on most themes. ### The list is empty but there is no error The selector matched a container, but there were no headings inside it — check the **Headings** switches in the **Content** panel are not all off. ### A heading I do not want keeps appearing Single headings can be left out one at a time. See [excluding a title](https://nexterwp.com/docs/exclude-a-title-from-a-table-of-contents-in-wordpress/). ### The second table of contents on my page is blank Only the first one on a page is filled in. Use one per page. ### The block is missing from the inserter Switch **Table of Contents** on under **Nexter > Blocks** in your dashboard. ![Table of Contents switched on in the Nexter Blocks list](https://nexterwp.com/wp-content/uploads/2026/09/toc-admin-enable.webp) ## Related Docs - [Sticky table of contents](https://nexterwp.com/docs/make-a-sticky-table-of-contents-in-wordpress/)- [Collapsible table of contents](https://nexterwp.com/docs/create-a-collapsible-table-of-contents-in-wordpress/)- [Smooth scrolling](https://nexterwp.com/docs/add-smooth-scrolling-effect-to-wordpress-table-of-contents/)- [Exclude a title from the list](https://nexterwp.com/docs/exclude-a-title-from-a-table-of-contents-in-wordpress/)