New Bookstore! Save 20% on books with discount code: LAUNCH
Web Dev + WordPress + Security

Customize WordPress Quicktags

WordPress Quicktags provide shortcuts for adding certain bits of code to your posts. The default set of quicktags includes some handy shortcut buttons for tags such as <strong>, <a>, and <img>, as well as a few others. While the default set of quicktag buttons is occasionally useful, a quick bit of quicktag customization can easily transform your personal set of quicktag buttons into a deadly arsenal of time-saving code shortcuts.

Note: This condensed tutorial assumes you are working with WordPress 2+ and are familiar with editing .php and/or .js files.

Step 1

First, open the quicktags.js file, usually located in the wp-includes/js directory. Next, scroll down to around line #40 and look for the following chunk of JavaScript code:

edButtons[edButtons.length] = 
new edButton('ed_strong'
,'b'
,'<strong>'
,'</strong>'
,'b'
);

edButtons[edButtons.length] = 
new edButton('ed_em'
,'i'
,'<em>'
,'</em>'
,'i'
);

Now, to assist in the editing process, copy and paste this next bit of code in between any two of the edButtons[] statements. As this will be used as reference only, ensure that remains commented out:

/*

THIS IS THE GENERAL FORMAT OF A QUICKTAG BUTTON:

function edButton(id, display, tagStart, tagEnd, access, open) {
	this.id = id;             // used to name the toolbar button
	this.display = display;   // label on button
	this.tagStart = tagStart; // open tag
	this.tagEnd = tagEnd;     // close tag
	this.access = access;     // access key
	this.open = open;         // set to -1 if tag does not need to be closed
}

*/

Step 2

With that code in place, it is time to add a new button. Choose a code element that you find yourself frequently adding to your posts. Let’s say that you are always linking to a content directory such as /content/. In that case, let’s add a quicktag button that will automatically create a link to the /content/ directory:

edButtons[edButtons.length] = new edButton('ed_content-link'
,'content-link'
,'<a href="http://yourblog.com/path/content/" title="">'
,'</a>'
,''
);

After saving and uploading the edited quicktags.js file, adding a link to your content directory is as easy as pressing the “content-link” quicktag button!

Wrap up

The process of adding other tags is essentially the same. Play around a bit and see what you come up with. Hopefully, this is enough information to get you started. Remember to delete the reference example after you have finished adding/editing buttons. For newer versions of WordPress, the same block of reference code is included near the top of the quicktags.js file itself.

Jeff Starr
About the Author
Jeff Starr = Web Developer. Security Specialist. WordPress Buff.
GA Pro: Add Google Analytics to WordPress like a pro.

3 responses to “Customize WordPress Quicktags”

  1. Christian 2006/09/18 1:17 pm

    I use the plugin WP-AddQuicktag, it is for the classic editor of WordPress and works very good.

  2. Jeff Starr
    Perishable 2006/09/18 2:43 pm

    Thanks for the tip!

  3. testing

Comments are closed for this post. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
.htaccess made easy: Improve site performance and security.
Thoughts
Take a screenshot with Firefox (no extension required). Open Developer Tools Settings and enable the “Take a screenshot” button. Then click the button :)
Take a screenshot with Chrome (no extension required). Open DevTools, type Cmd + Shift + P, then type screenshot.
After 10 years working on my 2010 iMac, my upgrade finally arrived. Shiny new iMac shipped from Ireland :)
Too much caffeine weirds me out. But I love the taste of coffee. So once in a while I enjoy a small cup of decaf. Hits the spot.
Chris Coyier is a truly awesome person. One of the finest people I've ever worked with. Just #gottasayit
Excel won't open CSV file because SYLK format? Open it with text editor and add an apostrophe ' at the beginning of the file, save changes, done.
Displaying too many social media buttons and links all over the place imho makes you look desperate and frankly kinda sad.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.