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 happend and you can’t undo 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’
);
