Tutorial: Adding Buttons To The Post Editor

48 Comments

Notice: This tutorial is old, was published long before I took over the site, and should not be followed. It’s left here only for historical sake, and should not be used in any way. – Ryan Imel, Editor of WPCandy.com.

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

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!

48 thoughts on “Tutorial: Adding Buttons To The Post Editor

  1. 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.

  2. 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.

  3. @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!

  4. Pingback: Wp Wordpress » Blog Archive » Customizing Your WYSIWYG Editor Buttons in Wordpress

  5. Pingback: Buffer Dump 19DEC07 « Feet up, eyes closed, head back

  6. 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.

  7. 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! 🙂

  8. Pingback: Hack: Adding Buttons To The WordPress Write Panel

  9. Pingback: CreativeBurst.ORG » Hacking Wordpress

  10. Pingback: Add Buttons To Visual Editor » Jeffro2pt0.com

  11. Pingback: Ajout de boutons dans l’éditeur de billet | Khayspace

  12. Pingback: WordPress Weekly Episode 3 » Jeffro2pt0.com

  13. Pingback: 25 hacks para dinamizar seu Wordpress! — Bytes a Go-go!

  14. Pingback: Moewes.com » links for 2008-01-26

  15. Pingback: 20 Places For Wordpress Hacks | Index Blog

  16. Pingback: WordPress Weekly Episode 3 | Jeffro2pt0

  17. Pingback: Edit the ‘Link’ Button in Wordpress | Mike Haydon

  18. Pingback: Adding Your Own Buttons to the WordPress Editor | Flash Barracks Blog

  19. 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.

  20. Pingback: new/ stuff » edit your Wordpress buttons/ post in HTML view

  21. Pingback: Editöre Yeni Düğmeler Ekliyoruz · Yakup Gövler'in Not Defteri

  22. Bookmarked in my wp tutorial folder!
    just one question is it possible to see the new created button in visual mode?

  23. This tutorial is WILDLY out of date and, unfortunately, the top Google result. You should NEVER edit core files directly. This post should be removed or updated to reflect current best practices.

    If you look in /wp-includes/js/quicktags.js down around line 280 it will tell you the proper and safe way to go about adding a new tag to the editor. The method outlined in this post is NOT it.

Comments are closed.