WPCandy

For some of you this may have never even crossed their minds, but have you ever wondered how to add your own WordPress Post Editor buttons? (When I say the WordPress Post Editor, I’m referring to the area where you write your posts).

Well, yesterday it dawned on me that it would make my life a lot easier if I could, with 1 click of a button, add in <h1> and <h2> tags into my posts. Wouldn’t that be awesome? Hell yeah dude!

Alright, so with that said, I’ll be running through some steps with you to get your WordPress Post Editor (in Code view) to look like this:

This is going to be fairly easy, so let’s get started!

Step 1: Locating The File

Let’s begin by opening up our FTP or whatever you use to edit your files. Locate where WordPress is installed and go to:

/wp-includes/js/quicktags.js

Now at around line 36, you should see something that looks like this:

edButtons[edButtons.length] =
new edButton(’ed_strong’
,’b’
,’<strong>’
,’</strong>’
,’b’
);

That code above is the code for a single button, specifically the Bold button. Pretty simple right?

Step 2: Adding Your Own Button

(Before doing any editing, please make sure you have a back up of this file, just incase you make any mistakes)

Now that we know what the button source code looks like, we can simple re-write it to make one of your own. Below is the source code for my <h1> button:

edButtons[edButtons.length] =
new edButton(’ed_more’
,’h1′
,’<h1>’
,’</h1>’
,’h’
,-1
);

Let’s break down the code to get a better understanding.

edButtons[edButtons.length] =
new edButton(’ed_more’

This is basically defining the code as a button.

,’h1′

This will be the name of the button that will display in your post editor.

‘<h1>’

This is the first tag that will insert when the button is clicked. This is also the opening h1 tag.

,’</h1>’

This is the last tag that will insert when the button is clicked again. This is also the closing h1 tag.

,’h’

This is the back end name of the button.

,-1
);

This is basically just closing up the button source code (do not edit this).

Make sure you include every piece of code and space them accordingly in the file, like the others. Easy huh? You can also add up to a couple of buttons and different ones to fit your purposes.

Step 3: Saving And Using

Alright, well you guessed it! Save that file and head over to WP-Admin > Write > New Post and check out your cool new buttons!

If you don’t see the buttons or something looks totally messed up, retrieve your back up and follow the tutorial again slowly.

Step 4: Final Words

Well this was my first tutorial on WPCandy, so I hope you enjoyed it and got the best of it!