March 17, 2006

Plugins for WordPress

Update (2015): I stopped using WordPress to power my website in 2010, having used and contributed to it from its early days in 2004. But I’ve kept the WordPress plugins I wrote years ago alive by subjecting them to automated testing to see if they work for the latest WordPress versions, and they do.


Here are the plugins I have authored.

  1. Block quotations: Enables displaying of populated cite, title elements
  2. Code transform: Enables embedding plain text code from an external file for display within an article (post, or page)
  3. Small caps: Transforms all capitalized words into small-caps
  4. Miscellaneous – Custom PHP scripts

Block quotations

Block quotation or blockquote by definition is a citation usually inserted as a separate segment of text, rather than inline text with quotation marks around it. A blockquote is left-indented with respect to the enclosing text and has whitespace before and after it.

Quotations provide that necessary salutation, proof of concept, sometimes vindication, and if nothing else, a point of view to your writings, thereby making a written material all the more interesting.

Whether you are a seasoned writer or a beginner to the world of writing, understanding the power of simple elements helps you in keeping up with good practices, maintain semantics, and of course better exposure to search engine spiders.

Block quotes are mere paragraphs of indented text in offline content — such as in print documents, reports, essays, et al. But on the web, not only do they have the ability to provide attribution to the original source, but also point to, when available online. I find that remarkable. And so, it is with this reason that when I started writing online, I began using blockquotes. I used the cite="" option almost consistently, not knowing how it would really help show-up in my posts. In order to provide a link, I used to manually add a link either at the bottom or at the beginning of the quote with necessary attribution to the source. A typical block quotation in use:

<blockquote cite="http://www.quotedb.com/quotes/2369" title="Mohandas K. Gandhi">
    Live as if you were to die tomorrow. Learn as if you were to live forever.
</blockquote>

When viewed on the web, it would look like:

Live as if you were to die tomorrow. Learn as if you were to live forever.

When people fail to see the importance of child elements (e.g., cite, title) within, they tend to ignore them, even if it is semantically the right way to do. Because it doesn’t show-up anywhere on the site except in the source of the webpage.

Simon Willison, Dunstan Orchard thought it would be worth the effort if they could somehow bring forth those elements on display, and make them usable, without duplicating their placeholder contents manually. And they did. Dunstan improvised on Simon’s blockquote script that could extract the details of a blockquote to list below the quoted text in a couple of ways. Now, you could make your blockquote extract the attribution, and watch a script present it below your quotes. No more is the need to put another title and/or a link below your quotes manually. Now the same code would look like:

Live as if you were to die tomorrow. Learn as if you were to live forever.

— Mohandas K. Gandhi

The script is excellent, but I had to manually add it to the header section in all my themes. Instead, I packed it into a WordPress plugin, which would do it automatically when enabled.

Download, Install: Extract the contents, and upload to wp-content/plugins (or search in plugin repository from within WordPress’s control panel), and then activate it from the Plugins page from within WordPress’s control panel.

Faq:

  1. Blockquote usage instructions supported underlying the plugin are here.
  2. This plugin does not alter content stored in database. Deactivating the plugin disables the attribution pull from cite and title.
  3. The attribution element can be styled to taste. The CSS class used is .source. So, if for example the attribution is to be styled in italics and right-aligned, then, you’d add this following to your style.css:

    .source {
        text-style: italic;
        text-align: right;
        }
    
  4. Some WordPress themes make use of this technique natively within their code — not as a plugin, so this plugin may duplicate the calls. If you’d prefer to use the theme than the plugin, then it is best to deactivate this plugin, or vice versa.


Code transform (Jan 2008)

Programming code and computer input files are best read in monospace fonts. It’s lovely if you know the line numbers too — particularly helpful in making references. I have two kinds of input files from different types of structural analysis software:

  1. SACS input files are in a fixed format. Column sensitive information.
  2. SESAM, USFOS and ABAQUS input files are in a free format. Column insensitive information.

I wanted a simple solution to display input files of computer models for some articles that I have restarted working on, without modifying or embedding them within the post markup. So I turned to Dunstan’s tag transformations. Mathias Bynens wrote a plugin — based on Dunstan’s tag transformation, which also includes image transformation. I didn’t need the image transformation bit, so I edited Bynens’s plugin to include only the code transformation.

Here’s how it works: I upload an input file, say input.txt to a folder called inputfiles in the site’s root. Then, in the post, I add the following tag to display the input file, together with line numbers (auto-generated via the plugin):

<codeins="input" />

Download and install:

  1. The plugin is available here.
  2. Upload to the WordPress plugin folder (wp-content/plugins/). Then, activate “Code transform” plugin from the Plugins page within WordPress’s control panel.
  3. Under Options → Writing in WordPress control panel, Uncheck the option “WordPress should correct invalidly nested XHTML automatically.”
  4. Optionally, append theme stylesheet style.css with content from style-append.css from here.

Small caps (Oct 2008)

If you have read the Economist’s print edition, then you would have noticed the elegance of small caps they use, which fit right in to the flow of text. If you’re in the print business, and you’re a typography nut, then I’m sure you use Ctrl+Shift+K in Microsoft Word, or \textsc{word} in LaTeX to transform certain select words into small capitalized words.

This plugin for WordPress lets you transform capitalized words in your posts into small caps on the fly. Drop it in the plugins folder, activate it, and you should be good to go. Read on to know how the plugin works.

The plugin uses a combination of REGEX and CSS styling to achieve the desired small caps (visual) effect. First, the plugin looks for capitalized words (two or more letters in succession to detect the capitalized word for pattern) in the posts, and encloses them within abbr HTML tag. It then applies the following style to words enclosed within the abbr tag.

abbr { 
    text-transform:lowercase; 
    font-variant:small-caps;
    }

I had hundreds of posts that had capitalized words already, and so tagging caps manually with abbr tag wasn’t practical — I didn’t have the energy to sift through them all just to update the markup; and there was no way to remove tagging — if I changed my mind later, without considerable effort. Searching for a suitable WordPress plugin resulted in none available to do this. So, I wrote one.

The small-caps effect is a render that occurs on the fly using javascript and is not hard-coded in to the database, which I think is a good thing. It means, if you deactivate the plugin, the small caps effect and the associated markup disappear from your posts.

Update (Oct 2011): I was wrestling with the REGEX monster last night. In some wild cases, where URLs have capitalized words, I realized that the plugin was wrapping them within the abbr tags, thereby breaking such links.

So task one for me was to find a way to exclude caps in URLs, filename addresses, etc, but not affect the prose in the post. Going with a protocol search (like http://, ftp://, etc.) would have become an endless river of list, not to mention that it would only address absolute links, not relative ones.

Initial idea: Words in prose have spaces at both ends — a key differentiator between links and words.

1.0.2: So in this version, I inserted spaces in the REGEX function as below (don’t laugh):

$search = " /\b([A-Z][A-Z0-9]{2,})\b/ ";
$replace = " <abbr>$1</abbr> ";

No juice. Spaces could not be picked by the REGEX monster in one of my setups.

1.0.3: I introduced the proper \s REGEX parameter that corresponds to a whitespace character as below:

$search = "/\s\b([A-Z][A-Z0-9]{2,})\b\s/";
$replace = " <abbr>$1</abbr> ";

This worked fine for all words that had white space characters at both ends, and it didn’t break any link. I thought I was done, but I wasn’t. A couple of examples:

a. That system was UNIX,
b. Retain plural caps like URLs

Whoa!, punctuation at the end of the word — no whitespace in one; and in the other the caps word is plural. I didn’t want to write another REGEX to exclude punctuations, or to keep plural caps — that’s just too much. Simplicity says, if you need more code, then you’re doing it wrong.

1.0.4: Bump another version. So the final fix turned out to be simply avoiding to look for a trailing whitespace:

$search = "/\s\b([A-Z][A-Z0-9]{2,})\b/";
$replace = " <abbr>$1</abbr>";

It’s holding so far for all interesting cases I am aware of and testing them for.

If you’re one of the few users who use this plugin, my apologies for the flurry of updates. WordPress plugin hamster has the latest version in its stable, and you’d get a notice from within the Dashboard to update automatically — should you choose.


Miscellaneous – Custom PHP scripts

  1. Custom article-list for listing select articles across categories and tags.
  2. Dateline linked to archive by day, month, and by year.
  3. Doodles autogeneration for specific dates, such as holidays and special occasions.
  4. Linkroll generates a custom blogroll for use with theme files.
  5. Subdomain to domain redirect plugin.