Adding Custom Buttons to WordPress Editor

I have written about Customize WordPress WYSIWYG Editor, and in this tutorial is another one.

I just wanted to edit my WordPress Post-Editor and add come custom buttons for the codes I use most.. so while I was customizing my WordPress I just thought why not share it with my visitors and let them know how they can create there very own, friendly Post writing enviroment. Here are some simple steps if you follow them correctly, they’ll help you make most out of your WordPress Post-Editor. For now, I’m telling you how to add a simple button to your WordPress Post-Editor.

The quicktags.js File

The file you need to edit is quicktags.js file. It is located in your WordPress install directory under wp-includes/js/quicktags.js

Before you modify, be sure to make a backup of the file just incase. So if something did happen and you can’t undo the changes, you can simply rewrite the file with the backup.

Button Code

Open up quicktags.js file in any HTML or text editor. Scroll down to line 36. You should see something like this.
edButtons[edButtons.length] =
new edButton(’ed_strong’
,’b’
,’<strong>’
,’</strong>’
,’b’
);

This piece of code create a single button. The above is for the bold button. You can copy and past the code to add your buttons this way.

Button Code In Detail

Let me give you an idea of what each line of that code do.
These two lines tell WordPress code to idently it as a button.
edButtons[edButtons.length] =
new edButton(’ed_strong’

The display name for the button. Whatever you type here will show up in Post Editor.
,’b’

When you click on the button this will be the opening HTML tag
,’<strong>’

When you click the same button again, this will be the closing HTML tag
,’</strong>’

This line defines the back end name for the button
,’b’

Closes the button code
);

For example see the image on this post where I have a custom button for <h2> headings. This is what the code looks like.
edButtons[edButtons.length] =
new edButton(’ed_h2?
,’h2?
,’<h2>’
,’</h2>’
,’h2?
);

Here is a button where it insert an image code for your posts when clicked.
edButtons[edButtons.length] =
new edButton(’ed_myimage’
,’IMG Code’
,’<img src=”http://www.mydomain.com/wp-content/uploads/your-image-url-here” alt=”your-alt-text” class=”post-image” />’
,”
,’myimage’
);

Or in this case we will add Google AdSense inserted button on our HTML Editor. Before you add this button, you need to create a Google AdSense shortcode on your functions.php, this is the example

1
2
3
4
5
function do_adsense() {
  $adsense "You Adsense Code Here";
  return $adsense;
}
add_shortcode('adsense''do_adsense');

 

After you write down the Custom Buttons for you Google AdSense above, the next step is write the code below, please not this code must be written on quicktags.js in the wp-includes/js, but you need to replace this original version (compressed version) with quicktags.dev.js and alter the code by added this

1
2
3
4
5
6
7
edButtons[edButtons.length] =
new edButton(‘ed_adsense’
,’adsense’
,’[adsense]’
,’’
,'adsense'
);

That’s simple right?

References: