How to Add a Table of Contents to WordPress Website Content

I’ve always been a big fan of how Kinsta implements a Table of Contents for long-form Blog posts, so I wanted to set out to replicate the functionality for myself.

This guide will teach you how to go about adding a Table of Contents to your website, using either Elementor Pro or a WordPress plugin (FREE).

Option 1 - Elementor Pro

For the steps below, I’ll assume you already have Elementor Pro which included the Table of Contents widget.

Again, we are setting out to mimic Kinsta’s Table of Contents, so you are free to deviate from these instructions as desired for your particular website, and if I don’t mention a specific setting, it is safe to assume I went with the defaults.

  1. Edit any of your existing Blog posts with Elementor.
  2. Drag the ‘Table of Contents’ widget to your post.
  3. Content > HTML Tag > H6. (Note: For SEO, typically you do not go beyond H5 headings in long-form posts, so it is safe to use H6 here.).
  4. Content > Anchors by Tags > H2. (Note: This tells Elementor to only (and automatically) populate the TOC with H2 headings and this is to prevent the TOC from getting out of control in terms of length and complexity.).
  5. Content > Marker View > Bullets.
  6. Content > Icon > None.
  7. Content > Additional Options > All should be toggled OFF.
  8. Style > Box > Background Color > #f9f9fb.
  9. Style > Box > Border Width > 0.
  10. Style > Header > Typography > 24px.
  11. Style > Header > Separator Width > 0.
  12. Style > List > Text Color > Set this to match the color you already use for your links and do this for all three states (Normal, Hover, and Active).
  13. Style > List > Underline > Turn OFF for all three states (Normal, Hover, and Active).
  14. Advanced > Custom CSS > Use the CSS provided below, adjusting the ‘#BD1D8B’ value to match your color from the previous step.
				
					/* TABLE OF CONTENTS */
.elementor-toc__list-item-text-wrapper {   
    display: inherit;
}
.elementor-toc__header-title {
    margin-bottom: -20px;
}
ul.elementor-toc__list-wrapper {
    margin-left: 1.4em;
}
.elementor-toc__list-item-text:before {
    color: #999;
    content: "→";
    margin-right: 1em;
  	left: 1em;
    position: absolute;
}
.elementor-toc__list-item-text {
  	background-image: linear-gradient(transparent calc(100% - 1px), #BD1D8B 1px);
  	background-position: 100% center;
  	background-repeat: no-repeat no-repeat;
  	background-size: 100% 100%;
    margin-left: -7px;
}
.elementor-toc__list-item-text:hover {
    background-size: 0 100%;
}
				
			

With your widget configured just the way you want it, you will want to save it as a Global Widget so that you can use it over and over again.

  1. Right-click anywhere on the widget and choose ‘Save as a Global’.
  2. Enter the desired name for your widget.
  3. Click ‘Save’.

Now, any time you create Elementor-based content (Pages, Posts, etc.) on your website, you can easily drop in your TOC Global Widget, and it will always have the same, consistent styling.

A huge benefit to going the Global Widget route is that you can make changes to the widget as you go along and those changes will automatically be replicated on any content where you have placed your Table of Contents widget.

Option 2 - WordPress Plugin (FREE)

If you don’t own Elementor Pro and/or you are looking for a solution with a bit more flexibility and functionality, then this is a great option for you.

In the steps below, I created the same Tables of Contents as I did with Elementor Pro, and please note that if I do not specifically mention a setting, that means I went with the default setting.

  1. Install and activate the Easy Table of Contents plugin (FREE).
  2. WordPress Dashboard > Settings > Table of Contents.

General

  1. Enable Support > Enabled ‘Posts’.
  2. Auto Insert > Enabled ‘Posts’.
  3. Toggle View > Disable.
  4. Show as Hierarchy > Disable.
  5. Counter > None.

Appearance

  1. Width > 100%.
  2. Title Font Size > 24 px.
  3. Title Font Weight > Bold.
  4. Font Size > 18 px.
  5. Theme > Custom.

Custom Theme

  1. Custom Theme > Background Color > #f9f9fb
  2. Custom Theme > Border Color > #f9f9fb
  3. Custom Theme > Title Color > #000
  4. Custom Theme > Link Color > Set this to match the color you already use for your links.
  5. Custom Theme > Link Hover Color > Set this to match the color you already use for your links.
  6. Custom Theme > Link Visited Color > Set this to match the color you already use for your links.

Advanced

  1. Headings > Uncheck all except ‘H2’.
  2. Title Font Weight > Bold.
  3. Font Size > 18 px.
  4. Theme > Custom.

Further Design

The following CSS was used to complete the overall design.

				
					/* TABLE OF CONTENTS */
#ez-toc-container {
    box-shadow: none;
    padding: 40px;
}
p.ez-toc-title {
    padding-bottom: 15px;
}
ul.ez-toc-list a {
	margin-left: 30px;
    line-height: 28.6px;
  	background-image: linear-gradient(transparent calc(100% - 1px), #BD1D8B 1px);
  	background-position: 100% center;
  	background-repeat: no-repeat no-repeat;
  	background-size: 100% 100%;
  	position: relative;
  	text-decoration: none;
  	transition: all .2s;
}
  
ul.ez-toc-list a:before {
    color: #999;
    content: "→";
    margin-right: 1em;
  	left: -25px;
    position: absolute;
}
ul.ez-toc-list a:hover {
    background-size: 0 100%;
}
#ez-toc-container a:hover {
    text-decoration: none;
}