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!
Post Revisions:
- 5 August, 2010 @ 4:51 [Current Revision] by michael castilla
- 4 December, 2007 @ 20:21 by Ryan Imel
Posted December 4, 2007
Travis said:
Always wondered how to do this. Excellent tutorial Michael.
on December 4, 2007 at 8:33 pm
Michael Castilla said:
Thanks for stopping by Travis! And thanks for the comment as well. Glad you enjoyed it.
on December 4, 2007 at 8:39 pm
hellyeahdude.com said:
That was cute.
on December 4, 2007 at 8:40 pm
Brady said:
Woot, the newbs learn some more.
on December 4, 2007 at 9:39 pm
david said:
There’s a plugin that does this pretty simply:
http://roel.meurders.nl/wordpress-plugins/wp-addquicktag-plugin-for-adding-quicktags/
I’ve been using it for a while, and it works great.
on December 4, 2007 at 10:41 pm
Michael Castilla said:
Hey David, thanks for stopping by WPCandy and sharing that plugin with us. I’m gonna go cry myself to sleep now.
on December 4, 2007 at 10:59 pm
Brady said:
Now now Mike..
on December 4, 2007 at 11:00 pm
Justin Tadlock said:
Cool tutorial. I would use it, but I’m so used to typing every tag in myself now that I don’t think I’ll ever use those buttons. I can type much faster than clicking the button. Nevertheless, I’m sure this will help many people.
on December 5, 2007 at 12:04 am
Ali Salem said:
Thanks dude! That’s one cool tip.
on December 5, 2007 at 12:05 am
Andrewy said:
Thanks Mike,
I had thought of doing it but never go round to it. I think I might well put my standard opening tags into one, in a one-click style, so my header and intro para are just inserted as a whole.
on December 5, 2007 at 12:19 am
Aaron said:
Thanks for the tip Michael.
on December 5, 2007 at 6:17 am
Michael Castilla said:
Thanks guys and your welcome! Glad I could help you all.
on December 5, 2007 at 7:28 am
Darren Hoyt said:
Nice! I’m trying to do the same thing currently so that “target=blank” is an attribute for every anchor tag in the WYSIWYG.
on December 5, 2007 at 11:14 pm
Armen said:
Really nice work here, Michael. I had no idea about this.
Stumbled!
on December 6, 2007 at 12:22 am
Frank said:
http://wordpress.org/extend/plugins/addquicktag/
The actual version, works under WP 2.3 and have import- and export-function.
I hope you enjoy this easy way for adding buttons to the editor.
With best regards Frank
on December 6, 2007 at 5:43 am
Michael Castilla said:
@Darren: Oh that could come in handy! Were you able to accomplish that with this tutorial?
@Armen: Thanks bro!
@Frank: Hehe yeah I’ve realized there are a few plugins that automatically do this, so this is for the do-it-yourself kind of people!
on December 6, 2007 at 3:24 pm
CP said:
Thanks to everyone who commented and thanks for writing this article. I was in search of this today and you guys came to the rescue. Thanks.
on January 2, 2008 at 6:29 pm
Mosey said:
Thanks for this post!
I’ve always wanted to add an acronym button to the editor bar since the standard editor really works well for me, excluding this particular tag. Whilst I see the perks of using a plugin to manage the tags, it’s probably most suitable for people who need loads of tags. For this one acronymn tag, I’ll definitely be editing the file itself, so thank you for the tutorial! 
on January 13, 2008 at 11:16 am
Michael Castilla said:
@Mosey: No problem! I’m glad it is of use to you!
on January 13, 2008 at 12:55 pm
Hannah said:
Thanks for this! I’ve always wanted to do this and the plug-ins I’ve tried don’t work.
on January 21, 2008 at 7:25 am
Jeffro2pt0 said:
Awesome tutorial folks. I used it to give the H1 and H2 headings their own button. It’s saved me quite a few seconds
on January 21, 2008 at 3:35 pm
Andy said:
Thanks for this nice tutorial!
As I only needed two buttons this worked as good for me as installing another plugin
on February 26, 2008 at 6:32 pm
Roland said:
I know this is an older tutorial, but is there an easy way to also add an image to the button when using the ‘visual editor’ in WP2.6? I got a button added using the tutorial, but it only shows in the HTML-view of the editor.
on August 17, 2008 at 7:36 pm
antonio said:
good post
on November 4, 2008 at 9:46 am
kalpesh gamit said:
good post
on November 7, 2008 at 12:23 am
Kaushik said:
neat stuff! I’m going to go the plugin way though
, but always cool to know the hands-on way of getting this stuff done.
on December 30, 2008 at 1:47 am
neel said:
Excellent post. I will like to add butons in my plugin..
on January 2, 2010 at 2:31 am
9WordpressTemplate said:
Good tut, thanks.
on April 1, 2010 at 1:12 pm
Nick said:
Hi, this doesn’t work for 2.9 version. Moreover, you should indent quicktags.js before editing it.
on July 6, 2010 at 3:30 am