The visitor’s User Experience (UX) should be very important to you as a website owner or developer. However, it can be difficult to know whether you’ve covered all of your bases, and what else you should incorporate.
One element often overlooked is a Table of Contents (TOC) for your long-form content. The addition of a TOC to your website not only enables readers to find the exact section they’re interested in – your content will also appear more organized.
In this post, we’ll introduce the various options for creating a WordPress table of contents (including plugins, shortcodes, and HTML). We’ll then outline two popular styles and how you can achieve them. Let’s get started!
WordPress Table of Contents Plugins
Plugins are a way to extend functionality within WordPress, and there are several solutions available to help provide an easy way to add a TOC to your site.
A few of our favorites include Fixed TOC and CM Table of Contents. You can even use other plugins in conjunction, such as Q2W3 Fixed Widget, to further optimize the TOC on your website.
Installing a plugin is simple. Simply navigate to Plugins > Add New in the WordPress dashboard, then either upload the plugin’s .zip file or install it from the Plugin Directory. Once installed, you’ll then have full access to the range of functionality offered (which differs by plugin).
Table of Contents Shortcodes
Alongside plugins, you can also use shortcodes to further control how your TOC is displayed. These are just as they sound – dedicated snippets that can be pasted into the editor, letting you display the content practically anywhere on your page. They make it easy to add a table of contents to your posts, pages, sidebar, and widgets. Here’s how:
- Download a TOC plugin that uses shortcodes, or use a plugin without shortcodes in conjunction with a solution such as Shortcoder.
- Find the shortcodes offered by the plugin, or create them using Shortcoder.
- Copy the shortcodes, and paste them wherever you’d like within WordPress (in a blog post, for example).
The beauty of shortcodes is how versatile their placement can be – you can add them to the top, middle, or bottom of your pages and posts, or even in a sidebar widget.
Creating a WordPress Table of Contents Without Plugins
While plugins are the simplest way to create a TOC within WordPress, you can also implement one manually. Here are two methods.
HTML Table of Contents
While HTML can be scary to many, creating a TOC with code can be a great option for anyone who needs a simple solution on their website.
The brief overview for achieving this is to insert a table within WordPress, and include bookmark links to specific pages. This is by far the simplest option – with no frills or bulk. Of course, you can go all out with this option if you’d like, by incorporating colors, various font styles and headings, and more. You’re bound only by your own creativity and knowledge.
Archives and Links Page Templates
A TOC doesn’t always need to be located on individual posts and pages. Instead, you can create a ‘master’ TOC using WordPress templates.
These are preset page designs, which enable you to create dedicated pages for site elements such as archives and links. These pages can then be used on your website as the ‘master’ TOC, directing users to the exact content they’re looking for. For example, take Leaving Work Behind’s Archives page:
The templates for these pages are usually named archives.php and links.php (although you can rename them). While some themes do include these pages, not all do. However, you can create your own with very little coding knowledge needed.
Table of Contents Styles
The style of your tables of contents is another important factor. After all, this can enhance user experience. Let’s look at the two most popular styles.
Floating Table of Contents
A floating TOC is a widget that remains fixed on the side of the page. Implementing it takes two steps. First, you’ll need to set up a TOC and add it to your WordPress site as a widget (using one of the previous methods mentioned).
Once that’s done, you’ll need to use the Q2W3 Fixed Widget plugin (or similar) to keep the TOC widget ‘stuck’ to the side of the page. With this plugin installed, go back to the Widgets area of your site and open the TOC widget. Now enable the Fixed widget checkbox that appears.
Once this option is enabled, the TOC will no longer disappear from page view as the user scrolls. Instead, it will scroll along with the page’s contents, so it’s always present.
Table of Contents Sidebar
Similar to the floating TOC, in this method a sidebar is displayed on the side of your web page. However, instead of scrolling along with the user, the TOC sidebar stays in a fixed position (such as the one on WPBeginner):
The TOC sidebar is very easy to create. Simply create a TOC widget if possible, or add a shortcode to an existing widget. Your TOC will then appear as a fixed aspect of the sidebar.
The addition of a TOC to your website is more than a stylistic change – your UX is also impacted. Fortunately, there are a few different methods to create them, as well as various display styles.
For plenty more site optimization tips and tricks, WP Engine can help. We also offer stellar 24/7 support, and our variety of plans will ensure you’re able to find the one that fits your needs.