More On Quicktags

A visitor to the forums today asked how to add a pullquote to his blog. If you recall, I explained how to do this back in April in a post titled Using Pullquotes Part Two. In that post I showed you not only how to do it but how to do it easily by adding a new quicktag to your post toolbar. This is a mod I use in my own blog. Although I don't often use pullquotes it's nice to have the option of clicking a button should I decide to use them. I thought I would share with you the way I added a few additional quicktags.

Being the type that prefers to work with raw HTML I have long since disabled the visual editor. The only drawback to this is the limited number of available quicktags on the toolbar in HTML mode as opposed to visual mode. Since I write quite a few how-tos on this blog I find myself constantly typing in certain HTML character entities over and over. For instance, if I need to display a < character in a post I have to manually type in &lt; or if I need to display a > character I have to manually type in &gt; and so forth. Here is how you can add two extra quicktags to your toolbar so that you can add a < or > to a post with the click of a button.

The file we need to edit is located at wp-includes/js/quicktags.js. Open quicktags.js in a plain text editor such as Notepad. At around Line 60 you'll see this...

edButtons[edButtons.length] =
new edButton('ed_block'
,'b-quote'
,'\n\n<blockquote>'
,'</blockquote>\n\n'
,'q'
);

Somewhere below that add the following...

edButtons[edButtons.length] =
new edButton('ed_<'
,'<'
,'<'
,''
,''
);

edButtons[edButtons.length] =
new edButton('ed_>'
,'>'
,'>'
,''
,''
);

Since I write a lot of code on this site I'm always using the code quicktag. But I also needed a quicktag for the pre function. Here is how I added that...

edButtons[edButtons.length] =
new edButton('ed_pre'
,'pre'
,'<pre>'
,'</pre>'
,'pr'
);

Everything I need is a click of the button away. This is what my toolbar looks like. (click to enlarge)

quicktags

An important caveat: since you are modifying core files be sure to note your changes for they will vanish the next time you upgrade your WordPress install.

About the author
Len has been blogging for over 10 years and is a rabid WordPress fan. In addition to blogging here you can find him writing the occasional article and toiling away in the forums at WeblogToolsCollection.com. He also hangs out at the WordPress support forums lending a hand where he can. You can also find him at his other blog LenKutchma.com

Leave a Reply

CommentLuv Enabled