WordPress Plugin: Graceful Pull-Quotes

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 first thing you’ll notice is that there is not a button for it in the Post Editor screen. You’ll have to click the “Text” button at the top right of the editor to view the HTML version of your post. (When you’re done adding a pull-quote, you can click “Visual” again to get back to the regular editor.)

The plugin will look for any text that is inside an HTML span 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! 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 Settings 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 Appearance section.

In the aforementioned settings 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.

Personally, I use a separate plugin (AddQuickTag) to add a “Pull-quote” button to the post editor screen; otherwise you can type the Span tag manually.

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

  • This plugin can now be downloaded from the official WordPress Extend depository, so get it there: Graceful Pull-Quotes Plugin.
  • If you’re still using a version of WordPress earlier than v2.5 (which I don’t recommend) you can use this: jspullquotes.zip v. 1.7 (for WP versions lower than 2.5)

Is this download worth something to you? If you have found this site useful, please consider making a donation. Even as little as a dollar is appreciated:

[Donate]

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:

JS Pull-Quotes

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 title="Graceful Pull-Quotes" src="/wp-content/plugins/graceful-pull-quotes/extras/jspullquotes.png" alt="Graceful Pull-Quotes" width="80" height="15" /></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.php file — the following line must appear somewhere in thesection 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!

272 Responses to WordPress Plugin: Graceful Pull-Quotes

  1. hollowjack says:

    This is a great plugin, but if i have a “more” tag in the post on the homepage the pull-out quote doesn?t show up. But when I go to the post?s page (or remove the “more” tag), the pull-out quote is there. Is there a way to make it so the pull-out quote will show up after a ?more? tag on the home page?

    Thank you!

    • Stephen R says:

      If the span is above the “more” tag, the pull-quote should show up. If the span is below the “more” tag, that means it simply isn’t present on the front page, and there’s nothing for the script to find and copy.

      I suppose you could create the pull-quote inside an HTML comment above the “more” tag, but it would be there in both the cut version and the full post.

  2. Luca Monti says:

    Thank You fort this plug-in.
    My name is Luca, italian guy who live betwenn Paris and London and I’m working on italian traslantion, I’ll send you soon, at the same time I’m adding some rich typo new styles.
    Are you interested in this too ?

    • Stephen R says:

      Luca — Yes, translations are very welcome!

      Look for the file “jspullquotes.pot”. Make a copy of that, and go through there and put your translations for each string of text.

      Also… do you mean you’ve made some new pull-quote Styles? Send those along. If I don’t package them with the plugin itself, I may also add them to the web page for separate download.

  3. Penina says:

    I have installed your plugin, but the right/left function isn’t working in WordPress 3.1. The pull-quote function is working perfectly, but it positions the quote only to the left, and even with the positioning tags included, the quotes are still positioned to the left. Will you be updating the plugin for WordPress 3.1? I hope so, because it’s a great plugin.

  4. Penina says:

    I got it to work properly! I didn’t capitalize the R in the “pullquote pqRight” class. After I corrected that, it positioned the quote to the right. Thank-you for this awesome plugin!

  5. The Gal says:

    So far, I LOVE this plugin! Only one thing though… Is there a way to choose a different place in the vertical for the quote to sit? I’d really like to put some of my quotes higher up than where the sentence is.

    • Stephen R says:

      The pull-quote appears at the top of the HTML “parent” of the span. In most cases, that’s the paragraph the span is in. If you were to monkey with the HTML you could probably get something else to happen. (Be aware, however, that WordPress by default adds “p” tags and such automatically….)

  6. The Gal says:

    Hmmm… I fiddled with it some, but couldn’t get it to nest in the above paragraph. Any hints as to how I might accomplish that?

  7. Hi Stephen,
    Really like the Graceful Pull Quote plugin, much better than others for the fact I don?t have to duplicate my text.

    Hoping you or someone can help a not-so-geeky-gal. I am using the comic-sans style and have two questions.

    1. I am manually adding — for my quotes in my blog. Is this correct? [Not sure what she meant to put there — ed.]

    2. I would like to enlarge the text in the pulled quote and change the color but can’t seem to figure out how. I went into the CSS file and changed the default font size from 1.3 to 2.0 but nothing changed.

    Can you help?

    Thanks again and will spread the word about GPQ.

    Tara

    • Stephen R says:

      Hi Tara — To make changes to the CSS, I currently recommend adding the Pull-quote CSS to your site’s main CSS file, then go to the Pull-Quotes settings and turn on the “Do not link CSS” setting. The setting will prevent the plugin from loading its version of the styles, so whatever you put in the site’s styles can do its thing.

      To start out, copy/paste the content of the “comics” CSS file from the plugin folder into your site’s CSS file. Then make whatever changes you want from there.

      (In the future I plan to implement a better way of making custom pull-quote styles.)

  8. Michael says:

    I installed Graceful Pull-Quotes and it is working somewhat OK. In the settings menu I can’t change from blockquote to div. It continues to revert back to blockquote. As a result the styling looks the same as a blockquote. Could there be a conflict with the theme CSS or other plugins? Is there a way to change this? I’m using the current version of WP and the Genesis/Lifestyle theme. You can see the results at 6starworldtravel.com/about.

    Thanks,

    Michael

  9. Gary says:

    ISSUE: My quotes are being duplicated as in I have two quotes for the one pull on a page. Can you assist?

    Many thanks,

    Gary

    • Stephen R says:

      Gary — My first guess is you have an error in your Theme. Possibly it is including the WordPress header stuff (scripts, etc.) twice.

      Somehow or another, the one Pull-Quote script is being run twice.

  10. Hi!
    Thank you for a the great Pullquote plugin.
    Today I have a second quote right at the end of my text and it insists in moving up to the beginning of the story (where I already have the first pullquote, not nice). The ending quote moves up even if I erase the first one.
    I thought the pullquotes where anchored to the text area where they belong. May I convince my quote to stay at the end of the text? 🙂
    Best regards from Sweden

  11. Stephen R says:

    Erico — The pull-quote is placed at the top of the *parent* of the span. So if you have an HTML paragraph, and the span is inside that paragraph, the pull-quote will be placed at the beginning of the containing paragraph. (The paragraph is the parent of the span).

    So it sounds as though you have the span outside of any paragraphs, and thus the pull-quote is being placed at the top of the Post Div, or something like that.

    Make sure the span is inside a paragraph and that should fix your problem.

  12. erico says:

    Hi!

    All of a sudden I had to deactivate your great plugin! 🙁
    It was causing my browser to freeze (while charging the page, both Firefox and Chrome). I shut off all plugins (I have a bunch of them) and I discovered it was Graceful Quotes that was causing the crash. Even as standalone. I will of course try to find a way around this because I love your plugin. But this is a serious issue ad I wanted to let you know. At this moment, I use WP 3.3.1, An ordinary theme 2.5 and Firefox 11.0

  13. Pingback: WordPress Plugins and My Week in Review

  14. Novel Web Creation says:

    Thank you for a the great Pullquote plugin.
    Today I have a second quote right at the end of my text and it insists in moving up to the beginning of the story (where I already have the first pullquote, not nice). The ending quote moves up even if I erase the first one.

    • Stephen R says:

      Make sure your span is inside a paragraph. The pull-quote appears at the beginning of whatever element is the parent of the span itself — so if it’s in a paragraph, the pull-quote is at the top of the paragraph. In you case it sounds as though the immediate parent of the span is the div containing the whole story, so the pull-quote shows up at the beginning of the story.

  15. Pingback: WordPress Plugin: Graceful Pull-Quotes – Nerdaphernalia | WordPress Stuff | Scoop.it

  16. Pingback: How to feature pull-quotes in WordPress | Jack Dougherty

  17. I?ve been very happy with this plugin so far on my blog site. The theme I use there is the standard WordPress Twenty Eleven theme. But now I?m trying to use the plugin on my commercial site and there is a problem. I am using the Woo theme ?Definition?, I don?t know if it is affecting things but I thought I?d mention it. What happens is that when I go through the same procedure to apply a pull quote on this new site, it appears but in the upper left corner of the quote is a large quotation mark. I?ve tried various things, uninstalled and reinstalled the plugin but the quotation mark stays the same. Do you have any idea what?s not working with this? I really like the effect the pull quote gives but it?s not working on this new site. Thanks for your help, Mark

    • Stephen R says:

      My guess is that the CSS of the theme itself adds a quotation mark to all block quotes. Either: 1) Try setting the plugin to use div instead of blockquote, or 2) if you know CSS you could edit the pull-quote CSS to not add the quote mark.

  18. Great article! I?ve been using this for more than a year. A really great plug-in, the best pull-quote plugin-in I?ve found.

  19. First off, great plug-in!

    Second, for some reason a huge quotation mark sits to the left of a pull-quote, covering up text, and I can’t get rid of it. It’s on the homepage of bkzc.org. Any ideas on how to get rid of this?

    Thank you!

  20. Same here, it freezes my pages. I’m on the latest version of WP using the Admired theme.

Leave a Reply

Your email address will not be published.