In an earlier post, I showed how to customize the TinyMCE Editor in WordPress by adding custom buttons without a plugin. Custom buttons can be very handy if you are using special tags or codes in your posts. They reduce effort and saves time by saving you from writing the same code again and again. Now, if you use the HTML editor to write articles you won’t find the earlier post as useful. So here I will show how you can create useful Quicktag (WordPress refers all buttons as Quicktags) buttons for your various tasks in the WordPress HTML editor.
To manually customize the HTML editor, you need to edit a core WordPress file – quicktags.js. If you aren’t comfortable editing core files there’s a great plugin called HTML Editor Reloaded that, as you can expect, lets you do the customizations the easy way. But if you don’t want to install a plugin, here’s how you can add buttons of your choice.
Open quicktags.js located in wp-includes/js/ directory of your WordPress installation. You’ll also find another file named quicktags.dev.js, which is the uncompressed version of ‘quicktags.js,’ in the same directory. If you are having trouble reading the file content, duplicate quicktags.dev.js and rename it to quicktags.js and then edit.
This file contains the code for all buttons seen in the HTML post editor. Search for this:
edButtons[edButtons.length]=new edButton("ed_strong","b","<strong>","</strong>","b");That’s the code for the first button – bold, which is represented with a ‘b’ on the editor toolbar in HTML mode.
Code description:
edButtons[edButtons.length] =
new edButton("ed_strong" //Name of button
,"b" //Button label
,"<strong>" //Tag open
,"</strong>" //Tag close
,"b" //Access key
,-1 //Optional. Set to -1 if the tag doesn't need to be closed
);That’s the common structure for all buttons. To add a new button follow exactly the same format with your desired instructions. You can add as many buttons as you like, and you can also change its order, remove unwanted buttons and edit any existing buttons.
HTML Editor Reloaded plugin doesn’t let you reorder existing buttons, but it does provides all other features which you can do manually plus your settings are preserved even after upgrades.
