How to Make Your own Custom Table of Contents

Are you looking for designing your own custom table of contents?

I know you are 😋

So without talking any nonsense,

I am going to show you how you can design your own custom table of contents.

You can do it by two different methods.

  • Method 1: Using plugin (Automated)
  • Method 2: Using custom CSS and HTML markup (Manual)

So question is,

How to Make Custom Table of Contents?

Let’s start first with:

Method 1: Using Plugin (Automated)

Note: This method is for those people who want to keep the process automated and save their time.

First of all, you need to install and activate a plugin called Easy Table of Contents.

Let’s do some settings changes in easy table of contents plugin.

Go to Settings > Table of Contents

On the setting page, uncheck the toggle view option in the General section.

toc-toggle-view

And in the Appearance section, select the custom theme style for the table of contents.

TOC custom theme

Now go to the Advanced section and check the Lowercase and Hyphenate both of the options and click to the Save Changes button to save all the settings changes.

TOC advance section

Now, by default your table of contents may look like this:

How to Make Your own Custom Table of Contents 1

To give it a new look and feel, go to your Appearance > Customize > Additional CSS and paste the following CSS.

Custom Table of Contents Style 1 (Automated):


#ez-toc-container {
    display:block;
    border-width:2px!important;
    padding: 5px 20px 20px;
    margin: 40px 0px;
    overflow: hidden;
    border-radius: 5px;
}

#ez-toc-container ul.ez-toc-list a {
    display: block;
}

.ez-toc-title {
    padding-top: 10px!important;
    padding-bottom: 10px!important;
}

.ez-toc-list li {
    position: relative;
    margin: 0;
    cursor: pointer;
    background: #f7f7f7;
    border-bottom:1px solid #ddd;
    float: left;
    width: 100%;
}

.ez-toc-list li a {
    color: inherit;
    padding: 6px;
}

.ez-toc-list li a:hover {
    text-decoration: none!important;
    background: #e8f3e975;
}

.ez-toc-list li:nth-child(odd) {
    background: #ffffff!important;
}

.ez-toc-list li:nth-child(even) {
    background: #f7f7f7!important;
}

.ez-toc-list li > ul > li:nth-child(odd) {
    background:#f7f7f7!important;
}

.ez-toc-list li > ul > li:nth-child(even) {
    background:#ffffff!important;
}

.ez-toc-list li > ul > li:first-child,.ez-toc-list li:first-child {
    border-top:1px solid #ddd;
}

.ez-toc-list li > ul > li:last-child {
    border-bottom:none;
}

@media(max-width:768px){
#ez-toc-container {
    padding: 5px 10px 10px;
}
}

After pasting the above CSS to your theme, your table of contents will look like this:

TOC style 1

Now you have a good looking and fully mobile responsive custom table of contents.

If you want some little tweaking in your design like changing the background color, link color, border color, title color, go to Settings > Table of Contents.

Scroll down to the Appearance section and change all of these according to your choice.

TOC custom theme settings

If you want to give another look to your table of contents, replace the following CSS to the previous one.

Custom Table of Contents Style 2 (Automated):


#ez-toc-container {
    display:block;
    padding: 5px 20px 20px;
    margin: 40px 0px;
    overflow: hidden;
    border-radius: 5px;
}

#ez-toc-container ul.ez-toc-list a {
    display: block;
}
#ez-toc-container ul li {
    font-size: 100%;
    margin-bottom: 5px;
}

.ez-toc-title {
    padding-top: 10px!important;
    padding-bottom: 10px!important;
}

.ez-toc-list li {
    position: relative;
    margin: 0;
    cursor: pointer;
    border-bottom:1px solid #ddd;
    border-top:1px solid #ddd;
    float: left;
    width: 100%;
}
.ez-toc-list li a {
    color: inherit;
    padding: 6px;
}

.ez-toc-list li a:hover {
    text-decoration: none!important;
    background: #e8f3e975;
}

.ez-toc-list li {
    background: #ffffff!important;
}
.ez-toc-list li > ul > li:first-child,.ez-toc-list li:first-child {
    border-top:1px solid #ddd;
}

.ez-toc-list li > ul > li:last-child {
    border-bottom:none;
}
@media(max-width:768px){
#ez-toc-container {
    padding: 5px 10px 10px;
}
}

Now you have got custom table contents like this:

TOC design 2

That’s all.

Now let’s talk about:

Method 2: Using custom CSS and HTML markup (Manual)

Note: This method is for those who really care about the speed and security of their blogs or websites and want to keep things fully custom.

Now in this method, we will try to achieve the same custom table of contents design without the help of any plugin.

Let’s do it:

Go to Appearance > Customize > Additional CSS and paste the following CSS.

Custom Table of Contents Style 1 (Manual):


#toc-container {
    display:block;
    background:#f9f9f9;
    padding: 5px 20px 20px;
    margin: 40px 0px;
    border-radius: 5px;
}

#toc-container ul {
    margin:0;
}
#toc-container ul li {
    font-size: 100%;
    list-style:none;
}

#toc-container .toc-title-container h2{
    margin-bottom:0;
}

#toc-container .toc-title-container .toc-title {
    font-size:22px;
    padding-top: 14px;
    padding-bottom: 16px;
}

#toc-container .toc-list li {
    position: relative;
    cursor: pointer;
    border-bottom:1px solid #ddd;
    width: 100%;
}
#toc-container .toc-list li a {
    display: block;
    color: #000;
    padding: 6px;
}

#toc-container .toc-list li a:hover {
    text-decoration: none;
    background: #e8f3e975;
}

#toc-container .toc-list > li > ul{
    margin-left:25px;
}

#toc-container .toc-list li:nth-child(odd) {
    background: #ffffff;
}

#toc-container .toc-list li:nth-child(even) {
    background: #f7f7f7;
}

#toc-container .toc-list li > ul > li:nth-child(odd) {
    background:#f7f7f7;
}

#toc-container .toc-list li > ul > li:nth-child(even) {
    background:#ffffff;
}

#toc-container .toc-list li > ul > li:first-child,.toc-list li:first-child {
    border-top:1px solid #ddd;
}

#toc-container .toc-list li > ul > li:last-child {
    border-bottom:none;
}

@media(max-width:768px){
#toc-container {
    padding: 5px 10px 10px;
}
}

After the pasting above CSS, you have to paste the following HTML markup evrytime in the post editor where you want to show your custom table of contents.

<div id="toc-container">
<div class="toc-title-container">
<h2 class="toc-title">Table of Contents</h2>
</div>
<ul class="toc-list">
    <li><a href="#heading-1">1. Heading 1 for Testing Purpose</a></li>
    <li><a href="#heading-2">1. Heading 2 for Testing Purpose</a></li>
    <li><a href="#heading-3">3. Heading 3 for Testing Purpose</a></li>
    <li><a href="#heading-4">4. Heading 4 for Testing Purpose</a></li>
    <li><a href="#heading-5">5. Heading 5 for Testing Purpose</a></li>
    <li><a href="#heading-6">6. Heading 6 for Testing Purpose</a></li>
</ul>
</div>

post editor text mode

Now you have to give a unique ID to every heading.

How to Make Your own Custom Table of Contents 2

And replace that ID in the HTML markup of the table of contents.

That’s all.

Now, you have got your own custom table of contents without any plugin.

If you want to try another look, replace the following CSS to the previous one.

Custom Table of Contents Style 2 (Manual):


#toc-container {
    display:block;
    background:#f9f9f9;
    padding: 5px 20px 20px;
    margin: 40px 0px;
    overflow: hidden;
    border-radius: 5px;
}
#toc-container ul {
    margin:0;
}
#toc-container ul li {
    font-size: 100%;
    margin-bottom: 5px;
    list-style:none;
}

.toc-title-container h2{
    margin-bottom:0;
}

.toc-title-container .toc-title {
    font-size:22px;
    padding-top: 14px;
    padding-bottom: 16px;
}

.toc-list li {
    position: relative;
    background: #ffffff;
    margin: 0;
    cursor: pointer;
    border-bottom:1px solid #ddd;
    border-top:1px solid #ddd;
    width: 100%;
}
.toc-list li a {
    display: block;
    color: #000;
    padding: 6px;
}

.toc-list li a:hover {
    text-decoration: none;
    background: #e8f3e975;
}

.toc-list >li > ul{
    margin-left:25px!important;
}

.toc-list li > ul > li:last-child {
    border-bottom:none;
}
@media(max-width:768px){
#toc-container {
    padding: 5px 10px 10px;
}
}

And if you want to keep simple custom table of contents, you can replace the following CSS to the previous one.


#toc-container {
    background: #f9f9f9;
    border: 1px solid #ddd;
    display: table;
    margin-bottom: 1em;
    padding: 20px;
    width: auto;
}
#toc-container > ul{
    margin:0 0 0 8px;
}

#toc-container h2{
    margin:0;
}

#toc-container .toc-title {
    font-size:20px;
    margin:0 0 10px 0;
}

#toc-container li a{
    color:#FF3713;
}

#toc-container li, #toc-container ul, #toc-container ul li{
    list-style: none;
}

Now your table of contents will look like this:

How to Make Your own Custom Table of Contents 3

That’s all for this tutorial.

If you have any query related to modifying the CSS or something else, you can comment on this post. I will try to reply to your question as soon as possible.

One small request: If you think, this custom table of contents tutorial can help someone, don’t forget to share it with them.

Thanks!

See you in the next article.

113 Shares
Nazim Ansari

I love to code and design beautiful websites using the most loving CMS (WordPress) in the market. Here at WP Code Media, I love to share my expertise in WordPress and help bloggers to improve their blogs.

10 thoughts on “How to Make Your own Custom Table of Contents”

  1. Hey, Nazim Ansari
    thank you so much for this great article you have in a simple way that everyone can understand easily. glad your blog will grow up as best coding blogs in India

  2. Just landed here from Facebook and found this article really appreciating.

    Actually, I was looking for this custom TOC from a long time. Finally got it here.

    So a million thanks for sharing this.

  3. Hey Nazim,
    Thanks for the wonderful and comprehensive post on custom table design. I was really in need for it after I saw such custom tables of content on blogs like masterblogger.

Leave a Comment

113 Shares