Search
Close this search box.

How to Create a Table of Contents in WordPress without plugins?

Want to know how to create a table of contents (TOC) in WordPress posts without plugins? The process is manual, but it’s not difficult to follow the steps. But why bother with TOCs? Because it’s much faster and easier to navigate posts and pages that have lots of content.

Visitors appreciate it when they can jump to and from sections that interest them most. TOC links can also help on-page optimization and display in search results.

Let’s look at the full benefits of a Table of Contents in more detail.

Know What Your Visitors Want

The best habit any site builder can form is to be mindful of the visitor experience. A lot of novice webmasters create sites that they like, thinking everyone else will love them too. That’s often not the case. It’s better to get to know your visitor and build a project around their needs and expectations. So, the focus of any successful WordPress website is always on the user. 

TOC and User Experience

Today’s internet users are impatient. They demand fast-loading pages presented in a way that’s easy on the eyes. They also want to be able to navigate the content quickly.

Take someone who’s looking for a specific smartphone review, as an example. Most won’t want to read a 6000-word article on the top 20 models. They’re more likely to stick around if they can find the ones that interest them without scrolling up and down a long page. A simple TOC near the top of the piece is the solution to this problem.

Create a TOC in WordPress Without a Plugin

This tutorial assumes you already have some written content prepared. If not, do that first if you want to follow along with the tutorial. Your post or page should include headings, i.e., H1, H2, etc., and quite short paragraphs so that there’s plenty of white space. This tutorial uses a WordPress post, but the procedure is the same for pages.

Log into your WordPress Dashboard. Select Posts from the side menu, then click All Posts.

Find the post you want to add the table of contents to in the Posts screen and click the Edit link.

Add HTML Anchor Tags

Your headings must have unique names or anchor tags. Without them, the links in the TOC won’t know where to jump. So, our next step is to add HTML anchor tags to every heading.

#1 Place your cursor anywhere in the post’s first Heading.

#2 Click the Advanced link in the Block column (right).

#3 Add a short word or words (no spaces) to name each HTML anchor (shorter is better).

Repeat this process for all your headings (see illustration below). You might want to copy and paste the HTML anchor text into a Notepad file for quick access later. You’re going to need these when it’s time to add links to your TOC list.

#4 Click the Update button (top right) to save the changes.

Tip: You can quickly check and change Heading Levels from the Heading Settings area in the Block tab if you need to.

Create a List Block

We’re now ready to create the table of contents. You can place it anywhere on the page, but it typically goes near the top of a webpage. For this example, the TOC goes after the introduction paragraph below the H1 headline. Decide where you want to put your TOC.

Place the mouse cursor at the end of a Heading or Paragraph block and press Enter (return). 

Now click the Add Block icon (+ sign) at the top left of the screen and select Heading.

Type Table of Contents into the block and press Enter (Return) on the keyboard.

Now click the Add Block (+ sign) at the top left of the screen and select List.

Type—or copy and paste—your headline text into the List block.

Here’s how our sample non-clickable list looks.

Add Links to Your Table of Contents

It’s time to add links to our Table of Contents. Open your HTML anchor tag list if you saved it to a file. If not, you can get the anchor text by clicking on a headline and copying it from the Block column on the right. See the section ‘Add HTML Anchor Tags’ above if you need a refresher.

Highlight the first line of TOC text, then click the Link icon

Type # into the link box followed by the correct HTML anchor text (no space).

Press Enter (Return) on the keyboard to save the new link.

Click anywhere outside the Edit box to close it.

Repeat the above procedure for all TOC text in the list.

Finally, click the Update button followed by Preview to check your TOC on the live site.

Here’s how the new manually added sample TOC looks.

You can style the TOC list using Cascading Style Sheets (CSS) if you want a different look.

Now you know how to add a table of contents in WordPress without using a plugin. There are plenty of plugins if you don’t want to take the manual route. Some of the popular ones include Easy Table of Contents, Table of Contents Plus, and LuckyWP Table of Contents.

Want to Learn WordPress?

WordPress is an amazing platform for building any type of website.   It’s used by large corporations and small mom & pop sites.

You may also like

Comments

Leave a Comment

Your email address will not be published. Required fields are marked *

Hello, I'm
Andy Williams!

You can get up to 90% off my Online Courses for webmasters, marketers & affiliates (plus a free course on Gutenberg).

Create your own WordPress Theme

It's built in to WordPress using Gutenberg, and my new course shows you how.