Hackadelic Series PlugIn, Arrr

Aye, me hearties, here’s my third WordPress plug-in: Hackadelic Series.

It is the consummation of an idea I gave a quick shot to back in December 2008, when I first had the need for something to support authoring series of posts, and my search revealed no functional lightweight solution for it.

Here is the history of the plug-in.
Read more >>

Sliding Notes Lessons – Beware of HTML Tags In Title

Since I published Sliding Notes, I’ve repeatedly seen people formatting their slider button title italic, and thereby effectively inserting HTML tags into it, like so

[slider title=”some title“]…[/slider]

resulting in: some title»

This is not a practice I’d recommend. Read more >>

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.1

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. [↩]

Sliding Galleries thank to the “Presidential Release”

I’m proud to announce that Sliding Notes 1.3.1 successfully cooperates with the Lightbox2 WordPress plug-in. The two plug-ins together provide for a “Sliding Gallery”, as impressively demonstrated by Gage Parker’s portfolio page.

This definitely goes into the Sliding Notes Showcase. 🙂

More interesting use-cases to share? Anybody?

Sliding Notes 1.3.1 Bugfix Release

Unfortunately, a small glitch had slipped into the 1.3.0 release that caused sliding notes to be “dead” (not expandable) on the front page. I just released a fixed version, 1.3.1 – a “Presidential Bugfix Release”, if your want 😉

I’m sorry for the inconvenience.

Sliding Notes 1.3 – Hot New “Presidential Oath” Release

I haven’t posted anything to my blog in the last week, and I had a good reason: I’ve been preparing a brand new release of Sliding Notes.

Since I published Sliding Notes the first time, I repeatedly had the chance to witness and help with its integration into existing, real world designs. One essential insight I gained from this was that Sliding Notes are being used (or their usage envisioned) in a much wider variety of contexts, than I initially imagined: In the side bar, the content, floating with the text, or stacked, initially collapsed or expanded…[toc class=toc-right/]

As a result of that experience, and just in time for Obama’s upcoming Presidential Oath of Office, I’m releasing a brand new version of the plug-in, packed with features that greatly ease the integration into existing website styles and concepts, as well as the combination of different usage patterns on the same site. Read more >>

Getting Started With Sliding Notes And MyCSS In 4 Super-Easy Steps

[toc class=toc-right style=”max-width:50%”]Since I published my Sliding Notes plug-in, I’ve got several emails from people new to HTML and CSS, or blogging as such, who asked me for guidance to get them started with Sliding Notes (and the MyCSS plug-in for styling).

So I decided to write this simple manual. (Which doesn’t mean I’m unhappy with you folks contacting me 😉 )

Read more >>

To TinyMCE Or Not To TinyMCE

Some time ago, Mark expressed a wish for sliding notes editor support in form of a button in the visual editor toolbar.

That is, we’re talking about extending TinyMCE here.

Now, I’ve never done that, and I suspect it’d be quite some extra work, but unexplored territories and a rough terrain have never stopped me from trying things out. On the other hand, I naturally ask myself if all that will be worth the effort. Why?

Read more >>

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,1 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.

[toc style=”margin: 1em 12em”]

WordPress SEO Table Of Contents Features

• Automatic recognition of headings up to any level.12
• 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 headings3 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:
[toc_usage]

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.4 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. The maximum heading level to include is configurable. [↩]
4. 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. [↩]