What is it?
The JavaScript Pull-Quotes plugin 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), 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.2
- 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!
153 Comments
Pages: « 1 … 4 5 6 [7] 8 » Show All
I’m having trouble activating the plugin. I transferred it to my plugins folder, but it doesn’t show up in the plugins list in the admin area. Uh…help?
Tried downloading and reuploading. Seems to be a cache issue? here is the error:
Warning: session_start() [function.session-start]: Cannot send session cache limiter - headers already sent (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-content/plugins/wordpress-automatic-upgrade/wordpress-automatic-upgrade.php on line 92
I also tried version 1.5.2 but to no avail. Any other thoughts?
Also getting a similar error to that above.
Warning: Cannot modify header information - headers already sent by (output started at C:\xampp\htdocs\FurteanTimes\wp-content\plugins\jspullquotes\jspullquotes.php:1) in C:\xampp\htdocs\FurteanTimes\wp-includes\pluggable.php on line 694
Possible conflict with the new version of Wordpress?
(Also, I’ve already tried various ways of re-downloading and re-uploading, re-activating, etc.)
I’m also getting the header error (wordpress 2.5):
Warning: Cannot modify header information - headers already sent by (output started at /home/public_html/wp-content/plugins/jspullquotes/jspullquotes.php:1) in /home/public_html/wp-includes/pluggable.php on line 694
I’ve tried different upload methods, deleting, etc.
anyone have a fix?
Question for the people having the header errors — have you tried deactivating other plugins? What plugins do you have active?
My best guess is that this is a plugin conflict of some sort.
Did it start with a particular version of the plugin? I haven’t been able to reproduce it….
Hi Strider,
this is a weird one. as soon as the plugin is activated it actually stops you deactivating it and any other plugins. The only way to get things working again is to delete the jspullquotes folder and all of its sub-directories.
I have two other plugins activated.
Smart Trailing Slash
Google XML Site maps
I removed jspullquotes, disabled the other plugins then reinstalled and this hasn’t solved the problem. The only active plugin during this test was jspullquotes and the problem still occurred.
let me know if there is anything else you’d like me to test.
Hi,
I am having a problem that I think some others said they were having as well. The plugin works great except that when I go to save a page or post, I get this:
Warning: Cannot modify header information - headers already sent by (output started at /home/xondie/public_html/wp-content/plugins/jspullquotes/jspullquotes.php:1) in /home/xondie/public_html/wp-includes/pluggable.php on line 694
It does save it and the pull-quotes display nicely on the page. But I get this error every time I try to save a page, whether I put pull quotes in it or not.
I am using WordPress 2.5.1.
My other plugins include Dagon Design Form Mailer, and Easy Tube.
Thanks! It’s a cool plugin.
The site has been inaccessible (for me, anyway) for several days — so I’ve been delayed on this.
I’ve still haven’t been able to reproduce the problems people have been having, but I’ve been going over the code with a fine-toothed comb and doing a lot of cleanup and such.
Tonight I expect to release a new version of the plugin — no new features, but lots of code cleanup. Hopefully it will fix the issues y’all are experiencing. Considering some of the things I fixed, I think it might do the trick. (For example, my PHP uses classes as a form of “poor man’s namespaces”, but it wasn’t always referencing the class object the same way….)
In fact, this run of coding will probably lead to a “tips for plugin devs” post. I figured out some interesting things that I think will be of use to others. I also overhauled the Virtual Multiblog system in the same manner.
New release! (sort of)
No new features at the moment; this is a “code cleanup” release that will hopefully fix some of the issues people have been having lately. I’m calling it a beta only because there are no new features (yet). The “real” v1.7 will come out in a few days I expect, with a few additions.
[edit: and if that doesn't fix the "header" issues, there's one more thing I'm going to try just as soon as I figure out how....]
well, I’ve just tried the 1.7 and I seem to have the same problem. As soon as you start typing stuff in the write post content box this appears in the publishing status box
Warning: Cannot modify header information - headers already sent by (output started at /home/user/public_html/wp-content/plugins/jspullquotes/jspullquotes.php:1) in /home/user/public_html/wp-includes/classes.php on line 788
and then when you hit submit, this appears:
Warning: Cannot modify header information - headers already sent by (output started at /home/user/public_html/wp-content/plugins/jspullquotes/jspullquotes.php:1) in /home/user/public_html/wp-content/plugins/ylsy_permalink_redirect.php on line 308
sorry!
I just uploaded 1.7 Beta 2. I think this fixes the header issue, as the plugin no longer makes any changes to any admin headers except on its own Settings page. (This is the way it really should have always worked; but it took some figuring, and since it wasn’t causing problems before….)
Hi Strider,
yeh header issue is completely resolved now. thanks for the great work!
There is a small issue changing the pullquote style from the options which causes a “Cannot load jspullquotes.php” error, but this isn’t a problem for me - I’m ok with the style thats setup.
thanks again.
Version 2.0 is out. Recommended if you’re on WP 2.5 or higher.
(v1.7 was a preemptive release to get the bugfix out as early as possible. 2.0 is that plus a Settings page redesign, a new option, a Settings link from the Manage Plugins page, and some other goodies….)
[...] WordPress Plugin: JavaScript Pull-QuotesA plugin that allows you to easily insert pull-quotes into your posts and pages. It uses client-side JavaScript. [...]
Looks great! I’m glad to finally be able to use such a great plug-in!
New version 2.1 is up.
No major new features, but it adds full WordPress 2.6 compatibility, plus more code polish, etc. Hopefully fixes that pesky “header” bug that’s been hitting some people.
New version 2.1.1 Please read the upgrade notes.
Awesome! Thank you Stephen.
Version 2.1.2 is up.
The biggest change from the user end is that localizations (i.e. translations) now work.
More info is available in this post.
Pages: « 1 … 4 5 6 [7] 8 » Show All