Skip to content Skip to tags Skip to twitter news Skip to blog roll Skip to categories Skip to archives Skip to recent posts

November 29, 2007


So You Want More Tag Buttons for WordPress

by in Tips,Wordpress on November 29, 2007 @ 7:38 pm

If you are anything like me, you find using the Rich Text editor for WordPress to be a bit daunting for any number of reason. For me, it is mainly when I go to add custom code and go back to the visual editor and it just disappears. Yes I know I can go in and hack the thing to get it to appreciate my code, but really, I find that to be to much work. Besides, I found a really nice alternative, Quicktags!

What are Quicktags you say? Well, they are a bunch of little trolls that run around tagging things, they are really a bunch of fun once you learn to stay out of their way. They like Pepsi I find; tried to sneak Coke past them one day and ouch, never do that again.

Well, that’s it…

Ok, I’m kidding, there are no Quicktag trolls running around, just my baby girl pulling the dogs tail and grabbing the cat. But I do have a fix for those how prefer to work in code view.

WordPress has a file located at “wp-incudes\js\quicktags.js” that controls the buttons and it is pretty simple to implements. Go to the “wp-incudes\js\” folder, open up “quicktags.js” in your favorite editor and add the following to just before line 36:

Look for:

  1. edButtons[edButtons.length] =
  2. new edButton('ed_strong'
  3. ,'b'
  4. ,'<strong>'
  5. ,'</strong>'
  6. ,'b'
  7. );


  1. edButtons[edButtons.length] =
  2. new edButton('ed_h1'
  3. ,'h1'
  4. ,'<h1>'
  5. ,'</h1>'
  6. ,'h1'
  7. );

Save it, upload it and test it. Now you should have an H1 button just before the B (bold) button. Pretty simple.

You are free to add as many tags as you want and below is the partial list of what I have on my system:

  1. edButtons[edButtons.length] =
  2. new edButton('ed_h1'
  3. ,'h1'
  4. ,'<h1>'
  5. ,'</h1>'
  6. ,'h1'
  7. );
  9. edButtons[edButtons.length] =
  10. new edButton('ed_h2'
  11. ,'h2'
  12. ,'<h2>'
  13. ,'</h2>'
  14. ,'h2'
  15. );
  17. edButtons[edButtons.length] =
  18. new edButton('ed_h3'
  19. ,'h3'
  20. ,'<h3>'
  21. ,'</h3>'
  22. ,'h3'
  23. );
  25. edButtons[edButtons.length] =
  26. new edButton('ed_h4'
  27. ,'h4'
  28. ,'<h4>'
  29. ,'</h4>'
  30. ,'h4'
  31. );
  33. edButtons[edButtons.length] =
  34. new edButton('ed_h5'
  35. ,'h5'
  36. ,'<h5>'
  37. ,'</h5>'
  38. ,'h5'
  39. );
back to beginning of this post back to skip to links

If you liked this article why don't you share it:

Stumble it delicious Digg it Reddit it DZone it Bump it Mixx it! Buzz up! E-mail

2 Responses to “So You Want More Tag Buttons for WordPress”

Nice. I’ll have to try that out on my site. You could also use the advanced tinyMCE plugin to get heading styles.

I agree, but since most programmers don’t use the editor people of the way it changes a persons code, this was a good alternative.

Learn from my mistakes, I got burnt by the flame, you don't have to.

RSS Feed Link My Hosting of Choice

79 queries. 0.276 seconds. Powered by WordPress visitor stats