Most blogs provide some text explanation above the comment field for what HTML tags the commenter may provide in her response. However, I’d seen some other sites that had some buttons that automated some of this process. I set out to add this capability to my site with two objectives in mind: 1) make it easy for the non-HTML user to format a post comment; and 2) keep options narrowed to what I thought was an appropriate subset of HTML format tags.
The WordPress Quicktags Facility
The internal WordPress post and page editor comes with what it calls “quicktags.” These tags, and their explanations, are:
- “Strong” – creates a <strong> tag that gives strong emphasis (read – bold) to your text
- “Emphasis” – creates a <em> tag that gives emphasis (read – italics) to your text
- Link – creates a hyperlink to a web address which you supply in the pop-up box that is activated by the quicktag. If you select text before you click on the link tag, that text will be used as the link text (the clickable stuff) that will be displayed in your post
- Blockquote – creates a set of blockquote tags that indent text on both the left and right margins. An example follows
This text is within a blockquote tag
- Delete –
deleted text, text that has a strikethrough line through it
- Insert – , text that has been inserted; marked with an underline
- Image – this works in much the same way as the link tag, you enter the URL of an image into a pop-up box and the image will be inserted into your post
- Unordered List – this adds the opening tag to create an unordered list (bulleted) in your post
- Ordered List – this adds the opening tag to create an ordered list (numbered) in your post
- List Item – this adds a single list item to either the unordered or ordered lists. This tag requires either the ordered or unordered list tags to precede it.
- Code –
text that is formattedin a monospaced font to differentiate between code clips and regular text
- More – this tag adds a <!–more–> tag to your post, which puts in a “more . . . ” link and puts the rest of your post on another page
- Page – this tag adds a <!–nextpage–> tag to your post, which continues your post on a second page
- Dictionary lookup – looks up the word you enter into the pop-up box at dictionary.com and opens the definition page in a new window of your browser
- Close Tags
- Close Tags – this closes any tags (str, em, link, b-quote, del, ins, ul, ol, li, code) that must be closed in order to stop the formatting from continuing down the page. Each tag also turns into a close tag sign (ul becomes /ul, etc.) to allow you to close that individual tag as well.
While I liked this version, it had some limitations in meeting my objectives:
- Too many buttons were provided; I wanted a simpler subset of format tools
- None of the buttons had tooltips, so that it was hard to understand what some of them did
- Some of the labels needed clarification
- I wanted a ‘Preview’ option that would show respondents what their final comments would look like once posted.
The result was that I modified Alex’s starting code. If you would like to install the same version I have on this site — see the comment field with its buttons below — download the file noted at the top of this post. It includes all of the license and installation instructions of Alex’s current 1.2 version with my modifications.
I will work to add a preview capability so that the commenter can see her formatted comments before submitting the post. Longer term, I want to install a limited format WYSIWYG editor, similar to what I am using internally with Xinha.
Author’s Note: I actually decided to commit to a blog on April 27, 2005, and began recording soon thereafter my steps in doing so. Because of work demands and other delays, the actual site was not released until July 18, 2005. To give my ‘Prepare to Blog …’ postings a more contemporaneous feel, I arbitrarily changed posting dates on this series one month forward, which means some aspects of the actual blog were better developed than some of these earlier posts indicate. However, the sequence and the content remain unchanged. A re-factored complete guide will be posted at the conclusion of the ‘Prepare to Blog …’ series, targeted for release about August 18, 2005. mkb