TOC Boxes 1.2 With Multipage Support Released

I’m proud to announce that, thanks to Sascha’s hint, TOC-Boxes now support multi-page posts.

Download it as usual at wordpress.org.

Read more >>

TOC Boxes 1.1.1 Released

A minor update of my TOC Boxes plugin is out. Besides fixing some small glitch, it adds the CSS class toc-anchor to the generated named anchors.

These anchors are inserted into the post to serve as link targets for links in the TOC box, and are (usually) invisible. The change mainly affects themes with unusual CSS styling for anchors in general, such as mentioned in my discussion with Daniel Nautré.

TOC Boxes 1.1 Support Hyperlinks In Headings

My first version of Table Of Conten Boxes did not support hyperlinks in headings. That is, a hyperlink in a heading would mess up the TOC entry.¹

Version 1.1 adds support for this.

Download the plug-in, or visit the plug-in homepage to find out more about it.

1. Technically speaking, it would result in a nested anchor element, which is not valid (X)HTML, so that the browser would render only rubbish. [↩]

A New Plugin Is Born: TOC Boxes

Just (a really) short note:

Most of my spare time this year I’ve been a busy bee working on WordPress plug-ins. Besides making advances towards the next Sliding Notes milestone, I’ve implemented a new plug-in: Table Of Content Boxes. It’s ajaxish, freely positionable, good looking…

Check it out on the plug-in homepage,¹ and have fun with it.

1. I’ve closed comments on this post in favor to the plug-in homepage. [↩]

WordPress SEO Table Of Contents

This is the home of the WordPress SEO Table Of Contents plugin: A freely positionable, AJAX-ishly collapsible, CSS styleable, fancy table of contents box for WordPress posts and pages.

WordPress SEO Table Of Contents Features

• Automatic recognition of headings up to any level.¹²
• Table of contents wrapped in an aesthetically shaped box.
• Dynamically collapsible to an unobtrusive size, to maximize space for content. (Click on the table of contents box header to see it.)
• Freely positionable through a WordPress shortcode. (Where the shortcode is, there the table of contents box will appear.) Great if you want an intro chapter to be displayed before the table of contents.
• Freely styleable via CSS classes and inline styles, all supplied via shortcode arguments.
• Multiple table of contents boxes embeddable, through multiple shortcodes in the post. Useful for long posts.
• As of version 1.1: Handling of hyperlinks in headings.
• As of version 1.2: Support for multi-page posts.
• As of version 1.5: Table of contents auto-insertion
• As of version 1.5: Free choice of table of contents box title
• As of version 1.5: Default values can be specified via settings for all shortcode parameters

See more live examples on the WordPress SEO Table Of Contents demo page.

Recent WordPress SEO Table Of Contents Releases

Please check out the post related to the WordPress SEO Table Of Contents version you are using or are interested in. It contains important information specific to the individual release.

WordPress SEO Table Of Contents Installation

1. Download WordPress SEO Table of Contents.
2. Extract the plug-in archive to your wp-plugins directory.
3. Activate the plug-in as usual.
4. Copy the CSS template fragment from below to your CSS file (either your theme’s style.css file, or, which I’d recommend, through the MyCSS plug-in), and adjust it to your liking. (It’s a live extract from my own my.css file.)

div.toc {
	border: 1px solid #ccc;
	font-size: .75em;
}
div.toc.toc-left {
	max-width: 22em;
	float: left;
	margin: 5px 5px 5px 0;
}
div.toc.toc-right {
	max-width: 22em;
	float: right;
	margin: 5px 0 5px 5px;
}

div.toc a.toc-header {
	display: block;
	background-color: #f8f8ec;
	border-top: 1px solid #fcfcfc;
	border-left: 1px solid #fcfcfc;
	border-bottom: 1px solid #f0f0e0;
	border-right: 1px solid #f0f0e0;
	color: #777;
/** Styling regarding TOC title: **/
	padding: 1px 2px;
	text-align: left;
	font-size: 1.25em;
	font-weight: bold;
}

div.toc a.toc-header:hover {
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #fcfcfc;
	border-right: 1px solid #fcfcfc;
}
div.toc ul {
	list-style: none;

	margin: 0;
	padding: 5px;
	background-color: #fcfcfc;
	overflow: hidden;
	white-space: nowrap;
}
div.toc.auto-collapse ul {
	display: none;
}

div.toc li a {
	text-decoration: none;
	border: 0 none;
	color: #777;
}
div.toc li.toc-level-1 {
	font-weight: bold;
}
div.toc li.toc-level-2 {
	font-weight: bold;
	padding-left: .25em;
}
div.toc li.toc-level-3 {
	padding-left: .5em;
}
div.toc li.toc-level-4 {
	padding-left: .75em;
}

WordPress SEO Table Of Contents Usage

The WordPress SEO Table of Contents plug-in automatically recognizes the headings¹ in your post, so there’s no need to specifically mark up the table of contents entries.

To position the table of contents box on the page, place the toc shortcode where you want the box to appear. Use the class or style shortcode parameter to make the table of contents box float to the left or right (it’s similar to positioning an image). Use the hint parameter to specify the text shown when the mouse hovers over the table of contents box header.

Example:

Normal usage (all parameters are optional):

[toc title="TOC box title" hint="hover hint"
     class="extra CSS class" style="inline CSS style"]

Suppressing auto-insertion:

[toc auto=off]

Note: A WordPress table of contents is never shown on the blog front page, only in single posts and pages. And of course: No headings – no table of contents. (That is, the table of contents shortcode will be ignored if there are no headings in the post.)

Parameters

All parameters except auto have default values supplied via plugin settings from the dashboard. (Note: In the dashboard page, don’t use quotes around the values.)

Predefined CSS classes

toc

The main CSS class of a WordPress SEO Table of Contents box. Most CSS styling is bound to this class.

toc-left, toc-right

table of contents box styling for floating alignments. These are in addition to the above class. For example, to make the table of contents box float to the right, pass the shortcode parameter class=toc-right.

WordPress SEO Table Of Contents Tips And Tricks

RaftaMan reported that some themes (like iNove) contain CSS padding definitions in a way that interferes with the table of contents CSS styling. A workaround is to redefine padding-left in the table of contents CSS for all levels. There is an example is in his comment.

Other advice:

• Placing a TOC In The Sidebar Revisited - First Aid For Naughty Themes
• Table Of Contents In The Sidebar
• How To Couple a TOC Box to an Image
• How To Auto-Collapse TOC Boxes

The Story Behind WordPress SEO Table Of Contents

I wanted a WordPress table of contents box similar to the one in MediaWiki, but to my surprize there seemed to be no WordPress plug-in for that.³ Besides, as I tend to prefer a short intro to precede the table of contents, I wanted one that’s freely positionable in the post, and “traditional” table of contents solutions seemed to have implicit positioning at the top only.

So there I was, engineering yet another WordPress plug-in of own, of which I hope it would be to the benefit and liking of a wider audience, too.

If you use this plug-in, please consider making a donation to support the further development. Donate whatever you feel appropriate. Any amount is appreciated.
Thank you.

Please note: technical support will be provided to donators only.

1. The maximum heading level to include is configurable. [↩] [↩]
2. Headings are formatted with “Heading x” from the drop-down box in “Kitchen Sink Toolbar” of the visual editor, or wrapped in <Hx>...<Hx/> tags in HTML mode (where x is a number denoting the heading level). [↩]
3. At least, not one that does only that. Some series plug-ins include a sort of a table of contents, but I consider it overkill to install a series manager plug-in to get a table of contents, in particular when I don’t quite like the way it’s done. [↩]