This has been updated again, see this post for details.

I have made some minor updates to the script that generates the Quicktags buttons in the WordPress post editor.

The default quicktags toolbar looks like this screenshot below, with 15 grey buttons:
Original WordPress Quicktags bar

I wanted a few extra functions, including: Heading 3 & 4; Quotation; small; big; superscript; and for a block of code. To fit all of these into the space above the post in a standard window, I needed to shorten the names somewhat. To help differentiate the different functions, I have highlighted the buttons in different colours. See screenshot below:
Updated WordPress Quicktags bar
(like the original toolbar, the buttons wrap in a narrow browser window)

One other feature is a list of special symbols, which inserts the proper HTML entity, which is useful for forign languages and mathematical symbols.
Updated WordPress Quicktags symbols list

I don’t use the dictionary lookup button, so I removed that. To re-enable it uncomment line 330.

Update: This has been updated again, and now includes a few changes made to the original script that were released with wordpress 1.5

This is not a Plugin, but it’s easy to install. Download the updated file. Inside the .zip file is quicktags.js a javascript file that should be placed in the /wp-admin/ directory, replacing the original file (which you may wish to rename). That is it!

Hope this is of use to some people. I cannot claim any credit for the original Quicktags script, that goes to Alex King and the WordPress developers.

This entry was posted on Saturday 15th January 2005 in Blog and tagged , , . You can follow any responses to this entry through the RSS 2.0 feed. Comments are currently closed, but you can trackback from your own site.

19 Comments

  1. Hi. Newbie question- Is this compatible with WP1.5? Also, is it ok to leave the original file in it’s renamed state- in the directory?

    this looks great- exactly what I need. thank you.

    Catonya

    Comment by Catonya — 15-Feb-2005 @ 21:30

  2. I have not tested this with 1.5 yet, but from what I have seen of the beta version, I think it should be OK. Will check on this later, when I have time.

    Leaving the renamed file in place should not cause any problems, the script is just referenced by the unique filename quicktags.js

    Comment by Donald — 17-Feb-2005 @ 20:14

  3. installed a few minutes ago on 1.5, working great so far.

    any chance ‘center’ and ‘underline’ could be added in the future?

    thanks for a great plug-in.
    Cat

    Comment by Catonya — 26-Feb-2005 @ 01:51

  4. I adore this hack. Thanks :)

    Comment by Carrie — 30-May-2005 @ 08:44

  5. This is wonderful. Can you give an itemized list of what has been changed or different? I see a Q but I’m not sure what that is for since there is no “q” tag that I know of. And the + and – , what are those for? And have you added the “title” attribute to links and/or images? This is ALWAYS requested on the forums.

    Very cool. Thank you!

    Comment by Lorelle — 1-Jun-2005 @ 17:08

  6. Lorelle:

    The only changes are the extra button described above… the rest of the script is as it was originally.

    The Q tag is for short quotations

    The + and – are for big and small text respectively (it made sense to me when I wrote it, although I’ve never written any documentation for it)

    I’ve not added the “title” attribute—not something I tend to use on this site. It should be relatively trivial to modify the code to include these though—I may do so at a later stage

    Comment by Donald — 1-Jun-2005 @ 20:52

  7. This is excellent! Thanks so much.

    Comment by Caitlin — 25-Aug-2005 @ 18:27

  8. [...] ”¨åŽŸæœ¬çš„樣式吧，也沒多難看。 相關文章 ‧WordPress Downloads ‧Updated WordPress Quicktags script ‧Wordpress Documentation [...]

    Pingback by 7382 » Blog Archive » Quicktags Guide — 23-Oct-2005 @ 16:59

  9. [...] tion: WordPress Javascript Quicktags
    Updated WordPress Quicktags Script for Colorful and Bet [...]

    Pingback by Taking Your Camera on the Road » Changing the WordPress Quicktag Buttons — 8-Nov-2005 @ 13:59

  10. [...] Apropos quicktags: die liegt ja nun auf einem anderen Pfad. Da ich eine Reihe eigener Buttons hatte, wollte ich sie wie gewohnt bearbeiten, das gab aber Fehlermeldungen. Lösung: einfach die bisherige quicktags drüberbügeln – fertig. So lässt sich z. B. weiterhin die erweiterte Buttonbar von drnoble einsetzen. [...]

    Pingback by Der Männerblog » WordPress 2.0-Update — 29-Dec-2005 @ 23:31

  11. [...] 相關閱讀 ‧WordPress Downloads ‧Updated WordPress Quicktags script ‧Wordpress Documentation ‧Make editing your WordPress Weblog even easier ‧Changing the WordPress Quicktag Buttons // Used for showing and hiding user information in the comment form function ShowUtils() { document.getElementById(“authorinfo”).style.display = “”; document.getElementById(“showinfo”).style.display = “none”; document.getElementById(“hideinfo”).style.display = “”; } function HideUtils() { document.getElementById(“authorinfo”).style.display = “none”; document.getElementById(“showinfo”).style.display = “”; document.getElementById(“hideinfo”).style.display = “none”; } [...]

    Pingback by Quicktags Guide at 7382 — 4-Jan-2006 @ 05:48

  12. [...] You can change your quicktags by for example using this file instead (also add H2 to the file) so that you easily can insert heading tags when you write. [...]

    Pingback by Success with SEO for WordPress — 17-Mar-2007 @ 02:53

  13. [...] You can change your quicktags by for example using this file instead (also add H2 to the file) so that you easily can insert heading tags when you write. [...]

    Pingback by SEO, Google Adsense, Free Domain, Free Hosting, Tips and Tricks,… » SEO for WordPress - The Complete Guide — 14-Jun-2007 @ 12:10

  14. [...] You can change your quicktags by for example using this file instead (also add H2 to the file) so that you easily can insert heading tags when you write. [...]

    Pingback by MrHoang Blog » SEO for WordPress - The Complete Guide — 15-Aug-2007 @ 11:29

  15. [...] You can change your quicktags by for example using this file instead (also add H2 to the file) so that you easily can insert heading tags when you write. [...]

    Pingback by SEO for WordPress - The Complete Guide « Welcome — 20-Nov-2007 @ 13:36

  16. [...] You can change your quicktags by for example using this file instead (also add H2 to the file) so that you easily can insert heading tags when you write. [...]

    Pingback by Пишу » SEO for WordPress - The Complete Guide — 20-Nov-2007 @ 13:36

  17. [...] can change your quicktags by for example using this file instead (also add H2 to the file) so that you easily can insert [...]

    Pingback by SEO for WordPress - The Complete Guide — 8-Aug-2008 @ 18:01

  18. [...] can change your quicktags by for example using this file instead (also add H2 to the file) so that you easily can insert heading tags when you [...]

    Pingback by SEO Tips for WordPress - The Complete Guide | Wordpress Expert — 3-Oct-2008 @ 06:13

  19. [...] 3?????????? ??“quicktags”???????????????????????????????? [...]

    Pingback by WordPress???????? | ???? — 4-Dec-2008 @ 08:48

RSS feed for comments on this post. TrackBack URL

Sorry, the comment form is closed at this time.