How To Create a Table of Contents in WordPress
WordPress users can create a table of contents in different ways, including installing a dedicated plugin, using HTML anchor links or writing custom HTML. Each method provides a way to organise article sections and improve navigation. This guide explains how to set up a table of contents using these methods.
How To Create a Table of Contents Using a WordPress Plugin
Using a plugin is a convenient way to add a table of contents to WordPress posts. It can automatically identify headings in an article and generate clickable links without requiring you to create each link manually.
One option is Easy Table of Contents, a WordPress plugin designed to generate tables of contents from headings in posts and pages.
How To Install Easy Table of Contents
Follow these steps to install the plugin:
- Log in to your WordPress dashboard.
- Navigate to Plugins and select Add New Plugin.
- Enter Easy Table of Contents in the search box.
- Find the plugin in the search results.
- Click Install Now.
- After installation, click Activate.
The plugin will now be available on your WordPress website.
How To Configure Easy Table of Contents
After activating the plugin, configure its settings to determine how the table of contents appears in your articles.
- Open the Settings section of your WordPress dashboard.
- Select Table of Contents to access the plugin settings.
- Choose the content types where you want the table of contents to appear, such as Posts or Pages.
- Enable automatic insertion if you want the plugin to generate and display a table of contents without manually adding it to every article.
- Select the heading levels you want to include, such as H2 and H3.
- Configure the appearance options, including the title, numbering and display settings.
- Save your changes.
Depending on your configuration, the plugin will automatically generate a table of contents from the headings in your articles.
How To Add a Table of Contents to an Individual Post
If you prefer to control which articles display a table of contents, you can use the plugin's individual post settings where supported.
- Open an existing WordPress post or create a new one.
- Locate the plugin's table of contents settings in the post editor.
- Enable the table of contents for the post if it is not already enabled.
- Choose the heading levels you want to display.
- Save or update the post.
- Open the published article to confirm that the table of contents appears correctly.
The available controls depend on the plugin version and editor configuration.
How To Create a Table of Contents Manually in WordPress
You can create a table of contents without installing a plugin by using the WordPress block editor. This method involves adding HTML anchors to headings and creating clickable links that point to those anchors.
An HTML anchor is a unique identifier assigned to a particular section of a webpage. When a visitor clicks a link containing that identifier, the browser takes them directly to the corresponding section.
Step 1: Add Headings to Your WordPress Article
First, open the post you want to edit in the WordPress block editor.
Organise the article using heading blocks. Use H2 for the main sections and H3 for subsections where necessary.
For example, an article may contain the following headings:
- What Is WordPress?
- Benefits of Using WordPress
- How to Install WordPress
- How to Manage WordPress Settings
These headings will become the items in your table of contents.
Step 2: Add HTML Anchors to the Headings
After creating the headings, assign a unique HTML anchor to each section.
Follow these instructions:
- Click the first heading block in your article.
- Open the block settings panel on the right side of the editor.
- Expand the Advanced section.
- Locate the HTML Anchor field.
- Enter a short identifier for the heading, such as
what-is-wordpress. - Repeat the process for the other headings, using different identifiers.
For example, you can use the following identifiers:
| Article heading | HTML anchor |
|---|---|
| What Is WordPress? | what-is-wordpress |
| Benefits of Using WordPress | benefits |
| How to Install WordPress | install-wordpress |
| How to Manage WordPress Settings | manage-settings |
Each anchor must be unique within the page. Do not include spaces in the identifiers. Use lowercase letters and hyphens to make them easier to manage.
Step 3: Create the Table of Contents
Once you have assigned HTML anchors to your headings, create a list containing the section names.
- Place your cursor where you want the table of contents to appear, preferably after the introduction.
- Click the Add Block (+) button.
- Search for List and select the List block.
- Enter the names of the article sections.
- Arrange the entries in the same order as their corresponding headings.
Your list should contain the same section names used in the article.
Step 4: Link the Table of Contents to the Headings
The next step is to connect each item in your list to its corresponding HTML anchor.
- Highlight the first heading name in your table of contents.
- Click the Link icon in the block toolbar.
- Enter the corresponding anchor with a hash symbol (
#) before it. - Press Enter to apply the link.
- Repeat the process for the remaining entries.
- Update or publish the article.
For example, if the HTML anchor assigned to a heading is what-is-wordpress, the corresponding table of contents link should be #what-is-wordpress.
When a reader clicks that link, the browser jumps to the section with the matching anchor.
How To Create a Table of Contents Using HTML Code
Another way to create a table of contents is by writing HTML code directly in WordPress. This method gives you more control over the structure of the table of contents and how its links are arranged.
You can use the Custom HTML block in the WordPress editor to add the code.
Step 1: Open the Custom HTML Block
- Open the WordPress post you want to edit.
- Place your cursor where you want the table of contents to appear.
- Click the Add Block (+) button.
- Search for Custom HTML.
- Select the Custom HTML block.
You can also type /html in a new block and select Custom HTML from the available options.
Step 2: Add the HTML Code
After inserting the Custom HTML block, paste the following code into it:
<div class="table-of-contents">
<h3>Table of Contents</h3>
<ul>
<li><a href="#what-is-wordpress">What Is WordPress?</a></li>
<li><a href="#benefits">Benefits of Using WordPress</a></li>
<li><a href="#install-wordpress">How to Install WordPress</a></li>
<li><a href="#manage-settings">How to Manage WordPress Settings</a></li>
</ul>
</div>
This code creates a table of contents with four clickable entries. Each entry links to a specific section of the article.
Step 3: Understand the HTML Code
The code contains different HTML elements, each performing a particular function.
1. The div element
<div class="table-of-contents">
The div element creates a container for the table of contents. The class="table-of-contents" attribute gives the container a class name that can be used to apply CSS styling.
2. The heading element
<h3>Table of Contents</h3>
The H3 element displays the title of the table of contents. You can change the text to another suitable heading if you prefer.
3. The ul element
<ul>
The ul element creates an unordered list. It organises the table of contents entries into a bulleted list.
4. The li element
<li><a href="#what-is-wordpress">What Is WordPress?</a></li>
The li element represents an individual list item. Each one contains a link to a section of the article.
5. The a element and href attribute
<a href="#what-is-wordpress">What Is WordPress?</a>
The a element creates a clickable link, while the href attribute specifies its destination.
The hash symbol (#) tells the browser that the link points to an HTML anchor on the same page.
6. The closing elements
</ul>
</div>
These closing tags mark the end of the list and its container. Every opening HTML element that requires a closing tag must be properly closed.
Step 4: Assign Matching IDs to Your Article Headings
The links in your table of contents will not work correctly unless their destinations exist.
You must assign matching IDs to the actual article headings.
For example, if your table of contents contains this link:
<a href="#what-is-wordpress">What Is WordPress?</a>
The corresponding heading needs this ID:
<h2 id="what-is-wordpress">What Is WordPress?</h2>
The id attribute identifies the destination of the link. When a reader clicks the table of contents entry, the browser searches for an element with the matching ID and moves to that section.
Repeat this process for every heading.
The following examples show how the remaining headings should be structured:
<h2 id="benefits">Benefits of Using WordPress</h2>
<h2 id="install-wordpress">How to Install WordPress</h2>
<h2 id="manage-settings">How to Manage WordPress Settings</h2>
Make sure each ID matches its corresponding link exactly. HTML IDs are case-sensitive and should not contain spaces. Each ID must also be unique on the page.
Important: If you are using the normal WordPress Heading blocks, you do not need to rewrite your article headings in HTML. Simply enter the matching values in each heading block's Advanced > HTML Anchor field.
Step 5: Preview and Publish the Table of Contents
After adding the code and assigning the corresponding heading IDs:
- Use the Custom HTML block's preview option to check how the table of contents appears.
- Confirm that all entries are displayed correctly.
- Check that every link has the correct destination.
- Click Update or Publish to save the article.
- Open the published page and click each table of contents entry to test its navigation.
If the links take readers to the correct sections, your manual HTML table of contents is working properly.
How To Customise the Appearance of a Table of Contents
You can customise the appearance of your table of contents to match your WordPress website's design.
If you use a plugin, check its available appearance settings. These may allow you to change the title, background colour, border, text colour, numbering and collapsible display.
If you created the table of contents using HTML, you can use CSS to customise its appearance.
For example, the following CSS adds a light background, border and spacing to the table of contents:
.table-of-contents {
background: #f5f5f5;
border: 1px solid #dddddd;
padding: 15px;
margin: 20px 0;
border-radius: 5px;
}
.table-of-contents ul {
padding-left: 20px;
}
.table-of-contents a {
text-decoration: none;
}
.table-of-contents a:hover {
text-decoration: underline;
}
To apply this styling, copy the CSS code and open Appearance > Customise > Additional CSS if your theme provides that option. Paste the code and publish the changes.
The CSS class in the code must match the class assigned to your HTML container. If your theme uses a different method for adding custom CSS, use its available stylesheet or site editor options.
How To Fix a Table of Contents That Is Not Working
If your table of contents does not appear correctly or its links fail to navigate to the right sections, check the following:
- Incorrect HTML anchors: Ensure that each link uses the same identifier assigned to its corresponding heading.
- Duplicate IDs: Give every heading a unique HTML anchor to prevent navigation problems.
- Missing heading levels: Check that your plugin is configured to include the heading levels used in your article.
- Incorrect HTML structure: Confirm that all opening and closing HTML tags are properly arranged.
- Plugin conflicts: Update the plugin and check whether another plugin or your theme is interfering with its operation.
- Caching problems: Clear your website cache and browser cache before testing the changes again.
After making corrections, open the published article and test the table of contents links individually.
Frequently Asked Questions
1. Can I create a table of contents in WordPress without a plugin?
Yes. You can use HTML anchors and clickable links in the WordPress block editor.
2. Which plugin can create a table of contents in WordPress?
Easy Table of Contents is one plugin that can automatically generate a table of contents.
3. Do I need HTML knowledge to create a table of contents?
No. You can use a WordPress plugin or the block editor's HTML Anchor feature without writing HTML code.
4. Does a table of contents improve SEO?
Yes. It can improve content navigation and make lengthy articles easier to read.
