Simple TOC – table of contents plugin

Simple TOC:

This plugin generates table of content for a post or a page using shortcodes, with a few clicks you get something that looks just like the table of contents to the right of this very text.

Background:

Nothing special, just read a question asking for a plugin that generates a Table of contents for a post or a page, and i figured that most of the plugins that do that are outdated and buggy.

Screenshots

What does it do?

This plugin makes it easy to create a wiki like TOC (table of contents) in your posts or pages using shortcode, no linking or creating anchor is needed.

Main features:

1. Auto generate heding links in TOC based on given tag eg: h2,h3 (new)
2. New TinyMCE (WordPress editor) button. (new)
3. Added a new heading for TOC. (new)
4. Create as many TOC as you want.
5. TOC is per page/post basis.
6. No coding or coding knowlage is required.

Download:

Download the latest Version from WordPress.org

Installation:

1. Extract the zip file and just drop the contents in the wp-content/plugins/ directory of your WordPress installation.
2. Then activate the Plugin from Plugins page.
3. Done!

Usage:

Once the plugin is activated you will see a new button in your tinymce (WordPress default) editor, and when you click on it a popup will show with 3 options:

• Auto TOC heading - insert once in the place you want your TOC to show and enter the tag used for your headings (eg: h2,h3...).
• TOC place holder - insert only once in the place you want your TOC to show.
• TOC Header - insert once or none at all, anywhere you want, this will show as the TOC itself heading.
• TOC Heading - insert as many headings as you want include there heading, this will be the text at the TOC link, Usually insert anywhere you have heading (h2,h3..).

When using "Auto TOC heading" then don't use "TOC place holder" and the other way around, they don't work nice together

Styling:

I left the styling up to you, the code generated includes a container div with the class "toc" and you can use that as your selector, or you can use this in your style.css file to get a similar look and feel of the default wikipedia TOC.

.toc{
    background-color: #F9F9F9;
    border: 1px solid #AAAAAA;
    padding: 5px;
}

this is it, enjoy and any feedback is welcome, also make sure to submit bug if you find any.

Change Log:

• 0.3 new auto heading generation, fixed html errors
• 0.2 New tinymce button for easy shortcode insertion. added a header for TOC.
• 0.1 initial release.