If you want the quickest way to choose a method, here\u2019s a simple breakdown: <\/p>\n\n\n\n
- \n
- use a dedicated ToC plugin if you want a fast, focused solution; <\/li>\n\n\n\n
- use a ToC block from your SEO plugin if you already rely on one; <\/li>\n\n\n\n
- use a block-based plugin if you want more design control in the editor; <\/li>\n\n\n\n
- or build it manually if you don\u2019t want to install anything extra.<\/li>\n<\/ul>\n\n\n<\/div><\/div>\n\n\n\n
Four ways to create a WordPress table of contents \ud83d\udcdd<\/h2>\n\n\n\n
Here are the four methods we’ll cover – you can click below to jump straight to a specific technique:<\/p>\n\n\n\n
- \n
- Use a dedicated ToC plugin<\/a><\/li>\n\n\n\n
- Use the ToC feature in the Rank Math plugin<\/a><\/li>\n\n\n\n
- Create your table of contents using blocks<\/a><\/li>\n\n\n\n
- Build a table of contents manually<\/a><\/li>\n<\/ol>\n\n\n\n\t\t
<\/div>\n\t\t\t\n\t\t \t\n\t\t \t\tLearn how to build a #WordPress \ud83d\udcda table of contents: 4 easy, no-code methods<\/a>\n\t\t \t<\/div>\n\t\t \t\n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n<\/div>\n\n\n\n1. Use a dedicated ToC plugin<\/h3>\n\n\n\n
Using a plugin is a quick and easy way to add a table of contents to your posts or pages. Easy Table of Contents<\/strong> is a free tool that automatically generates a table of contents based on the headings in your text:<\/p>\n\n\n
<\/div><\/div><\/div><\/div>\n\n\n\nHere’s how to use it:<\/p>\n\n\n\n
Install the plugin<\/h4>\n\n\n\n
Start from the WordPress admin dashboard. Navigate to Plugins \u2192 Add New<\/em>. Search for the plugin and click the Install Now<\/em> button, then click Activate<\/em>. This is the standard method of installing any free or freemium WordPress plugin<\/a>.<\/p>\n\n\n
<\/div>\n\n\n\nConfigure the plugin’s general settings<\/h4>\n\n\n\n
Next, you can tweak the plugin’s settings to your liking. Navigate to Settings > Table of Contents <\/em>to find all of the available options:<\/p>\n\n\n\n
![\"Easy](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/07\/easy-table-of-contents-general-settings.png\")
<\/figure>\n\n\n\nFirst, determine which post types<\/a> the plugin will support. The system selects Pages<\/em> by default, but you can pick any combination from the available settings.<\/p>\n\n\n\n
Next, choose which post types will automatically get a table of contents. Remember to enable support for each post type you want a table of contents for.<\/p>\n\n\n\n
Then, decide the location for your table of contents. Most users place it before or after the first heading, or at the very top of the post, but you can set it up however you’d like.<\/p>\n\n\n\n
![\"Position](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/07\/easy-table-of-contents-position-dropdown-menu.png\")
<\/figure>\n\n\n\nYou can also control how many headings need to be present<\/a> before the table of contents is included. This is handy if you have a combination of long and short content<\/a>, as you may not want a table of contents for your briefer posts:<\/p>\n\n\n
\n![\"Minimum](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/07\/easy-table-of-contents-show-when-heading.png\")
<\/figure><\/div>\n\n\nAfter that, you can use the Header Label<\/em> 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:<\/p>\n\n\n
\n![\"easy](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/07\/easy-table-of-contents-collapse-toggle.png\")
<\/figure><\/div>\n\n\nYou can also hide the table of contents by default by checking the Initial View<\/em> box. This means that users will need to click on the button to display the information.<\/p>\n\n\n\n
The last of the general settings enable you to tweak the table’s hierarchy and counters. If you check Show as Hierarchy<\/em>, the table of contents will display subheadings as well as your main headings, like this:<\/p>\n\n\n
\n![\"](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/07\/easy-table-of-contents-hierarchy-nested.png\")
<\/figure><\/div>\n\n\nUsing the Counter<\/em> drop-down menu, you can choose how each heading will be numbered. You can select from a large range of options, such as decimals, numerals in various languages, symbols, or nothing:<\/p>\n\n\n
\n![\"Counter](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/07\/easy-table-of-contents-counter-styles.png\")
<\/figure><\/div>\n\n<\/div>\n\n\n\nConfigure the plugin’s design settings<\/h4>\n\n\n\n
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:<\/p>\n\n\n
\n![\"Appearance](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/07\/easy-table-of-contents-appearance-settings.png\")
<\/figure><\/div>\n\n\nYou 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<\/em> and define your own colors:<\/p>\n\n\n
\n![\"Color](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/07\/easy-table-of-contents-color-theme-settings.png\")
<\/figure><\/div>\n\n\nAfter changing any settings, be sure to click on the Save Changes<\/em> button at the bottom of the page. Your table of contents should automatically appear according to your configuration settings.<\/p>\n\n\n
<\/div>\n\n\n\n2. Use the ToC feature in the Rank Math plugin<\/h3>\n\n\n\n
If you don’t use an SEO plugin yet or if you are looking for an alternative to the popular Yoast SEO<\/a>, then you might want to look into Rank Math<\/strong>. This plugin will take care of the SEO on your website and also add ToCs to your content.<\/p>\n\n\n
<\/div><\/div><\/div><\/div>\n\n\n\nWith this method, you kill two birds with one stone. It will not only help you create a table of contents in an easy way but it will also bring lots of valuable SEO features that Rank Math SEO provides for free. Such features include sitemaps<\/a>, Schema code<\/a>, image SEO, AI content<\/a>, link checker, redirections<\/a>, analytics, and more.<\/p>\n\n\n\n
Rank Math is one bundled option here, but it\u2019s not the only SEO plugin that can handle a table of contents now. Depending on your setup, you may also find similar ToC blocks or features in other SEO plugins, so this method makes the most sense if you already want Rank Math for its broader SEO toolkit.<\/p>\n\n\n\n
So, how to add a table of contents with Rank Math?<\/p>\n\n\n\n
Let’s go over the process below:<\/p>\n\n\n\n
Install the plugin<\/h4>\n\n\n\n
Install Rank Math to your WordPress dashboard by accessing Plugins \u2192 Add New<\/em>. Search for the plugin’s name, then click Install<\/em> and Activate<\/em>.<\/p>\n\n\n\n
Right after you do this, you’ll be directed to the setup wizard. Follow the steps to configure the plugin’s settings. You’ll be asked for details about your website, prompted to connect Google Analytics<\/a>, and asked to choose a sitemap configuration. You’ll also be able to tweak some SEO settings.<\/p>\n\n\n\n
![\"](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/08\/rank-math-setup-website.png\")
<\/figure>\n\n\n\nOf course, you can always modify the settings later on, via the plugin’s page in your WordPress dashboard. Moreover, you can skip most of these configurations if you are only looking to create ToCs and do not want to make use of the SEO features of the plugin. However, if that’s the case, then you’re probably better off going with one of the other table of contents solutions offered in this tutorial.<\/p>\n\n\n
<\/div>\n\n\n\nCreate the table of contents with Rank Math<\/h4>\n\n\n\n
Once the plugin is configured, go to the post or page where you want to include a ToC. Click on the (+<\/em>) icon at the top left of the editor to add a new block. Search for Rank Math and click on the Table of Contents by Rank Math<\/em> block to add it to your content.<\/p>\n\n\n
\n![\"Block](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/08\/toc-block-rank-math.png\")
<\/figure><\/div>\n\n\nHere’s how it looks when you insert it:<\/p>\n\n\n\n
![\"Inserted](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/08\/toc-block-demo.png\")
<\/figure>\n\n\n\nOnce you add the block, the plugin will automatically create the table of contents by populating all the headings from your post or page. In short, every Heading block that you add will be displayed in the ToC block, following the
<h1><\/code> through<h6><\/code> hierarchy.<\/p>\n\n\n\n![\"Completed](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/08\/toc-example-in-rank-math.png\")
<\/figure>\n\n\n\nWhen your readers click on a title in the table of contents, they will be redirected to the respective section on your page.<\/p>\n\n\n\n
You can also edit the ToC by clicking on the block and using the available options. For example, you can customize the list, typography, and colors. Moreover, you can choose to exclude specific headings if you don’t want them listed.<\/p>\n\n\n\n
![\"Rank](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/08\/customize-toc-in-rank-math.png\")
<\/figure>\n\n\n<\/div>\n\n\n\n3. Create your table of contents using blocks<\/h3>\n\n\n\n
You can also use the default WordPress Block Editor<\/a> to add a table of contents to WordPress. First, you’ll need to download and activate the free Spectra<\/strong> plugin:<\/p>\n\n\n
<\/div><\/div><\/div><\/div>\n\n\n\nTo 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<\/em>. This block will automatically generate a table based on your post’s headings, but there are also plenty of settings you can experiment with.<\/p>\n\n\n\n
Under the General<\/em> 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:<\/p>\n\n\n
\n![\"Spectra](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/07\/spectra-toc-general-heading-levels.png\")
<\/figure><\/div>\n\n\nThe Scroll<\/em> 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.<\/p>\n\n\n\n
You can also add a Scroll to Top<\/em> 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:<\/p>\n\n\n
\n![\"Spectra](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/07\/spectra-toc-scroll-settings.png\")
<\/figure><\/div>\n\n\nNext, let’s have a look at the Content<\/em> settings. The first group of options is related to the table’s heading. You can adjust the text alignment and color:<\/p>\n\n\n
\n![\"Spectra](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/07\/spectra-toc-title-color-settings.png\")
<\/figure><\/div>\n\n\nAs 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<\/a>:<\/p>\n\n\n\n
![\"Spectra](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/07\/spectra-toc-collapse-settings.png\")
<\/figure>\n\n\n\nFrom the Style<\/em> settings, you can 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, and even fonts<\/a>:<\/p>\n\n\n\n
![\"](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/07\/spectra-toc-list-style-settings.png\")
<\/figure>\n\n\n\nIn the Style<\/em> settings, you can also select a background color for your table of contents. You can also adjust the width of the table, and even add a fancy border:<\/p>\n\n\n
\n![\"Spectra](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/07\/spectra-toc-background-border-settings.webp\")
<\/figure><\/div>\n\n\nOne advantage of using a block to add your table of contents is that you can style each table differently if you’d like.<\/p>\n\n\n
<\/div>\n\n\n\n4. Build a table of contents manually<\/h3>\n\n\n\n
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.<\/p>\n\n\n\n
Since the editor doesn’t include a table of contents block by default, you can make your own using a simple list element:<\/p>\n\n\n
\n![\"WordPress](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/07\/wordpress-list-block-manual-toc.png\")
<\/figure><\/div>\n\n\nFor the section’s title, you can use a Heading <\/em>block or just text (we recommend the former, as it’s better for SEO<\/a>). 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.<\/p>\n\n\n\n
The simplest way to do this is to navigate to the subheading for each section within the list, and open the Advanced <\/em>tab within that block’s settings. You’ll see a field called HTML anchor<\/em>, where you can enter a unique identifier for that block:<\/p>\n\n\n\n
![\"HTML](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/07\/wordpress-html-anchor-advanced-settings.png\")
<\/figure>\n\n\n\nThe 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?<\/a>“, you could create an anchor labeled
webhosting<\/code>.<\/p>\n\n\n\nThen 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<\/a> you just set, preceded by a # sign. So in this example it would be
#webhosting<\/code>:<\/p>\n\n\n\n![\"Adding](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/07\/wordpress-anchor-link-list-item.png\")
<\/figure><\/div>\n\n\nNow 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.<\/p>\n\n\n\n
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:<\/p>\n\n\n
\n![\"Changing](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2026\/07\/wordpress-list-block-background-color.png\")
<\/figure><\/div>\n\n\nOnce you find a style you’re comfortable with, save the changes to your post, and that’s it!<\/p>\n\n\n
<\/div>\n\n\n\nConclusion \ud83c\udfc1<\/h2>\n\n\n\n
\n\nAdding a table of contents to WordPress posts can have benefits for the user experience, as well as your SEO efforts.<\/p>\n\n\n\n
With multiple methods to choose from, you should be able to accomplish this task with very little trouble.<\/p>\n<\/div>\n\n\n\n
\n\t\t<\/div>\n\t\t\t\n\t\t \t\n\t\t \t\tLearn how to create a \ud83d\udcda table of contents for #WordPress posts or pages (no code required)<\/a>\n\t\t \t<\/div>\n\t\t \t\n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n<\/div>\n<\/div>\n\n\n\nThere are also other current options worth noting. For example, some major SEO plugins such as Yoast SEO and AIOSEO now include their own table of contents blocks, while lightweight block-focused solutions can be a good fit if you want a simpler editor-first approach.<\/p>\n\n\n
\n\n\n\n\ud83d\udca1 A table of contents is one great way to prepare longer content and make it more accessible. For some other ideas, check out our suggestions for four ways to format long-form content<\/a>.<\/p>\n\n\n<\/div><\/div>\n\n\n\n
Do you have any questions about adding a table of contents to WordPress? Ask away in the comments section below!<\/em><\/strong><\/p>\n\n\n
- Use the ToC feature in the Rank Math plugin<\/a><\/li>\n\n\n\n
- Use a dedicated ToC plugin<\/a><\/li>\n\n\n\n