How to Add a Table of Contents without a Plugin

Do you wish to add a table of contents in your WordPress pages and posts? It may be a good idea to do so. On smaller articles a Table of Contents usually is unnecessary. But it has a positive and significant impact on user experience for longer “guide” type posts. They have to browse to locate the information they need. A TOC makes it easy for readers to go to what they need. It also shows people the basic outline of your article. This helps them decide if this is the article for them. So are you are interested in adding a TOC to a few pages? Then you may want to know How to Add a Table of Contents without a Plugin.

A TOC can also help with SEO for your content. These helpful links also will duplicate your keywords. It is not clear if that visitor then cannot be considered a bounce as they did click a link. TOC may reduce your bounce rate. It also engages people quicker and brings them to content they are more likely to stay on the page longer. So they may also increase Time-on-Page.

Including a TOC in your content might improve your chances of getting a Google snippet. For specific searches, a brief summary is displayed above the preliminary list of results.

Make a Perfect Article that is Complete

When you are planning a longer article that could benefit from a Table of Contents there are some things to remember.

Make sure to outline your article before you start writing. This will keep you organized for sections that might need a link. And you might make a distinct section that people will want to click on. Clickbait basically. You should have the complete article completed, edited, and passed any checks you have for tone and grammar.

You will then enter the title, headlines, and body copy in blocks for the new WordPress block editor. Then go back and change any section heading to H2 or H3 tags as needed. The article should look good.

Usually, at this point, I place at least one image at the top of the post so it grabs attention right from the start. And I suggest making any changes that your WordPress SEO plugin is telling you to make. You want as good of a score as possible and don’t want to change your headings later. You want your headings and Table of Contents to match. So make your headings perfect now.

Now how we are going to link to different sections of the same page called anchor links. You may have seen anchor links when you stay on the same page but jump down the page:

Anchor links are jump menu links that direct you to a particular section of the page’s content below.

After you have entered your article, assign the anchors to sections by:

• Copying the body copy with all headings to a text editor of your choice to make notes. Delete all the body copy leaving only the headings you want to list and link in TOC.
• Read the headings you need links to and add a hyphen and one or two-word phrase you will call your anchor after them. As for this section above, I could call it – “articlecomplete”
• Now go to WordPress, highlight the first headline to link, and make a link to “#firstanchor”. These will be basically the topic of that section and if you make them logical this is much faster. There is a pound sign first which tells browsers to look on this page. Hit return to save that link and then go through the list of all headlines and make all of them an anchor link. I would save a draft of this page at this point in case of problems later.
• Now your anchors are there. If this page is live and saved you can check that they work. You can enter this in another tab of your browser: “yourdomain.com./yourpageurl#oneoftheanchors”. It should load that page and drop down to the heading with the anchor.

A table of contents is often created at the start of lengthy posts on many websites using anchor links. With a bit of CSS knowledge, you can be creative and give them a little more design.

On certain websites, the ‘anchor link’ might not be visible; instead, they are used on headers to direct links straight to the relevant areas.

When Inserting a Table:

• You can insert a Table where wanted With Extra Column.
  
• To construct a WordPress static table, use the Gutenberg Editor, and navigate to where you want the TOC. Then start a new block.
  
• To access the blocks list, click the “Plus” symbol. Click to put a “Table” block in the desired location.
  
• Using the drop-down choices for Column count and Row count, select how many rows, and columns to display. Count the number of headlines you made anchors above plus 1 for the rows. Usually, 1 Column is best to only have the headlines in the table. To access the WordPress Table block settings, click the gear icon in the page editor’s upper left corner. If you are not sure how you want to format it, don’t worry you can change it later. You can add rows or columns later if you need to. You can also delete unneeded rows or columns.

Format as Needed

When formatting and customizing, consider the styles when determining the table appearance. There is a default style, text, and background color. Table settings have three toggles for fixed-width table cells, Header and Footer sections, and Advanced Settings. Those will enable you to set an HTML anchor and add additional CSS class (es).

Click the “Publish” button after customizing each area as necessary. Or modify if the table was added to an already existing page. To inspect the new table, access the front end.

Once you have the formatting about right start inputting your text. I make the first line something simple like “Table of Contents”. Then enter the exact text of your headlines in each line in order. You might make any formatting needed for them like text color, bold or italic styling. Save it.

Link Each Line to the Anchor made before

You will now link each line to the Anchor you have to direct you to a particular section of the page’s content.

Select all of the first headline’s text and click the link or “chain” icon to make a link. Type or copy-paste from your notepad the first anchor. You can save it if you wish, reload the page, and check that it works.

Now complete that on all your headlines.

Google uses the Table of Contents to provide “jump to section” links in search results. And if your headlines are keyword rich it helps to have them twice in the copy usually.

So how do you actually add a table of Contents without a Plugin?

Well, when including a table of contents in a WordPress Post, you first add a table to each of the individual posts:

To do this:

• Click the “Edit” button on the post to which you wish to add a table. You will be directed to the Gutenberg block editor right then. If you have the “Classic Editor” plugin enabled you will have to disable it to use the newer Gutenberg editor.
  
• If you wish to make a static table, use a Table block. This one requires manual setup and is unable to extract dynamic data. But you might want to include a ‘dynamic table’. But it requires a plugin, so we’ll save that for a future article.
  
• You make anchors on the page where you want people to jump.
  
• You make a table at the top with an extra row so you can type the TOC name there.
  
• You enter all your headlines into the table.
  
• You make a link from the headlines to the anchors you made earlier.
  
• Save and check that it works.

How to Add a Table of Contents without a plugin is simple and avoids adding or buying more plugins. More plugins are more code and slow your site down.

When adding a Table of Contents in WordPress Manually

For a start, you may use HTML to create a Table of Contents or Make Use of Archives and Links Page Templates.

For anyone looking for a straightforward solution for their website, writing a TOC in HTML code is viable. You’ll achieve this by inserting a table into WordPress and adding bookmark connections to particular pages.

You may also look if your theme or editor has an example of a Table of Contents that works. You could copy it and modify it for each page you use it on.

Inserting a Table in WordPress Built-In Block Editor

Using the built-in block editor, WordPress makes adding tables simple.

Create a new page, write a new post, or edit an existing one. Once within the content editor, pick “Table” by clicking the (+) sign to add a new block.

You may either put “Table” into the “Search for a block” box or look for it under the “Formatting” section.

You will then have the option to select the number of columns and rows your table will have. By default, both figures are set at 2.

When making a table, you may put in the cells, which will resize based on the text and font size. You may use the setting on the right-hand side to make your cells fixed width if you wish.

Also available are sections for the table header and footer. Click on a cell in the table area where you wish to input a new row or column. In the next step, select “Edit Table.”

The same method can remove rows and columns. Pick “Delete Row” or “Delete Column” after clicking on a cell in the row or column you wish to remove.

The text in the columns of your table is left-aligned by default. You set this by clicking within a column and then selecting the “Change Column Alignment” button.

The alignment of your table may be changed by clicking the “Change alignment” button and choosing another setting.

It’s important to remember that these settings may cause your table to appear strange. Preview your article to ensure that none of them display in an unwanted way.

With the help of the table tools included in the editor, you have a lot of control over how your tables show. With its help, you may provide your facts to visitors in a manner that is simple to comprehend. The table block lacks some functions, such as search filtering and personalized sorting.

Additionally, you cannot apply the same table on other pages or sidebar widgets of your website.

You can install a TOC plugin if you want to create really complex tables.

How should you use a table of contents in Elementor?

Elementor can add a table of contents without a plugin automatically. It does this based on the order of heading tags in your content. You just have to use Elementor’s Table of Contents widget for WordPress. It serves as an anchor and directs visitors to the desired section.

When adding TOC in Elementor:

Navigate to the Post or Page you want the TOC on. Then use the Content tab to configure the content that appears in your table of contents. Start with the title above the list of anchor links the widget creates on its own.

After setting your heading tags in the WordPress editor, decide what material to add with each specific heading tag. Using a CSS selector, you may use the Exclude tab to remove particular heads from your article.

Next, you may select either numbers or bullets for the table of contents list using the Marker View setting.

Then the “Additional Options” section, you control options like Word Wrap, Minimize Box, and Hierarchical View.

You can configure Style Settings further on the Advanced tab.

How to Add a Table of Contents without a Plugin – Conclusion

Adding a TOC to a WordPress site is beneficial and simple, even without a plugin. All it takes is time and patience, and you’ll be all set!

if you enjoyed this guide feel free to see our complete list of WordPress How To Guides.

You may choose from any of the solutions mentioned above, which are all practical, simple, and appropriate for most users. The only drawback to the manual method is that you must keep track of your HTML anchor texts. Otherwise, it may not be easy if you regularly post new content. But if you’re a starting blogger and want to try a TOC on a couple of articles this works. You might decide if you like the look of a TOC. Then you can use other methods to determine if the time on-page metrics improve. Finally, you can also watch to see if SEO rankings improve. So get working today to Make a Table of Contents without a plugin.