Add A Table Of Contents To

Content Navigation: How to Create a Table of Contents in WordPress Without A Plugin

My post shows you how to create a table of contents in WordPress without using plugins.

A table of contents helps your visitor find the information they need quickly.

The links in the table of contents jump to the part of your post your visitor wants to read.

Here is an example of a table of contents.

table of contents example

Let us begin.

Step One – Complete Your Blog Post

I recommend you finish your blog post before adding your table of contents.

I will put my table of contents for this post above the first sub-heading.

Example blog post

Step Two – Create A Heading Block

Create a header block in your blog post. I use the / shortcut.

Type / followed by the letters of the block you need.

Click Heading.

Header block

Type Table Of Contents.

Decide what heading size you want for the heading.

You can’t use H1 because that is the title of your blog post.

Heading

Step Three – Create A List Block

Next, create a list block.

Type / and type List.

Click List.

List block

Now you can create a table of contents.

Step Four – Type Your First Sub-Heading

Type your sub-headings into your list block.

The first heading for this post is When is Chateau De Loei open?

First heading

Step Five – Create A Destination Anchor

The table of contents links to the sub-headings in the blog post.

Click on the sub-heading and open the advanced tab.

Advanced tab

Step Six – Add Text To The HTML Anchor Data Field

Write one or two words in the HTML Anchor data field.

Ensure you use a between words with no spaces.

In this example, I added chateau-open.

HTML anchor

Step Seven – Add Links To Your Table Of Contents

Copy the text in the HTML anchor data field and return to the table of contents.

Highlight the sub-heading in your list block and select the link icon.

Create link

In the link box, type # followed by the text in the HTML anchor data field.

Type # first, or your link won’t work.

In my example, I typed #chateau-open.

link text

Select the submit icon.

WordPress recognizes this is an internal link because of the # symbol.

Submit

The text in the table of contents changes color to show it is now a clickable link.

Clickable link

Step Eight – Complete Table Of Contents

Complete your table of contents by adding your sub-headings to the List block.

Sub-headings

Add text to the HTML anchor field.

HTML anchor

Then copy the text from the HTML anchor data field.

Highlight the heading in your table of contents.

Highlight text

Click the link icon, and type # followed by the text you copied from the HTML anchor field.

Paste text

Select submit to create a clickable link.

Submit

The heading text changes color to show it is now a clickable link.

Clickable link

Continue this process until you have your sub-headings in your table of contents.

Step Nine – Publish And Test

I recommend testing your table of contents links to ensure they work.

You could make mistakes when creating a table of contents without a plugin.

You don’t want your visitors to have a poor user experience with broken links.

Test links

Add A Table Of Contents In WordPress Without A Plugin Video Tutorial

Frequently Asked Questions

How Do I Use A Plugin To Add A Table Of Contents In WordPress?

To manually add a table of contents in WordPress with a plugin, you can follow these steps:

Install a table of contents plugin

There are a variety of plugins available that can help you create a table of contents in WordPress.

Create a new page or post

Open the WordPress editor for a new page or post, and enter the content you want to include in your table of contents.

Add the table of contents

Use the table of contents plugin to add a table of contents to your page or post. A plugin will typically involve inserting a shortcode or using a button in the WordPress editor to generate the table of contents.

Configure the table of contents

After adding the table of contents, customize its appearance. 

Publish your page or post

Once satisfied with your table of contents, publish your page or post to make it available on your WordPress website.

Adding a table of contents in WordPress is a simple process using a table of contents plugin.

These plugins make it simple to create and customize a table of contents for your WordPress pages and posts.

How Do I Add A Table Of Contents In The WordPress Classic Editor?

To add a table of contents in the WordPress Classic editor, you can follow these steps:

Install a table of contents plugin

To add a table of contents to your WordPress page or post, you will need to install a plugin that can generate the table of contents for you.

There are a variety of table of contents plugins available for WordPress, so choose the one you like and install it on your WordPress website.

Open the WordPress Classic editor

Open the WordPress Classic editor for the page or post where you want to add a table of contents.

Add headings to your content

For the table of contents plugin to generate a table of contents, you need headings in your content.

Use the formatting options in the WordPress Classic editor to add them to your content, using the appropriate heading level for each section ( H2 for main sections and H3 for sub-sections, etc.).

Insert the table of contents

Use the table of contents plugin to insert a table of contents into your page or post.

Using plugins will typically involve inserting a shortcode or using a button in the WordPress Classic editor to generate the table of contents.

Configure the table of contents

After adding the table of contents, you can use the plugin’s settings to customize its appearance and behavior.

Publish your page or post

Once satisfied with your table of contents, publish your page or post to make it available on your WordPress website.

Adding a table of contents in the WordPress Classic editor is a simple process using a table of contents plugin.

These plugins make it simple to create and customize a table of contents for your WordPress pages and posts.

Conclusion

You do not need a plugin to create a table of contents for your blog posts.

Complete your blog post and create a table of contents using a List block.

Type your sub-heading into your list.

Next, click on your post’s sub-headings and add text to the HTML anchor data field under the advanced tab on the right.

To make clickable links, return to your list block and highlight each sub-heading.

From the toolbar, select the link icon. Type # followed by the HTML anchor text, then click Submit.

Once completed, I recommend publishing your posts and checking your links.

Creating a WordPress website has many steps. Visit my How To Make A WordPress Website article to learn each step.

Do you use Hostgator hosting? Ensure you use the latest PHP version for your website. Visit my Update Hostgator PHP Version Tutorial to learn more.

I hope you found my article informative. If you have any questions, please leave them below.


Posted

in

,

by

Comments

30 responses to “Content Navigation: How to Create a Table of Contents in WordPress Without A Plugin”

  1. Delwar Hossen Dihan avatar
    Delwar Hossen Dihan

    Thank You brother.

    1. newblogr avatar

      You are welcome.

    2. Beatrice avatar

      I have read how to create table of contents on other sites but I couldn’t understand. You have explained this method clearly here , and now I can follow your guideline and apply on my blog. Thanks

      1. newblogr avatar

        Hello, Beatrice. Thank you for taking the time to leave a comment. I’m glad you found my post helpful. Good luck with your blog.

  2. james smith avatar

    I like to read well-written articles. It looks like you spent a lot of time and effort on your blog. I learned a lot from your article and I have already bookmarked and am waiting to read a new article. keep up the good work!

    1. newblogr avatar

      Thank you. I appreciate your comment.

    1. newblogr avatar

      Glad you you found it helpful.

  3. ANKIT avatar
    ANKIT

    Thank you Sir

    1. newblogr avatar

      You are welcome. Thank you for your kind comment.

  4. Soulseeker avatar

    Thank you for this!

    1. newblogr avatar

      You are very welcome. Thank you for your comment.

  5. Anirudh avatar

    What if i dont use gutenberg?

    1. newblogr avatar

      I only use Gutenberg, if you use something else, try to find a tutorial for that.

  6. Hendra Wijaya avatar

    Thank you for your article brother… nice website.

    1. newblogr avatar

      Thank you for your kind comment.

  7. Shakib Hasan avatar

    How do I make smooth scroll in the table of content ? waiting for your answer.

    1. newblogr avatar

      Hello,I don’t use this feature on my site but here is a link to a post that could help you. https://www.darrelwilson.com/how-to-add-smooth-scroll-to-wordpress/

      1. Shakib Hasan avatar

        OK Buddy. I have got it from another blog and clearly explain for the newbie. Just see it –
        https://primomate.com/custom-table-of-contents-and-smooth-scroll/

        1. newblogr avatar

          Hi, I am glad you found a solution. Good luck with your site.

  8. Erin avatar
    Erin

    So I went through and created all these links to headings on my page, but when I click on the link, it brings me to just below the heading. I want it to bring me to the heading so the heading is visible. Is that possible?

    1. newblogr avatar

      Hello Erin, thank you for your comment. On my website, the links go to the heading. Are you using the latest version of WordPress.org?

  9. Natalie avatar

    Thank you! This was exactly what I needed. You made it easy to understand, even for someone new to WordPress.

    1. newblogr avatar

      You are welcome. I appreciate your kind comment.

  10. Engineeringmix avatar

    Thank you, Useful article for me, I try my site, thank you 😊

    1. newblogr avatar

      You are welcome. Thank you for your comment.

  11. 123plus หวย avatar

    Thanks for admin. nice post

    1. newblogr avatar

      Thank you for your comment.

  12. Alaaeldin avatar

    Thanks a lot, useful article, I will try that on our website blog: https://www.realfreelancer.com/blog
    Regards from Sudan.

    1. newblogr avatar

      You are welcome. Thank you for your comment.

Leave a Reply to 123plus หวย Cancel reply

Your email address will not be published. Required fields are marked *