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.

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.

About the Author

Jeff Starr = Fullstack Developer. Book Author. Teacher. Human Being.