The WordPress visual editor is a fine tool for most articles. And it’s only getting better with every subsequent revision. However, not all blog posts are dominated by plaintext. Sometimes when you need to add more complex objects to your posts such as images with specific attributes, I-frames, and most importantly – code, the visual editor starts to lack finesse. For this reason, many individuals prefer to either write or at least modify their code using the HTML editor marked by the “Text” tab.
Using this, content creators can insert very specific HTML tags and style their elements the way they please. Since the visual editor merely guesses what you actually wish to display, there’s a lot of room for error. The HTML editor delivers pinpoint accuracy and I myself use it on a regular basis. However, many individuals find the list of tags above the editor to be somewhat insufficient. These are the buttons that I’m referring to:
Everyone’s needs are different, so the WordPress team has only included those tags which it thinks will be of most value to everyone. However, in the spirit of WordPress’s flexibility, they have also provided us a means of adding custom tags of our own. For example, say you have a specific class that you want to include on specific HTML elements. You can create a WordPress “Quicktag” that provides you with a button outputting any kind of opening and closing tags you want.
Let’s take a look at how to do this using two tags that I regularly use – pre, and div.
QTags.addButton( 'pre_code', 'pre', '<pre>', '</pre>', '' , 'Pre tag', 1 );
This calls the “addButton” function of Qtags to add a new button. You can get the complete documentation of the function on the WordPress Codex page. Only the first two arguments are required, namely the HTML ID and the string to be displayed on the button. The next two arguments provide the opening and closing tags. The one after that deals with something called an “accesskey” and has been deprecated, so I leave it blank, and the “Pre tag” is the pop-up that appears when you hover over the button. Finally, we have the “priority” number which indicates the position at which you want the button to appear. Putting all of this together, we have the final piece of code here:
And you can see below that pressing the “div” button outputs the opening <div> complete with my custom class and everything.
For those who constantly need to create special custom HTML tags for large parts of their posts, the Quicktags functionality is tremendously useful.