What is it?
The Graceful Pull-Quotes plugin (formerly “JavaScript Pull-Quotes”) is an add-on for WordPress that allows you to easily insert pull-quotes into your posts and pages. It uses client-side JavaScript specifically because, as a purely visual effect, it seems appropriate to avoid “doubling up” the text for people on text-only browsers or older browser that probably won’t properly handle the CSS involved. If a browser has JavaScript turned off, or otherwise somehow can’t handle the pull-quotes, then they should be completely invisible and out of the way.
How do I use it?
The plugin will look for any text that is inside a tag with a class of “pullquote”, and turn it into a pull-quote. <span class="pullquote">This sentence is a pull-quote, for example</span> — though in a real post the span tags will not be visible to readers as they are in this case! Via separate plugin you can add an automatic “Pull-quote” button to the post editor screen (see “extras” in the download); otherwise you should be able to add the <span> manually.
If you like, you can specify a particular side for a particular quote. To do this, simply set the span’s class to “pullquote pqRight” or “pullquote pqLeft”. This will put that one pull-quote on the chosen side completely independently of any other side-related options in use.
There is a options panel in the WordPress admin screen that allows you to set various options. I recommend you check it out before adding any pull-quotes to posts — you can find it under the Presentation section.
In the aforementioned options panel there is a control to select a style for pull-quotes, much like selecting a Theme in WordPress. There is also a preview button, so you can see what a particular style looks like without having to activate it first.
Sometimes you have a sentence with some subsidiary clause that you don’t want to include in the pull-quote. We’ve got you covered. If you have some text that you want to quote, but leave out extraneous, repetitious, or just plain unnecessary text, you put the alternate text in an <!-- HTML comment --> immediately inside the span. This last part is important — <span class="pullquote"><!-- You can put any alternate text you want in the comment -->the comment must be the very first thing inside the span</span>: no spaces, quote marks, or anything else comes first. (Again, the spans and comments will not be visible to your readers — this is just for demonstration purposes!).
Using alternate text in this way is of course completely optional If you like to keep things simple, just put the quotable text in a span as noted above and you’ll be fine. That’s about all there is to it.
Features
- The plugin is fully language-aware and ready for localization. German (Thanks Mattias), French (Merci Ben), Persian, and Italian localizations are included.
- Styles menu. The Options panel has a drop down menu that allows you to choose a visual style for your pull-quotes. Styles are easily customized and open for third-party contributions (similar to WordPress Themes).
- Preview styles without activating them
- A pull-quote style can be embedded in a WordPress theme. If the active theme has a file called “jspullquotes.css” in it, that will be used automatically.
- You can specify a side for a particular quote. To use, set span class to “pullquote pqRight” or “pullquote pqLeft”
- Successive pull-quotes can alternate sides
- Optionally strips links out of the quote text
- Have pull-quotes that differ from the “auto-quoted” text
- Allow user to choose default side
- Advanced options to specify the HTML tag and CSS classes to be used
Installation
Download the file, unzip it, and put the jspullquotes folder into your blog’s wp-content/plugins/ directory. Next activate it in the WordPress Plugins panel.
Download
- jspullquotes.zip v. 2.3
- jspullquotes.zip v. 1.7 (for WP versions lower than 2.5)
Is this download worth something to you? If you have found this system useful, please consider making a donation. Even as little as a dollar is appreciated:
Comments and suggestions are welcome.
Share the Love
If you like this plugin, please spread the word! I’ve made one o’ them handy sidebar link images that you can download and put on your own blog. Please link it to this page, of course! Here’s the image; just right-click and save:
Or, if you have the plugin installed, you can simply paste the following into your sidebar (you may need to change the image “src” path, depending on your site):
<a href="http://striderweb.com/nerdaphernalia/features/wp-javascript-pull-quotes/"><img src="/wp-content/plugins/jspullquotes/extras/jspullquotes.png" alt="JS Pull-Quotes" title="JavaScript Pull-Quotes" height="15" width="80" /></a>Acknowledgements
Thanks to Roger Johansson and “Viper007Bond” for laying much of the groundwork that led to this plugin. See the readme.txt file included with the download for further details.
Thanks to Mattias for the German translation, Ben for the French, and to my wife’s friend Toni’s cousin Ralph for the Italian.
Last but not least, thanks to the fine folks at WordPress who made this all possible.
Troubleshooting/ Work-Arounds
- If you want to use this effect on a non-WordPress website, I suggest you check out the original script on Roger’s site, or my “no links” version.
- PROBLEM: You install it and nothing happens when you add the span tags to your post. SOLUTION: It may be your theme. Check in the
header.phpfile — the following line must appear somewhere in the section of your page (usually toward the end):
<?php wp_head(); ?> - BUG: There are issues with accented letters within alternate text comments that need to be fixed
- You may have noticed “alternate text” pull-quotes throwing errors when you have a double-dash in them. This is an obscure technicality of HTML rearing its head. Technically speaking, a double-dash ends an HTML comment, and that means the comment is ending earlier than you want it to.
- There is a bug in the JavaScript rendering of certain less common browsers, (such as older versions of Safari), which causes it to miss the alternate text. Assuming that some of your users probably do use these browser, you have two options:
- Do the alternate text as described. The buggy browsers will show the *actual* text in the span as though the alternate were not there.
- Put the comment alone in a pullquote span, just before the sentence you’re (sort of) quoting. Buggy browsers will not show any pullquote, but other browsers will work normally. Example:
<span class="pullquote"><!-- Darn that browser! --></span>Darn that Javascript-mangling browser!
209 Comments
Pages: « 1 2 3 4 5 [6] 7 8 9 10 11 » Show All
yes, this plugin i was also looking for. I installed and find it works. But, all users can’t login after installation. When disabled, all go fine. Any comments?
Zahidayat — This plugin doesn’t do anything that I can imagine would block users from logging in. What other plugins are you running? What version of WordPress?
Disable all plugins and see if you still have the problem. Then re-enable just JS Pull-Quotes and see if the problem comes back.
Hi.
I have upgraded from 1.5.2 to the actual one, and I get this error message :
Moreover it made strange things (addind bullet points) in comment.
I deactivated the plugin and it came back to the normal situation… but without pullquotes. Do you have any idea ?
Koz –
The first thing I would check is that it’s not some conflict with another plugin you’re using. What plugins are you using? try turning them off and see if the problem is tstill there with this plugin.
The second thing to check is that there’s no problem with your theme. Activate the plugin, and change to the default theme, and see if the problem is there with the default theme.
If you need to downgrade, you can still download version 1.5.2. (But let’s get you running on the new version — esp. with the French translation!
)
Koz –
Actually, before you try any of that, delete the pull-quotes plugin, re-download it from this page, and try it again. The files may have gotten corrupted.
Argh, you’re right : it seems that there is a conflict with my theme. Thank you for the 1.5.2 version. I think I will use this one, except if I find a workaround. And, maybe, with 2.5 coming up, change my theme.
Thanks for a nice plugin. However, I have made some small modifications to make it work with some of my Wp projects. The idea is great!
Just wanted to say your demo actually made me laugh out loud. Good work, those are the best pull-quotes i’ve ever read.
Jeremy — truly you must have a dry wit.
Glad to be of service.
First, thank you for the plugin – especially the ability to tweak it for ourselves. (I had fun changing colors.)
However, I can’t seem to get the manual setting of the side to work correctly. If I click the box for “alternate sides”, it alternates. If I don’t click the box, they are all on the side I’ve specified in options (all left or all right.)
I’ve put in the appropriate span for left or right, but the pattern isn’t over-ridden.
Am I missing something?
Thanks!
Cathy
Cathy –
This should work:
<span class="pullquote pqRight">This is a pullquote</span>Note that that will only override the side of that one pull-quote.
The “alternate sides” checkbox just makes them switch back and forth down the page.
Very useful plugin. Thanks.
I got the plugin to work very well with Firefox and IE7, but IE6 users get a blank page. Problem goes away when the plugin is deactivated. I’m guessing it’s a conflict with the theme, so I’ll try that path for a bit to try to resolve the issue. (Also, strangely, I get a blank page in Ffox after saving or publishing, which goes away when you try another address. I get these characters “” immediately after deactivating it to.)
I get this error whenever I try to save something! I tried a different theme and deactivated plugins, but got the same result. Your help would be appreciate. I am using WP 2.3.3.
Warning: Cannot modify header information – headers already sent by (output started at /home/domains/public_html/wp-content/plugins/jspullquotes/jspullquotes.php:1) in /home/domains/public_html/wp-includes/pluggable.php on line 390
Thanx
Darrell
Darrell — Try deleting and re-uploading the plugin files. Sounds like a corrupt file.
I am getting the same error as Darrell. I am not sure, but could it be a problem with the new version of WordPress that was just issued. I admit that I did not use it with the old version, but a colleague did and had no trouble.
well, thats really a good plugin, am gonna use it now..
[...] Berea Street: Automatic Pullquotes with Javascript and CSS Nerdaphernalia: WordPress plugin for javascript pullquotes Whole section in the book Learning jQuery about [...]
This plugin will conflict with the WP Automatic Upgrade Plugin. Turn automatic plugin off when not in use and pull quotes on then you’ll be fine. Do the opposite when you need to upgrade WP with automatic upgrade.
I’m getting the following conflict:
Warning: Cannot modify header information – headers already sent by (output started at /nfs/c01/h02/mnt/631/domains/sundaysalon.com/html/wp-content/plugins/jspullquotes/jspullquotes.php:1) in /nfs/c01/h02/mnt/631/domains/sundaysalon.com/html/wp-includes/pluggable.php on line 694
Thoughts?
FRank — in my experience the error you’re getting happens when there’s a bad upload. Try re-uploading the files to the server.
Regarding the auto-update plugin — I’ll have to check into that. Not sure why it wouldn’t work — All it’s doing to the page is adding a JavaScript link to the header (and of course the script itself runs).
Pages: « 1 2 3 4 5 [6] 7 8 9 10 11 » Show All