ShoutMeLoud – Shouters Who Inspire

Superlinks
≡ Menu
≡ Menu

How to Add Custom Buttons to WordPress Editor

bluehost

Let Rubina Read this post For you

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.

haloween wordpress

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.

wordpress default buttons

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.

wordpress modded buttons

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.

  • Author Bio

  • Latest Post

Article by Rajat Kumar

Rajat has written 15 articles.

If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to ShoutMeLoud feed via RSS or EMAIL to receive instant updates.

{ 18 comments… add one }

  • JIT DUTTA

    I have tried this method to my wordpress 3.5 version. but is not working … any suggestion for me?

    Reply
    • Harsh Agrawal

      @Jit Dutta
      This article needs an update for WordPress 3.5 and above. I will update the article soon. Thanks for your comment.

      Reply
  • staid

    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.

    Reply
  • AkyJoe

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

    Reply
  • Rajat

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

    Reply
  • Cruiser

    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?

    Reply
  • david

    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??

    Reply
  • anthony

    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

    Reply
  • jenny

    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

    Reply
  • Virtual Agent

    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?

    Reply
    • Rajat

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

      Reply
  • George Serradinho

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

    Reply
    • Rajat

      glad i could, George!

      Reply
  • Technoblogsite

    totally not aware of this… will add some button soon….

    Reply
  • Tech Maish

    I tried the exact method, but not working for me. I did not saw any button in Post Editor.

    Reply
    • Rajat

      what version of Wordpress are you running?

      Reply
  • Mani Viswanathan

    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.

    Reply
    • Rajat

      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.

      Reply

Leave a Comment