How to add a Table of Contents in Classic WordPress Editor

In this blog post, we will explore how to manually add scroll-to links in the classic WordPress editor to create a Table of Contents (TOC). While the Gutenberg block editor offers amazing features, there is still the option to implement a Table of Contents using classic WordPress by delving into a bit of code wrangling. Let’s dive into the steps to achieve this.

Understanding the Code Editor in Classic WordPress Editor

When working in the classic WordPress editor, it’s important to familiarize yourself with the two tabs available in the code editor – the Visual tab and the Text tab.

While the Visual tab (1) is where you typically write most of your content, the Text tab (2) allows you to apply or modify code.

Adding IDs to Headings

To enable scroll-to functionality, you first need to assign unique IDs to your headings. By structuring your content with headings (e.g., heading level 2), you can easily identify them in the Text tab. Use the ‘Ctrl + F’ shortcut to search for specific headings (e.g., ‘h2’) and assign IDs accordingly.

In code view, type id="your-id" for your headings as highlighted below. IDs cannot include spaces. Copy the ID to your clipboard.

Creating Scroll-To Links for the TOC

Once you have assigned IDs to your headings, switch back to the Visual mode (1). To create a scroll-to link, select the text you want to link from (2), click on ‘Insert Link’ button (3) and instead of a URL, insert a hash followed by the ID you copied earlier #your-id. Applying this link will allow users to smoothly scroll to the designated section on the page.

Repeat the process until you have created links to all the headings on the page or post.

Styling the Table of contents

Format the links as a simple bulleted list (unordered list ).

Then in the Text tab (code view) add a class="toc" to the unordered list.

To style the table of contents list (remove bullets), simply copy the following CSS code.

.toc {
   list-style: none;
   margin-left:0;
   margin-bottom:0;
   padding: 1em;
   border-radius: 4px;
   border: 1px solid rgba(100,100,100, 0.5);
   background-color: rgba(240,240,240,0.5);
}

From the WordPress menu, select Appearance > Customise > Additional CSS and add the above CSS code, to style the list and make it look good.

Implementing Smooth Scrolling

Avoid the jarring jump. For a seamless scrolling experience, it’s recommended to add custom CSS code to enable smooth scrolling. By including the necessary code in the appearance customisation settings, you can enhance the overall user experience on your website.

To enable smooth scroll, simply copy-paste the following CSS code.

html {
    scroll-behavior: smooth;
}

To add the above CSS code, from the WordPress menu, select Appearance > Customise > Additional CSS.

You can also add CSS using a plugin like Simple CSS.

Conclusion

By following these steps, you can manually add scroll-to links to create a Table of Contents (TOC) in the classic WordPress editor, offering a user-friendly navigation experience for your visitors. Enhance your content organization and user interaction by implementing scroll-to links and smooth scrolling effects on your website.

I hope you found this guide helpful in optimizing your WordPress content with an effective Table of Contents. Happy coding!