post-page

WordPress Javascript Quicktags

58
responses
by
 
on
March 24th, 2004
in
Weblog Add-Ons, WordPress Hack

[EDIT] This has been updated with a fix for Mozilla where the textarea used to jump to the top on addition of a tag. The updated script is in the same file, and some instructions have been added.

I tweaked, redid and added some Javascript quicktags in WordPress. Quicktags, for those that are unaware, are those small little buttons above the post content form in your admin interface. Some of the features added include:
Automatic CSS dropshadows for images
Automatic CSS dropshadows for text
Capitalization (can be used for many purposes)
Small size and large sized text
Left or right floating pictures and text etc.

You can see an example of the stuff this is capable of here:
http://mindfulmusings.net/weblog/2003/5/24/this-is-another-test/

To install this hack, download this file. Unzip the contents on your computer. Copy the images directory to the root of your WordPress folder. Rename quicktags.txt (in the zip) as quicktags.js. Rename the original quicktags.js in your wp-admin folder to something else for backup and copy the new file into your wp-admin folder.
Now open your wp-layout.css (or whatever else you call your CSS file) and add this to the end of that file:


.img-shadow {
clear: both;
float:left;
background: url(images/shadowAlpha.png) no-repeat bottom right !important;
background: url(images/shadow.gif) no-repeat bottom right;
margin: 20px 0 0 17px !important;
margin: 20px 0 0 8px;
}


.img-shadow img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;
}


.p-shadow {
width: 90%;
float:left;
background: url(images/shadowAlpha.png) no-repeat bottom right !important;
background: url(images/shadow.gif) no-repeat bottom right;
margin: 10px 0 10px 30px !important;
margin: 30px 0 0 15px;
}


.p-shadow div {
background: none !important;
background: url(images/shadow.gif) no-repeat left top;
padding: 0 !important;
padding: 0 6px 6px 0;
}


.p-shadow p {
color: #777;
background-color: #fff;
font: italic 1em georgia, serif;
border: 1px solid #a9a9a9;
padding: 4px;
margin: -6px 6px 6px -6px !important;
margin: 0;
}

Note: You can change any of the CSS elements or the elements in the quicktags.js to suit your needs. These javascript functions and CSS tags can be used in other blogs/sites as well and the inspiration comes from Dunstan Orchard and http://www.alistapart.com/

I would like to know if there are any other useful tags/CSS tricks that people would like to see in Quicktags.

heading
58
Responses

 

Comments

  1. Esther says:

    Thanks! It’s great to know how to modify quicktags, and the dropshodow trick is wonderful.
    I have one issue now though and I’m wondering if it has nothing to do with the img tag …
    emoticons are not working in my posts although I have the option selected to show images in the admin. Any ideas?

  2. Mark (58 comments.) says:

    I would make sure the location for the images of the emoticons are set correctly. They show up on the same admin panel.

  3. +ve says:

    abcd

  4. Servant (1 comments.) says:

    Bible Read search in Arabic Studys Stories Testimonies Hymns and Poems Answers Books Links Daily devotions Music/

    Alnemat Journal Arabe Chrétien La Grâce la Revue Arabe sur Internet offre La Sainte Bible Al-Injil L’Evangile de Jésus Christ

    gratuit

  5. Steve (2 comments.) says:

    I can’t seem to get the Quicktags to work for me in Safari (Mac) or IE (both Mac and XP). I have been able to see/use the new Quicktags with Firefox on both XP and MacOSX, but that is it. Any ideas as to why this is? Is there anything that I can do to workaround this besides using Firefox?

  6. Steve (2 comments.) says:

    I seem to have spoke too soon…
    I checked this again from my iMac at home, and now it works fine on both Safari and IE. This must have been a cache issue with my iBook, although I did clear the cache a few times…

  7. Mark says:

    Glad you got it working!

  8. JOachim Guanzon (1 comments.) says:

    wow, that’s my site….

  9. stefan (1 comments.) says:

    if you’re using the pic as a hyperlink, do you place the “divs” nested inside the href tags and outside the img tags?

    I currently have the div tags nested outside of it all…and it doesn’t validate that way.

    Thanks :)

  10. Poonam (10 comments.) says:

    Mark, did you happen to fix your code so that in Mozilla/Firefox once you enter a quicktag it doesn’t jump to the top? I know that Alex fixed it on his, but just wondering if you had an updated one?

    Thanks!

  11. Mark (34 comments.) says:

    Not yet. It will be soon though now that you have brought it to my attention. :)

  12. Mark (34 comments.) says:

    Sounds like you are missing a quicktags.php file

  13. corey says:

    can’t seem to get the new quicktags to work. after following the instructions, i’m getting the following errors in the UI:

    Warning: main(quicktags.php): failed to open stream: No such file or directory in /homepages/44/d108849036/htdocs/viewblog/wordpress/wp-admin/edit-form.php on line 72

    Warning: main(): Failed opening ‘quicktags.php’ for inclusion (include_path=’.:/usr/local/lib/php’) in /homepages/44/d108849036/htdocs/viewblog/wordpress/wp-admin/edit-form.php on line 72

  14. Vernessa Taylor (1 comments.) says:

    I was having the same problem as Mark (now resolved). Tried closing ftp app, refreshing cache and index page. However, I quicktags didn’t show up until I refreshed the Admin page, *while I was logged in*.

  15. alawna says:

    Hi. Great pulgin. Just one question. I dont want the image to be left or right. Just on top or buttom of the text. Is that possible?
    Thanks

  16. Chris King (1 comments.) says:

    HI, Great tool, and I’ve even got it mostly working (but then I am a dope!). I have a few problems/questions though if I may:
    First, the layout in Firefox is all jumbled and the following post after a dropshadow is pushed up into the shadowed post :(. Sadly it is workign fine in IE. My HTML is too weak to figure it out still.

    Second is that I thought I understood there was a featrue for text wrapping around a left/right aligned pic as well. I may just be off on that one though.

    Thanks for sharing your work!

    Chris

  17. usayd (1 comments.) says:

    Great design etc, shame that the layout is a bit messed up with firefox so I have to use a couple of
    tags to push it down again which will probably damage it on IE.

  18. davincim (4 comments.) says:

    bounce…

  19. davincim (4 comments.) says:

    er, bounce? :(

  20. Mark says:

    Hahaha, I have never seen anyone else do this before. I will look at this tomorrow/this weekend. Sorry for the delay.

  21. davincim (4 comments.) says:

    Hey there. Any thoughts on this? :)

  22. Kitta (3 comments.) says:

    I was wanting something like this, I’ve downloaded it and will look at it later. Thanks. :smile:

  23. David Blangstrup (2 comments.) says:

    Very very nice! Cool! :grin:

  24. Per Madsen (4 comments.) says:

    I just uploaded the the unzipped files to my server, and my post content form in the interface now looks like this: http://www.ecotox.dk/tags.jpg
    Is that how it should look?
    Please bear with me…I’m a, as you probably already have guessed, complete newbie…
    Help would be much appreciated:wink:

  25. Mark (36 comments.) says:

    Per,
    Nope. The tags are not showing up. You still need to rename the quicktags.txt to quicktags.js (after you have renamed the old quicktags.js) and then reload the admin page. You can email me outside of comments if you cannot get it to work. I will be more than glad to help you out!

  26. Per Madsen (4 comments.) says:

    Thank you very much for offering me your help. Much appreciated! I haven’t been able to locate your email-address, so I’ll post a reply here…
    Here’s what I did:
    1. dl’ed the file->unzipped it->located the quicktags.txt-file and renamed it to quicktags.js
    2. Logged into my server (using Transmit for OS X)->uploaded the two image-files to the existing Image-folder located in the WordPress folder.
    3. Renamed the, on the server located, existing quicktags.js-file from quicktags.js to quicktagsBackup.js->then uploaded the “new” quicktags.js-file I downloaded earlier, to the WP-admin-folder.
    4. Copied the code (img-shadow {
    clear: ….etc.) from this site->Opened the wp-layout.css and pasted the copied code into that file…I added it at the end of the file….->saved the wp-layout.css-file.
    5. Emptied the cache of my browser and reloaded the page with the interface-page where I write my postings.

    Did I do anything wrong?

    Once again…thx Mark :wink:

  27. Per Madsen (4 comments.) says:

    Don’t bother Mark:grin:…I’m not really sure why, but the quicktags now visible in the posting interface. I _had_ saved the wp-layout-file, but for some odd reason it did not take effect until I closed the ftp-app. Maybe it all must be listed as an “error 40″….the error source is identifyied as being sitting 40 cm from the screen here in my room :oops:

    Looking forward to using the quicktags:wink:

    Thx Mark!!

  28. Per Madsen (4 comments.) says:

    Hmmm…now my image- and link-quicktags don’t work :cry:

  29. But if you add the span-left and span-right tags around a text, it wont validate, because it doesn’t nest properly with the p-tags! :sad:

  30. Mark (58 comments.) says:

    Take autop out as a filter for your content text. That solves the validation issue.

  31. autop? auto- p-tagging or…? How do I take it out as a filter? :???:

  32. Mark (58 comments.) says:

    Open up template-functions-post.php and remove this line:
    add_filter(‘the_content’, ‘wpautop’);

  33. Phil says:

    I am getting just a solid white box around my images. Any ideas?

    Also, should the new quicktags say? I don’t see any new ones.

    I have WP 1.2. Could that be the issue? :?:

    Thanks!!!

  34. Phil says:

    I got my problem fixed. Thanks!

    HOWEVER… what if you want 2 pics side by side, with drop shadow on each?? Any ideas?

    Thanks:!:

  35. Mark (58 comments.) says:

    Because this uses a float to generate the shadows, the only real way to get them side by side is to wrap the whole image in a div and then insert another one. The images have to be of the correct size so they can fit inside your content div.

    I would look at playing around with the CSS that is included with those quicktags. Also, take a look at the example on http://www.alistapart.com/ to see the example on multiple images.

  36. Julio C. (1 comments.) says:

    I’m having a problem where when I use pic drop shadow the pic messes up the post bellow it. It moves the title of the old post to the right and the pics gets to be in between the 2 posts. I’m a new so I’m not really sure if there is somthing i did wrong.

  37. Teeth Maestro (1 comments.) says:

    I jsut recently upgraded to 1.5.1 replaced the quicktag.js file but seems as if its not working – dont see the pic drop shadow and text drop shadow – BUT i uploaded m Photopress plugin that shows the browse and upload button, is there a clash between the two?

  38. Steve (1 comments.) says:

    Hi guys,

    thank you for all the amazing work that goes into this.
    I have a question. I am using your quicktags, specially the one to leftify the images, but I always have to put a bunch of tags on the botton, because the image goes over the table border. I also noticed that mine is not alligned with the top. What am I doing wrong?

    Steve
    http://www.geektavern.com/

  39. Ragle (1 comments.) says:

    Ok, I just know this is going to make me sound like a total novice, but here goes: I don’t find a wp-layout.css file anywhere in my install. I am running WordPress 1.5.2 with the Back in Black 2 template installed. Now, there are CSS files within the templates, both default and installed, which are named style.css. I appended the one I am using after following all the other directions and nothing has changed within my UI. Emptied cache, refreshed, shut down the FTP app, and still nothing. Can someone spare a clue for me?

  40. Malexx (1 comments.) says:

    Hi,i have a problem with the d rop shadows,i just get a white box around the image.Someone know why?

  41. Solo.twin says:

    Hi, and thanks.

    I cant find any “wp-layout.css” in my WP…
    I use WP version 2.6

    I am not sure where the folder and files “images/shadowAlpha.png”, “images/shadow.gif” or the .”quicktags.js” file where should be in. Its to folders, one in wp_admin and they other inn wp_include.
    I supose they should be in the same directory as “wp-layout.css”, but when I couldt find it…. :(

    Excuse, I am new on WP…

    Keep up the good work! :D

  42. Solo.twin says:

    And I dont have any quicktags.js either, so no one to replaced…



Trackbacks/Pingbacks

  1. [...] 2; jc @ 1:46 pm I will now test the floating picture hack I just downloaded from the Weblog Tools Collection… Here goes an image: Hopeful [...]

  2. bookmarks » says:

    [...] http://www.hauntedpalace.net/bookmarks“>Home 8/30/2004

    WordPress Quicktags Guide WP Javascript QT
    (CSS, PHP, WP, xhtml) Carla @ 11:22 [...]

  3. [...] bre et de permettre l’alignement à gauche ou à droite du texte. Récupération des Quicktags en question. Faire exactement ce qui est indiqué. [...]

  4. [...] eah, for those of you readers that use your own bloggin systems on your server, check this wordpress hack I found. The author says the .js hack can ad [...]

  5. [...] oonam for pointing this out to me. If you have visited my post on the “hacked” WordPress Javascript Quicktags you might be aware of a Mozil [...]

  6. [...] oonam for pointing this out to me. If you have visited my post on the “hacked” WordPress Javascript Quicktags you might be aware of a Mozil [...]

  7. [...] tall these when I find the time. I’ll add on to the list when I come across more. Javascript Quicktags Wiki Plug-In Amazon Media Manager Hac [...]

  8. [...] 18:58 I just added (or updated) a whole lot of WordPress Hacks for this site: Mark’s JavaScript Quicktag changes Alex [...]

  9. WordPress Hacks
    I just added (or updated) a whole lot of WordPress Hacks for this site:

    Mark’s JavaScript Quicktag changes
    Alex King’s Style Switcher and Photos
    KAShirow’s Photo Calendar
    Denyerec’s Amazon Media Manager

  10. [...] Weblog Add-Ons WordPress Hack — Podz @ 6:50 pm Mark posted a while back (link) a quicktags improvement that included the ability to h [...]

  11. [...] « Inner Strength WordPress Javascript Quicktags Weblog Tools Collection » WordPress Javascript Quicktags Wo [...]

  12. [...] rs: WordPress Quicktags Documentation Weblog Tools Collection: WordPress Javascript Q [...]

  13. The LOdown says:

    Better Link Quicktag for WordPress

    Are you getting the most out of your link quicktag? Still inserting title=”" and rel=”external” attributes by hand? Fret no more; a smarter, better link quicktag is here!

    New Features for the Link Quicktag
    I see in the WP support forums that o…

  14. [...] I know it says ‘text-align’ but it works with pictures too. Now, when you post something that you want to be centred, you write it like this; <div class=”cent”> Everything here will be centred </div> For this next part, you are going to need some code and images. This is already done – by Laughing Lizard – and you will need to go to his site, get the code, and follow all the instructions there (they are brief and easy!) before you can do the rest of this page. Go to the Weblog Tools Collection. [...]

Obviously Powered by WordPress. © 2003-2013

page counter
css.php