The Only Table of Contents Solution You’ll Ever Need for WordPress
Do you find yourself glazing over when reading a long blog post or article?
Or skipping ahead, searching for the actionable content?
Worst of all, have you ever just given up reading, rather than face an intimidating wall of text?
In this article, you’ll learn how to solve these frustrations for your website visitors with a Table of Contents, and encourage them to keep reading what you have to share.
Long content offers some great benefits, but it also creates additional challenges for readers... Visitors can feel overwhelmed by the sheer volume of reading, or lose their bearings halfway through.
This is where a professional, powerful, and customizable Table of Contents element can make a huge difference.
A Table of Contents element like this...
What is a Table of Contents, and why should you care?
A Table of Contents – often called a TOC – lists the major sections in a page of content.
It’s similar to a book’s page listing, but has the added benefit of letting the visitor click to quickly jump down to each section. I’m sure you’re familiar with Wikipedia...
A good Table of Contents element can transform a dull wall of text into an interactive, mini-navigation for your awesome content.
Here’s 6 solid benefits that a Table of Contents provides:
- It sets the reader’s expectations by showing the structure beforehand. This shows the skimming reader that your content is worth investing their time.
- It lets the reader skip to a specific section, with the help of jump links. If you can connect your reader to relevant content faster, they’re less likely to get bored and leave.
- It lets the reader dip in and out during multiple visits. Repeat visitors are more likely to become fans of your brand.
- It allows sharing of direct links to individual sections.
- It helps readers orient themselves, when used with sticky scroll behavior.
- It looks professional on long-form content.
When should you – and shouldn’t you – use a Table of Contents Element?
A Table of Contents is a great fit for these types of content:
If you're pushing over 1,500 words, you might want to consider a Table of Contents. This helps to let visitors know what to expect, so they feel informed before committing to a full read.
If you choose to make your Table of Contents sticky, it can also provide some always-available navigation, so readers understand where they are in the wider topic.
Table of Contents rely on structured sections or chapters, along with HTML headings like H2s and H3s. The article you’re reading right now is a perfect example.
This lets your Table of Contents automatically update, and allows visitors to instantly navigate to a particular section of interest.
Structured content doesn’t have to be long; your visitors might find a Table of Contents valuable on Q&A or list-type posts, especially if there are repeated sections that are easy to get lost in.
Tutorials, guides and online course lessons
Educational content often teaches an overarching topic or skill by breaking it down into steps or subtopics.
A great example of this is our Beginners Guide to Starting an Online Business – this type of content becomes immediately more accessible and digestible when supported by a Table of Contents element.
A Table of Contents isn’t suitable for these types of content:
Just like you don’t need a page listing for a leaflet, you’ll discover that content below 800 words rarely needs a Table of Contents.
For shorter, snappier content, it’s best to let your readers jump in and follow the narrative from start to finish.
If you publish content without HTML headings, your Table of Contents simply won’t work.
In general, we don’t recommend publishing unstructured, stream-of-thought content. It’s never ideal for your readers. If you’re looking for guidance on how you can structure your content, read our post about content patterns.
Utility pages that serve a specific function
Sure, it’s technically possible to add a Table of Contents to your homepage, category archives, 404 page etc, but does it offer any real value to your visitors?
Unless you have a compelling reason, then these utility or navigation pages are not ideal locations to feature a Table of Contents element on.
How to add a Table of Contents?
You can add a Table of Contents element to any WordPress content.
The two most common applications are:
- Static pages – like sales pages, course lessons and other long-form content.
- Blog posts – like, well blog posts.
The next question you need to ask yourself is, do you want a Table of Contents on:
- Every static page or blog post?
- Or on just a few, selected ones?
Don’t worry, we have a solution for each.
Add a Table of Contents to a single page or post
The best tool for this job is Thrive Architect.
Thrive Architect lets you edit the content of a page.
The article you’re currently reading is a great example of adding a Table of Contents to a single post or page.
- Open your page with Thrive Architect and insert a new element
- Select the Table of Contents element
- Drag and drop it onto the page
Your Table of Contents doesn’t have to feature at the very top of your content – you can place it anywhere you want.
Add a Table of Contents to every page or post
The best tool for this job is Thrive Theme Builder.
Thrive Theme Builder lets you edit your WordPress theme – the common elements that surround your content.
Adding a Table of Contents element to your WordPress theme opens up a whole world of opportunities.
You can automatically show a clickable Table of Contents with every blog post, dynamically populated based on the headings in each, individual post.
You can also choose exactly where it should be displayed. For example, above the content or in the sidebar.
If you publish longer content with structured headings, this may be a gamechanger for improving readability and navigation!
The most important thing to remember when adding a Table of Contents to your WordPress theme is that it will dynamically change depending on the page that a visitor is viewing.
- A page with 20 headings will show a Table of Contents with 20 links
- A page with 2 headings will show one with 2 headings.
- A page with no headings won’t show any Table of Contents.
You get the point.
It’s a powerful feature but, as Spider-Man knows, with great power comes great responsibility… You should think very carefully before adding a theme-wide Table of Contents element – it will show up on every page that contains headings.
Technically, it will show on every page that uses the same page template.
With Thrive Theme Builder, you have full design control over each page template – you can add a Table of Contents to templates like your static pages, blog posts, full-width blog posts, video posts, etc.
You may want to create a page template called "Post with TOC" (or similar) so you can easily choose which content deserves a Table of Contents.
Configuring your Table of Contents
Our Table of Contents element isn’t the first such solution for WordPress. But I’m willing to bet it’s the most powerful and customizable – we set out to give you complete control over how your Table of Contents behaves.
Let’s walk through the configuration options now.
Depending on the needs of your content, you can choose which heading levels to include in your Table of Contents.
By default, it displays your H2, H3 and H4 headings. We’ve found this fits most long-form content – there’s not usually a compelling reason to include your post title, which is usually formatted as a H1 heading.
Of course, you have total control. If you want to include your H1 heading, you’re free to do so.
Likewise, if your content utilizes H5 and H6 headings, you can include those too.
A word of warning, however – when everything is important, nothing is. It’s best to focus your Table of Contents on just the top-level chapter headings, rather than every small sub-heading.
A Table of Content element is designed to make long-form content more readable, not add unnecessary scrolling. But the longer and more structured your content, the longer your Table of Contents grows.
Here’s a good example of a long, single-column Table of Contents:
Would it look better to spread the links across 2 columns?
It sure would!
Select up to 3 columns, and watch your Table of Contents become instantly more readable.
Here you have a stylistic choice to make:
- Do you want your Table of Contents split equally across the columns?
- Or do you prefer to keep major sections together?
Personally, I prefer equal columns, but we’d rather give you full control to make your own decision.
It’s easy, just toggle the Distribute Evenly option and choose whichever layout looks best.
This option is designed for Table of Contents that follow the visitor as they scroll – known as sticky scroll behavior.
If you only intend to feature your Table of Contents at the top of an article, you can safely ignore this option, as highlighting effects won’t be visible.
Highlighting lets your readers see – in real-time! – exactly where they are in the overall structure of your content.
They know what section they’re currently reading, what comes next, and how it all fits into the bigger picture. In short, it provides immediate context.
You can choose any design styles to represent highlighted sections.
The example above combines a blue link text color with a grey background. You could also choose a more suitable effect, like bold text.
But it gets even better!
You can also choose the behavior of the highlighting.
- Current heading - highlights only a single heading.
- Current section - highlights from the parent heading to the current heading.
- Progressive - highlights everything from the start to the current heading.
Some tightly-structured – or chaptered – content looks best with a numbered Table of Contents.
You can choose from:
- No numbering.
- Basic numbering - Incrementally number the top-level headings.
- Advanced numbering - Incrementally number every heading.
This is a feature we’re really proud of.
It’s a game-changer for anyone wanting to add a useful Table of Contents to their WordPress content.
Traditionally, WordPress TOC solutions are 100% dynamic. They display the same exact text used in each section heading.
That’s both good and bad!
It’s good because it updates automatically to reflect any changes you make. This saves time and eliminates errors.
It’s bad because this means your Table of Contents is a slave to your headings. Long, academic, SEO-driven, or stylistic headings look terrible in a Table of Contents.
Take a look at this…
The headings on this long-form page don’t create a readable, intuitive Table of Contents.
What if you could rename individual links in your Table of Contents, and override this rigid 1:1 relation?
In our new Table of Contents element, every single heading is fully editable.
Just select the Table of Contents and expand the Modify Heading toggle in the main options.
I spent 2 minutes modifying our example Table of Contents to improve usability.
I’ve removed filler words, extra punctuation, and unnecessary numbering, and I’ve even hidden the final heading entirely.
What do you think?
As mentioned above, it’s easy to hide a Table of Contents link with just a click.
And this works recursively to let you hide entire sections – hiding a H2 heading will also hide any child headings.
Unless you choose to include them, of course. Did I mention you have complete control yet?
Renaming and hiding headings works a bit differently in Thrive Theme Builder.
When you add a Table of Contents to a theme template, it applies to all posts and pages that use that template.
This means it will look very different for each page – a page with 20 headings will include a related Table of Contents, while a page with no headings won’t show anything.
If you use our visual editor to create your content (not the standard WordPress editor), you can choose which headings to show/hide, or rename, by selecting the heading and expanding the Advanced formatting options.
Styling your Table of Contents
In keeping with our philosophy of giving you options plus total control, our new Table of Contents element can be styled to look exactly like you need.
Start with a professionally designed template – and tweak it to perfectly fit your brand.
The Table of Contents element is available for both customers of Thrive Theme Builder and Thrive Architect – and of course, Thrive Member full access! – but there are some small differences.
If you own Thrive Architect, or are a Thrive Member, you can choose from 14 pre-designed templates, created by our professional design team.
If you only own Thrive Theme Builder, you’ll have access to just the starter template. Don’t worry, you can still achieve everything you need by customizing the starter template. If you want to save time however, consider upgrading to full Thrive Membership, so you can access our complete library of templates – as well as instant access to all our WordPress products.
Just pick a pre-designed template and watch your Table of Contents transform to match.
Choose the design that gets you closest to what you need, and get ready to make some customizations!
Each component of your Table of Contents can be individually styled:
- Top-section such as title
- Link hover effects
- Current section highlight effects
- Spacing and indentation
- Background colors and styles
If you’re familiar with the Thrive visual editor used in both Theme Builder and Architect, you’ll feel right at home. It feels like you’re editing your live website.
The overall Table of Contents element can be customized using the Thrive visual editor. Just select the component, make the changes, and hit Save.
If you want to customize individual components – for example, just the H3 headings – you can use the “Edit” button to unlock even more customization options. This powerful edit mode lets you lock in any changes, so there’s no risk of upsetting your careful design later.
Your WordPress website will instantly update to match.
Choosing a Main Color Palette
Matching colors across components in our pre-designed Table of Contents couldn’t be easier.
In just a few clicks, you can select a main color that matches your brand.
This affects a range of related color accents, from the border and top section, right through to the hover color on each linked heading.
Just like everything else, you can override any of these at any time. You have total control over how your Table of Content looks and feels!
One last thing… if you don’t like the wording “Table of Contents”, just replace it with something friendlier, like “Quick Links” or “Jump to an Article Section”. It’s up to you.
Sticky Scroll Behavior
Here’s an advanced way to offer a truly integrated Table of Contents experience.
Instead of a traditional Table of Contents at the top of your page, why not make it follow the user as they scroll?
You can achieve this with sticky scroll behavior, a funny way of saying it’s always visible, even when you read further down the page.
This would be perfect for tutorial-style content like an online course or step-by-step guide.
Simply select your Table of Contents element and enable the Sticky option under Scroll Behavior.
You may want to add a little extra ‘Distance from the top of the screen’ so your Table of Contents has a little room above when readers scroll down.
I know you’re excited!
But before you go adding a sticky Table of Contents to your site, there are a few things to be aware of.
Positioning your sticky Table of Contents
A sticky Table of Contents is best featured next to your content, like the example above.
It’s a purely stylistic choice whether it’s on the left or right side.
The easiest way to achieve this with Thrive Theme Builder, by adding your Table of Contents directly to the theme sidebar.
There are more technical methods for page templates without a sidebar, but that’s beyond the scope of this article.
I recommend creating a new theme page template called “Page with TOC” (or something similarly helpful). Then, whenever you publish a new page, you can easily choose whether to apply the Table of Contents.
Choosing a readable width
Don’t try to pack your Table of Contents into a standard width sidebar. That will crunch everything up into a thin, long mess.
Instead, use Thrive Theme Builder’s easy visual editor to extend the sidebar width.
When featuring a sidebar Table of Contents, we recommend using a page template that utilizes more of the available screen space – full-width with just enough side margin.
This gives both your content and Table of Contents enough room to do their jobs.
Choosing when to disable the sticky behavior
Finally, don’t forget to tell your Table of Contents to stop scrolling once the reader hits the end of your awesome content.
If you forget this step, your Table of Contents will obscure your footer!
Just set the Sticky until option to End of Parent Container to achieve this:
Thrive Theme Builder single-license & multi-license purchase options now available.
You should now have a good idea which types of content would benefit from a Table of Contents on your website.
You can learn more about setting one up in these tutorials:
Let us know your thoughts in the comments below, and please do share any great examples of well-designed Table of Contents from around the web. We’d love to see what inspires you!