Add Custom Buttons To WordPress Post Editor

I write posts every day at Project Web Design weather it is tech news or tutorials.

Just to let you know WordPresss Post Editor is where you write your posts in your administration area.

When you write posts on a daily basis, it would be nice to have a frequently used set of HTML tags and custom line of code just a click away, instead of copying and pasting them to the WordPress Post Editor.

For example I constantly use <h2> heading tags and other custom image code on every single post here. Before I used to either type them on every post or just in the case of custom code, cut and paste from another document.

Today I will show you a one click solution to do this. You can create buttons to any kind of HTML tag or code you like. Here how you do it.

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'
);

There you have it. Now go ahead and make your buttons. Having frequent functions stored in buttons is a time saver. You will think to yourself how you use WordPress without them.