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
Always wondered how to do this. Excellent tutorial Michael.
Thanks for stopping by Travis! And thanks for the comment as well. Glad you enjoyed it.
That was cute.
Woot, the newbs learn some more.
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.
Hey David, thanks for stopping by WPCandy and sharing that plugin with us. I’m gonna go cry myself to sleep now.
Now now Mike..
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.
Thanks dude! That’s one cool tip.
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.
Thanks for the tip Michael.
Thanks guys and your welcome! Glad I could help you all.
Nice! I’m trying to do the same thing currently so that “target=blank” is an attribute for every anchor tag in the WYSIWYG.
Really nice work here, Michael. I had no idea about this.
Stumbled!
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
@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!
[...] gave a nice tutorial this week on how to add and edit the behaviors of WYSIWYG buttons in WordPress. This inspired me to [...]
[...] “Customizing Your WYSIWYG Editor Buttons in WordPress“, which points to this lovely tutorial at WPCandy: “Tutorial: Adding Buttons To The Post Editor“ [...]
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.
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! 
@Mosey: No problem! I’m glad it is of use to you!
[...] people looking for a way to do this, I recommend you read the tutorial written on WPCandy called Adding Buttons To The Post Editor. Michael has taken the time to spell out each individual step so that someone without any coding [...]
Thanks for this! I’ve always wanted to do this and the plug-ins I’ve tried don’t work.
[...] Adding Buttons to the Post Editor [...]
[...] WPCandy has an awesome tutorial online which takes you through the motions of creating and then adding your own custom button to the text editor. For instance, when I want to use the H2 tag, I have to click on the button which brings down the advanced options and then select H2 Heading from the drop down box. Using this tutorial, I have created a button specifically for H2 so I no longer need to browse through the advanced buttons area. [...]
Awesome tutorial folks. I used it to give the H1 and H2 headings their own button. It’s saved me quite a few seconds
[...] à WP-CANDY qui m’a donné envie de faire une version française de son billet. Personnellement, je préfèrerais rajouter des boutons à des éditeurs plus évolués mais [...]
[...] Add Buttons To Text Editor – WP Candy published an awesome tutorial which highlights how to add custom buttons/functions to your visual text editor. For instance, I’ve managed to add a H1 and H2 button to my visual text editor so I no longer need to access the dropdown menu. [...]
[...] Adicionar novo botões na área onde escreve artigos. Gostei desse. =D [...]
[...] WPCandy » Tutorial: Adding Buttons To The Post Editor [...]
Thanks for this nice tutorial!
As I only needed two buttons this worked as good for me as installing another plugin
[...] Add Buttons To The Post Editor, Tutorial that shows how to add new buttons to the post editor. [...]
[...] – Add Buttons To Text Editor – WP Candy published an awesome tutorial which highlights how to add custom buttons/functions to [...]
[...] to edit any of the other buttons, or add your own, such as a <h1> button, there is an excellent tutorial on editing wordpress buttons. Popularity: 1% [?]If you’re new here, you may want to subscribe to my RSS feed. Thanks for [...]
[...] create posts) Well I have, so I started searching around the web for a way to do that and I found this. You can either go look at that site or you can just keep reading because I will be explaining the [...]
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.
good post
good post
[...] for the guidance, wpcandy December 16th, 2008 | found in how-to, web page one | | page [...]
[...] WPCandy (Buradaki yazı hatalıydı, ben düzelterek yazdım) Yazıyı Paylaş: Aşağıdaki simgeler [...]
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.
Excellent post. I will like to add butons in my plugin..
Good tut, thanks.
Hi, this doesn’t work for 2.9 version. Moreover, you should indent quicktags.js before editing it.
Bookmarked in my wp tutorial folder!
just one question is it possible to see the new created button in visual mode?
Bummer, this doesn’t work anymore. Does anyone know if it can be done?