Edit your WordPress QuickTags the right way

You may have cause, at some point, to modify the behavior of the QuickTags in the HTML editor of WordPress (the non-WYSIWYG, non-“Visual” editor). There are a lot of tutorials available for editing the quicktags.js file in the WordPress wp-includes folder, but they all seem to want you to edit the file directly. That’s a Bad Idea™ because the next time you upgrade, your changes are kaput. Here’s how to make your own quicktags.js and do whatever you want with it.

There are some perfectly capable plugins for adding new buttons, too. This morning I wanted to change the behavior of existing buttons, though, so it came down to this.

This post is directed toward people who are at least moderately comfortable editing php and javascript. I’m not going to go into a lot of detail on the actual edits, but will get you started on modifying your QuickTags and provide some source code.

The quicktags.js file

Go into the /wp-includes/js folder and find quicktags.dev.js. Copy it to your template folder (or any subfolder) and rename it quicktags.js.

Edit the file. The code has some localization in it which we’re about to break, so search for quicktagsL10n and replace every instance with an appropriate, quoted string. For example, you’ll find quicktagsL10n.enterURL, which should be replaced with something like ‘Enter the URL’. You can find all of the original strings in /wp-includes/script-loader.php, if you like.</p>

Now you can edit the buttons and functions as you see fit. There’s a pretty good overview at Tamba2. You’ll notice that some buttons have functions associated with them, such as the “link” and “img” buttons, so be sure to edit those as well if you’re modifying those buttons.

Overriding the original

Now we just need to change which script gets called when you’re in the post editor. Add the following to your theme’s functions.php file:

function bt_load_admin_scripts()
{
  if ( is_admin() ) {
    wp_deregister_script('quicktags');
    wp_register_script('quicktags', ("/path/to/your/quicktags.js"), false, '', true);
  }
}

if (is_admin()) {
  add_action('init', bt_load_admin_scripts);
}

Modify the path in wp_register_script to point to the location where you put your quicktags.js file. This will tell WordPress to load your file instead of its own.

Now, edit a new post (in the HTML editor, not the Visual editor) to test out your changes. If everything is correct, modified and new buttons should show up and function the way you want. Your changes will persist, even after a WordPress upgrade!

Here’s my copy of quicktags.js, modified to turn it into a Markdown editor.

[download id=23]