How To Make a Minimal Table of Contents (EASY) on WordPress

A few people have asked me how to make the Table of Contents I have on this blog. Before we begin, here’s what my Table Of Contents looks like:

My design was inspired by the TOC design module in the Powerkit plugin. The plugin is overall pretty nice because you can disable modules/features that you don’t use.

However, it’s still slightly more bloated compared to coding an entire TOC from scratch or using LuckyWP Table of Content and add a bit of additional CSS. For some reason, Powerkit loads everywhere on my site instead of just the posts page. I have learned that if you use a theme from Code Supply Co. (the people who made Powerkit), it doesn’t happen. If you do have a theme from them, I would just stick with Powerkit for a quick and pretty solution.

This tutorial is on the latter solution.

I personally think it’s pretty clean and minimal and gets the job done without making my site heavy.

Using the LuckyWP Table of Content Plugin

Download the LuckyWP Table of Content plugin and activate it from your WordPress site

Plugin Configuration

Now, here are the configurations I had for my site. Feel free to enable/disable things that are more specific to your needs.

  • GENERAL:
    • Minimum count of headings = 2
    • Depth = 6
    • ENABLE hierarchical view
    • Numeration = Decimal numbers (nested)
    • Numeration suffix = None
    • DISABLE toggle show/hide
    • ENABLE smooth scroll
    • Scroll offset top = 24px
  • APPEARANCE:
    • Everything is set to default but I did have my Color Scheme set to inherit from theme
  • AUTO INSERT
    • ENABLE, After first block (paragraph or heading).
  • Misc.
    • List Markup Tags: UL/LI (important to set if you want to use the CSS styling below)
    • The SEO options seem pretty cool but I disabled them for now. I know many would find using rel=nofollow for their table of content anchor links helpful to preserve Link Juice and what not.

Styling the Table Of Content

If you don’t know how to add CSS to your WordPress site, check out this quick guide for non-coders here. Here’s the CSS code I used to make it:

/*lucky wp toc styling - Milo Lam*/

.lwptoc_title {
	margin-left: -1.2em;
  font-size: 0.8em;
}

.lwptoc {
	border-top: 1px solid #d6d6d6;
border-bottom: 1px solid #d6d6d6;
}

.lwptoc ul li{
	list-style-type: square !important;
}

If you want to style your links within the TOC, add this additional line of code (for example, adding an underline on all the links):

.lwptoc a {
	border-bottom: 1px solid #HEXCOLOROFCHOICE;
}

And, that’s it! Let me know in the comments if this was helpful or if you made something even cooler using LuckyWP.

Leave a Comment

Milo Lam

Copyright © 2021 Milo Lam // Digital Marketing Guy