In this tutorial we are going to see how to create an index or table of contents in our WordPress posts or pages.
Content Indexes in WordPress
Sometimes we miss inserting an index that makes it easier to read our posts or long pages. In this tutorial we are going to see two ways to create an index or table of contents that links to different sections of one of our pages or articles.
First we will see the manual option. HTML allows us to create indexes through code in a very simple way. As we will see, we will have to use “anchor” texts or HTML Bookmarks that will allow us to move easily through the different sections.
We will also look at the option to use the free Table of Contents Plus plugin. This plugin simplifies this task and is especially useful when we need to include indexes in a large part of our content. Let’s start!
Create index manually
We will start by seeing how to create our table of contents manually. This is very good because by doing it manually we will save ourselves from installing a plugin and waiting for updates and so on.
On the other hand, it is an especially recommended option if our posts and pages are usually short and we only want to add our index to some long ones. To create an index we will first have to mark the sections to which we want to jump or be redirected with an identifier or “anchor” text.
Later we will assemble the structure of the index and we will link to each one of those identifiers so that when clicking, it positions us in the correct place within our content.
Well then, let’s get to it. We will start by opening the page or article where we want to enter our index, and we will go to the HTML view to create the anchor text in the headers of each section. This step is the same as explained in the tutorial on . There are several ways to do it, in this case we are going to place the anchor text just above the H2 of our content to respect the styles of the headings:
Heading Title1
Heading Title2
Content section 2
His thing is that the “anchor text” of each section is descriptive, but you can use it however you want. Once we have marked the sections, we are going to assemble the index. We will also do it from the HTML view. We can place it wherever we want, although it is normal to place it in the upper area. The code would be similar to this:
Index of Contents
Heading Title 1 Heading Title 2 …
As we can see, the links and titles to each section will go there, and in each link we will use the corresponding “anchor-text”. If we wanted, we could also include a link to return to the index in each section of the content, in this way we will make browsing very long texts much easier.
Finally, we can customize our index as much as we want. In this case we have included an “index” class that we have then defined in the style sheet. If you want to learn more about HTML or CSS you can go through the and the . And so an index is created manually without the need for plugins, now we are going to see the next option.
Create index automatically with a plugin
Well, it’s time for the plugin option. As we advance at the beginning we are going to use the free Table of Contents Plus plugin, also known as TOC+, which allows us to automatically generate tables of contents within our posts or articles. We can download it from the .
To install it, we go as always to the WordPress desktop, “Plugin/Add new”, we look for it by its name and once located, we install and activate it to start using it. A new option will then appear in the “Settings/TOC+” menu. Clicking on it will open the Table of Contents Plus configuration screen.
We will see three tabs, from the first we can set the settings for the tables that will be created automatically, from the second configure options to insert a custom Site Map on any page.
The third is a link to the plugin’s help page and takes us directly to the developer’s website. In this case we are going to use only the first tab “Main settings”, let’s see what options we can configure from it.
- Position: We can include the table of contents or index “Before the first headline” (default option), “After the first headline”, “Above” or “Below”.
- show when: Show the table only when the number of headings is greater than or equal to the one indicated.
- Auto insert for the following types of content: From this option we will indicate where we want the tables to be inserted automatically. If we do not select any, it will not be included anywhere unless we expressly use the shortcode . Although we use the shortcode, the settings we configure on this page will be respected.
- Header text: If we want the table to have a header, for example “Table of Contents”. Within this same section we can configure whether to add an option to hide or show the displayed table.
- show hierarchy: If we want everything to be displayed at the same level or take into account the type of header.
- Number the list of elements: Add the numbering that corresponds to each element.
- Enable smooth scroll effect: If we activate it, the movement towards the anchor text will be smoother and not a sudden jump.
The other options have to do with the appearance of the table. We can change the width or the “Wrapper, which allows us to align the table to the right or left of the content, as well as the font size and style. As we see, depending on the configuration we use, our table of contents will be displayed in certain occasions and with a specific aspect.
And we already have our table of contents ready! Easy right? Well come on, if you need to use indexes you already know that you have these two options available, you just have to choose the one that best suits each case and create them 🙂
Summary and conclusion
As we have seen we have several possibilities when creating an index in our posts or pages. If we are not going to use indexes regularly, it is best to do it manually. To do this, we will first have to mark the sections that we want to use in the index with an identifier or anchor text and then assemble the index in HTML referring to those identifiers.
If you want to learn both HTML and CSS you can take a look at and . In the event that we are going to use indexes often on our website, it can be worth installing the Table Of Contents Plus plugin that will allow us to create them automatically according to various parameters that we can configure.
And that’s all! We hope it has been useful to you. As always we recommend the courses. More than 6044 videos available about WordPress, HTML, CSS, and much more 🙂
Facebook Comments
Disqus