My team was tasked with creating and disseminating branding guidelines and so I wrote a script using jQuery, JavaScript, CSS and HTML to create a self-generating table of contents that’s editable using the built-in WordPress text editor.

With my script, the WordPress admin user can use the built-in text editor to assign the appropriate attribute, “topic” for main headers and “subtopic” for subheaders, to create the table of contents without having to manually code it. The table of contents gets regenerated every time the user saves the page. (See screenshot below.)

This screenshot shows how the table of contents appears to the audience.

This screenshot shows what you see if you click on a link in the table of contents. As a bonus, I added “Back to Top” buttons by script so the admin user doesn’t have to add them manually. I also created differently styled blockquotes that change appearance and icon depending on which class you assign it.

I uploaded my script with detailed comments to my GitHub account.