Bikini shot
by Wendell
Now I have your attention …
The barest extensions to WordPress ought to be able to support minimal formatting for verse.
To this blog I have appended customized CSS in order to achieve this. The mechanism is (so-called) HTML microformatting. Plain old HTML code is used as cleanly as possible; assignments to ‘class’ attributes, where necessary, indicate where specialized formatting should be applied. All of this is done in the reader’s browser; what we are doing is giving WordPress a few extra instructions to deliver, with the content, to that device.
To make this work on stuff you insert, under the “Text” tab in your editing window, provide literal HTML (not so-called WordPress “shorttags”) wrapping the bits of verse, kind of like so …
<div class="verse"> <p>DAUGHTERS of Beulah! Muses who inspire the Poet's Song,</p> <p>Record the journey of immortal Milton thro' your Realms</p> <p>Of terror & mild moony lustre, in soft sexual delusions</p> <p>Of varied beauty, to delight the wanderer and repose</p> <p>His burning thirst & freezing hunger! Come into my hand</p> <p>By your mild power; descending down the Nerves of my right arm</p> <p>From out the Portals of my Brain, where by your ministry</p> <p>The Eternal Great Humanity Divine planted his Paradise,</p> <p>And in it caus'd the Spectres of the Dead to take sweet form</p> <p>In likeness of himself.</p> </div>
This comes out like this:
DAUGHTERS of Beulah! Muses who inspire the Poet’s Song,
Record the journey of immortal Milton thro’ your Realms
Of terror & mild moony lustre, in soft sexual delusions
Of varied beauty, to delight the wanderer and repose
His burning thirst & freezing hunger! Come into my hand
By your mild power; descending down the Nerves of my right arm
From out the Portals of my Brain, where by your ministry
The Eternal Great Humanity Divine planted his Paradise,
And in it caus’d the Spectres of the Dead to take sweet form
In likeness of himself.
Note—one feature of the code that drives this is that lines will automatically be wrapped with a hanging indent. That is, where verse lines are too long for typographic lines, they will be continued with indents in subsequent (typographic) lines.
This may not be evident in your display, depending on what other controls are in place governing line length. (In this blog you won’t be able to see this feature since the page width is hard coded. But in other environments, it’s important, and even here it will be useful where lines get really really long.)
Note also! if you don’t use the <p>...<p> tagging you have to insert extra lines (i.e., between each line of verse there must be a blank line in the editor), or WordPress will botch it.
This is because we are having to get around some bogus functionality in WordPress. Where it sees two lines with only line breaks between (i.e., no extra lines), it inserts line breaks. But we don’t want line breaks; we want honest elements in our HTML, onto which we can hang styling.
Next is to provide some extra indentation. So:
<div class="verse"> <p>THERE was a time when meadow, grove, and stream,</p> <p class="in1">The earth, and every common sight,</p> <p class="in3">To me did seem</p> <p class="in1">Apparell'd in celestial light,</p> <p>The glory and the freshness of a dream.</p> <p>It is not now as it hath been of yore;—</p> <p class="in2">Turn wheresoe'er I may,</p> <p class="in3">By night or day,</p> <p>The things which I have seen I now can see no more.</p> </div>
which will look like this:
THERE was a time when meadow, grove, and stream,
The earth, and every common sight,
To me did seem
Apparell’d in celestial light,
The glory and the freshness of a dream.
It is not now as it hath been of yore;—
Turn wheresoe’er I may,
By night or day,
The things which I have seen I now can see no more.
The extra indent results from the class assignment on the p. Things are currently configured so that in values up to “in10” should work.
The challenges of this approach:
- The HTML itself has to be clean and clear enough that WordPress doesn’t strip it. So far we’ve managed this by using simple
divandpelements — which seems to work. - The CSS in back has to be designed to work well along with the CSS provided by WordPress and its active Theme. This can be a bit of a trick.

