This tutorial is going to walk you through how to easily add a table of contents to a website created with the Oxygen Builder. Some of you may recognize this, but our website is made with Oxygen, and contains a table of contents directly to the left of this text. We're going to walk you through the exact method that we used to add this element to our site.
Adding a table of contents to your website is not only good for your readers, but it can actually give your site a SEO boost.
Google will make use of these table of contents links in two ways. One would be adding a “Jump To” link to users when relevant to their respective search term. Here's an example of that type of link .
They could also display the table of contents links below the article like so:
More links on the page means more clicks on your entry.
The search engine hasn't confirmed this, but they may also use this when creating featured snippets. Whatever the case is, adding a table of contents to your website built with Oxygen Builder is a great idea.
Let's talk about how to do that.
The process of adding a table of contents to your Oxygen Builder website is actually very easy. We're going to be using a plugin that automatically generates a table of contents from the headings within the content of the post. That means that all you need to do is set up the plugin, added to your post template, tweak it a bit, and call it a day.
There are a couple of plugins out there, but our favorite one to use is LuckyWP Table of Contents. It works well with the Oxygen Builder and has a ton of settings to fine tune it. It is also compatible with some of our other favorite plugins like Rankmath, WP Rocket, WPML and others. Basically, if you're looking to add a table of contents to your Oxygen Builder website, this is what you need to be using.
Once installed, you can quickly add the table of contents to any template by loading it, adding a short code block, and inputting the following:
Once the shortcode is inserted into your template, save everything, and you're good to go. We recommend taking a look at multiple posts that now incorporate the table of contents.
Typically, you'll need to exclude some general headings (which are standard throughout your template) from displaying on the table of contents. You can also fine tune the links that this plugin generates. By default it uses underscores to separate words, like so:
https://isotropic.co/add-a-back-to-top-button-to-Oxygen-builder/#how_to_add_a_back_to_top_button_in_Oxygen
We prefer using hyphens instead, as it looks better:
https://isotropic.co/add-a-back-to-top-button-to-Oxygen-builder/#how-to-add-a-back-to-top-button-in-Oxygen
The settings for this table of contents are fully featured and allow you to change everything that needs to be changed:
This tutorial covered a quick, simple, and easy way to add a table of contents to Oxygen Builder. Using a third party plugin, this is very easy to do, and can be implemented in any page on your website. We recommend using this for your blog posts as it not only makes them easier to navigate for your users, but gives them a massive SEO boost in the eyes of Google.
As always, if you have any questions about adding a table of contents to your Oxygen Builder website, feel free to reach out in the comments.
Hi James, how do you add the table of contents? Can't seem to see it when I followed what you suggested in this post.
Thanks,
Edmund
Lucky WP TOC -- install that plugin, then simply place this shortcode on you blog post template:
Hi, thank you very much. Why you use Lucky WP Toc insted of Oxygen Table of Content Element? Propably because at the moment you build it, the Oxygen Element does not exist.
How would you decide today?
I ask, because, i try to use as few as possible plugins, but the Oxygen Table of content isn't SEO-friendly.
I still use it. Pretty light and better for SEO imo when compared to composite elements
If you have OxyExtras, that's included too. You can also use JS to do this (which is what LuckyWP does I think)