March 24th, 2004

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

About the Author

Mark Ghosh

An avid fan of business, education, technology and finance. I lead a lean, highly focussed and capable team of Java Back End developers and Front End developers through a maze of complex software wizardry to fulfill the web maintenance needs of a large chemical manufacturer. As per Myers-Briggs Personality Types, I am an ESTJ. I pride in a project completed on time and according to plan. My hobbies include all kinds of technology, anything that I can taste and anything that goes fast or flies in the air. I like to read business books and comics in my spare time.

Web: https://weblogtoolscollection.com

Esther says:

6/2/2004 at 8:10 am

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?

Mark says:

6/2/2004 at 8:40 am

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

Servant says:

6/14/2004 at 9:58 am

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

+ve says:

6/17/2004 at 8:55 am

abcd

Steve says:

6/24/2004 at 4:04 am

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/24/2004 at 8:25 am

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…

6/24/2004 at 9:00 am

Glad you got it working!

JOachim Guanzon says:

7/29/2004 at 12:42 am

wow, that’s my site….

stefan says:

9/16/2004 at 10:13 am

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 🙂

Poonam says:

9/25/2004 at 2:22 pm

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!

9/25/2004 at 2:55 pm

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

corey says:

10/3/2004 at 11:34 am

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

10/3/2004 at 11:49 am

Sounds like you are missing a quicktags.php file

Vernessa Taylor says:

11/6/2004 at 10:34 pm

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

alawna says:

11/10/2004 at 3:21 am

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

Chris King says:

1/15/2005 at 10:14 am

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

usayd says:

2/2/2005 at 4:48 pm

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.

davincim says:

2/17/2005 at 12:25 am

I’m having trouble with getting my posts to come out right. A few of my posts that I tried the drop shadow to that (

2/17/2005 at 3:27 pm

bounce…

2/17/2005 at 11:57 pm

er, bounce? 🙁

2/18/2005 at 12:44 am

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

2/22/2005 at 5:49 pm

Hey there. Any thoughts on this? 🙂

Kitta says:

3/29/2004 at 11:03 am

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

David Blangstrup says:

4/8/2004 at 11:44 am

Very very nice! Cool! 😀

Per Madsen says:

4/14/2004 at 10:46 am

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:

4/14/2004 at 11:10 am

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!

4/14/2004 at 1:40 pm

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 😉

4/14/2004 at 2:04 pm

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 😳

Looking forward to using the quicktags:wink:

Thx Mark!!

4/15/2004 at 10:54 am

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

4/22/2004 at 6:58 am

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

4/22/2004 at 8:29 am

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

4/24/2004 at 9:57 am

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

4/24/2004 at 8:40 pm

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

Phil says:

5/10/2004 at 9:34 pm

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

5/11/2004 at 7:31 pm

I got my problem fixed. Thanks!

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

Thanks:!:

5/12/2004 at 7:46 am

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.

Julio C. says:

5/20/2004 at 10:51 pm

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.

Teeth Maestro says:

5/11/2005 at 6:10 pm

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?

6/5/2005 at 9:40 pm

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/

Ragle says:

9/15/2005 at 7:15 am

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?

Malexx says:

2/22/2006 at 10:47 am

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

Solo.twin says:

8/10/2008 at 9:31 am

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

8/10/2008 at 9:58 am

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

» Test test test! Wuahaha says:

7/10/2004 at 1:47 am

[…] 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 […]

SPG0 » Wordpress Quicktags says:

7/14/2004 at 4:59 pm

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

|| ZENTANGLEMENT v2.12 » It’s Alive!!!! My Shadows are alive!!! || Home says:

7/18/2004 at 12:17 am

[…] 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 […]

bookmarks » says:

8/26/2004 at 2:02 am

[…] « | Home 8/25/2004

Weblog Tools Collection: WordPress Javascript Quicktags […]

8/30/2004 at 3:23 pm

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

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

Weblog Tools Collection » Javascript Quicktags Updated says:

9/26/2004 at 1:11 pm

[…] 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 […]

Ellipsis […] » WordPress hacks & modifications - WordPress hacks & modifications says:

3/29/2004 at 5:08 am

[…] 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 […]

Jeremy’s Little Corner Of The Web… » WordPress Hacks says:

4/2/2004 at 3:59 am

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

Jeremy's Little Corner Of The Web... says:

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

Weblog Tools Collection » Image alignment & Drop shadows says:

4/12/2004 at 6:51 pm

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

Ian’s Blog » Blog Archive » WordPress Javascript Quicktags says:

3/22/2005 at 1:16 am

[…] « Inner Strength WordPress Javascript Quicktags Weblog Tools Collection Â» WordPress Javascript Quicktags Wo […]

Taking Your Camera on the Road » Changing the WordPress Quicktag Buttons says:

6/1/2005 at 12:33 pm

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

The LOdown says:

10/5/2005 at 2:11 pm

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…

Realize The You Dream In Asian Brain | Try, learn, exercise, work and pray Image Alignment & Drop Shadows » says:

12/14/2007 at 12:17 am

[…] 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. […]

WordPress Javascript Quicktags

Related Posts:

Comments

Trackbacks/Pingbacks

About the Author

Recent Posts

Categories