Add a button to your wyswyg html bar in WP

NOTE: this post has a follow up here: http://pages.uoregon.edu/vid/2009/09/02/redux-add-a-button-to-your-wyswyg-html-bar-in-wp-code2/

I wanted to accommodate a new plugin I installed for highlighting code: Ion Syntax Highlighter. I was surprised that it didn’t append my quicktags button bar in the wyswyg edtitor.
I couldn’t remember the syntax either and I wanted to be able to use my button! I expected the behavior of the code button to change after I installed but not so. I did a quick search in the source and found that I needed to look for quicktags. I found what I needed here “blog/wp-includes/js/quicktags.js”

I duplicated the existing “code” code and and replaced instances of “code” with “code2”.

For example a search in the source of quicktags.js revealed this:

edButtons[edButtons.length]=new edButton("ed_code","code","<code>","</code>","c");

so I duplicated that and added this:

edButtons[edButtons.length]=new edButton("ed_code2","code2"," to make it work in this post...

Possible future changes: add a prompt to determine the language type.

Issues: upgrades to WP will probably overwrite my changes and I'll have to append the file again...

Code changed:

edButtons[edButtons.length]=new edButton("ed_code2","code2","[code lang=""]","[/code]","2");
j.Buttons[j.Buttons.length]=new edButton(a+"_code2","code2","[code lang=""]","[/code]","2");

Relevant links:

Leave a Comment