How to Add Custom Buttons to WordPress Editor

Earlier, we gave you tips to style posts in thesis wordpress theme. Be it thesis or any other theme if you place tags before and after text manually every time, it’s a painful procedure. So instead, if you add buttons to perform actions which you need for formatting posts very often, it will save a lot of time and energy.

WordPress Custom button

Let’s use a specific example now to explain things the easy way. Here’s the normal procedure to format some text as a “Note” in thesis theme

<p class="note">Testing for Notes</p>

Here’s the result of the above:

Testing for Notes

Now, suppose you have to repeat it five times in the post it becomes hectic typing it again or even copy pasting the tags. So, why not add a button to the editor itself. Here’s a screenshot of the default set of buttons available in WordPress HTML editor.

Most of us don’t know that buttons can both be added and removed from this panel. Here’s how:

First, create a backup copy of the quicktags.dev.js and quicktags.js files for safety reasons. These files are located in the wp-includes/js/ folder.

Now edit the quicktags.dev.js file. Once you open the file you’ll notice separate code for each button similar to the following.

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

So, all you now need to do is recreate a similar piece of code for every button you want and place it there. You may also delete a button by removing the code from this file. Now, let’s understand what each element in the code means and how to create a new button. We’ll be creating a new button which lets us create a “Note.”

First two lines identify the button. Third line is the display name for the button. Fourth and Fifth lines have the opening and closing HTML tags for the button. This is what the button will primarily do. When you first click the button the opening tag will be inserted and on next click the closing tag. Alternatively, if you select the text before clicking the button both the tags will be applied before and after text. Last line of code provides internal name for the button. So, here’s our code for the “Note” button.

edButtons[edButtons.length] =
new edButton('ed_note'
,'note'
,'<p class="note">'
,'</p>'
,'note'
);

Once the above code is inserted save the file. Delete the old quicktags.js file and rename the quicktags.dev.js to quicktags.js And you’re done.

There is no limit to the amount of customization we can do in WordPress, in order to assist us in our tasks and save time while doing them. Let us know via comments if this post helped you enhance your blogging skills.

Post image Credit.

Subscribe on Youtube

Article By
Hey, here's a guy in his late teens who is more than awed by technology and its marvels.

RECEIVE EXCLUSIVE BLOGGING TIPS

COMMENTs ( 18 )

  1. staid says

    Thanks for your tips. Now I can add my own button on my wordpress editor. This kinda different on new wordpress 3.4, but I can make it works with a little changes.

  2. AkyJoe says

    @Mani @Karan Labra @Tech Maish

    There is no compatibility issue for this tweak in wordpress, but the code above is a bit ambiguous for JavaScript Parser.

    Code is quite similar just notice the quotes should be removed, where we defined (p class=”note”). Correct version should be (p class=note)

    Enjoy!

  3. Rajat says

    @cruiser i doubt that. it’s a file outside the theme folder. you should try wordpress forums. do let us know if you find a workaround for this.

  4. Cruiser says

    I have a skin for Thesis that I would like to distribute. Is it possible to add buttons to the editor and have those button take effect when the skin is distributed?

  5. david says

    You are THE crack, I just setted up a center button in my editor and also edited the img part to add the class class=”aligncenter” to every photo I upload and is working like a charm…

    Will I have to do thyis every single time I upgrade my wordpress??

  6. anthony says

    hi, thank you for ur info this is very helpful but i need to edit my [img] button and i need to set it to align the image ‘center’ also the size w350 h450.. any help would be grat.. thanks in advance

  7. jenny says

    Earning money has online never been this easy and transparent. You would find great tips on how to make that dream amount every month. So go ahead and click here for more details and open floodgates to your online income. All the best

  8. Virtual Agent says

    I haven’t tried this yet but I will soon because I would like to add more buttons I need. Where do I get more buttons?

    • Rajat says

      whatever HTML tags you use often, like adsense, alert, note etc. you can create buttons for them. its totally upto you.

  9. George Serradinho says

    Thanks for this tip, I always use to do it the manual way, but now you have made my life easier.

  10. Mani Viswanathan says

    I added a similar note button on my blog at the very start itself using HTML,CSS & Post Editor Buttons plugin.

    But this method is new to me. Will try this on a test blog. I have a question though, does this effect also disappear as soon as we shift to the Visual view ?

    Because in the method I followed, it does disappear as it’s not compatible with the Visual Editor.

    • Rajat says

      Hi Mani, this method will only work for the HTML editor. even if it does appear in the visual mode there won’t be any visible changes after the effect is applied, so won’t really help much.

ADD COMMENT