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

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

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 src="/wp-content/plugins/graceful-pull-quotes/extras/jspullquotes.png" alt="Graceful Pull-Quotes" title="Graceful 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.php file — 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!

262 Responses to WordPress Plugin: Graceful Pull-Quotes

  1. Stephen R says:

    To those experiencing crashes — I have no idea what could be causing this. Perhaps some weird conflict with a particular theme?

    I’ll keep an eye out for possible causes, but the JavaScript is pretty straightforward and I can’t imagine how it would cause your whole browser to freeze.

    One thing to test: Does it happen if you use no other plugins, and the default WordPress theme?

  2. Kas says:

    Hi,

    I really love your plugin.

    I am not a technical person and wanted to know how can i show the quotes in colour.

    would be obliged for your help.

    Thanks

    Kas

  3. Animesh says:

    Irrespective of what I do, pullquotes always show on the right side. Don’t know why :(

  4. MEP Project says:

    If I deactivate the plugin, its still works. If I activate it, I get duplicate pullquotes.

    • Stephen R says:

      Hi. The plugin used to be called “Javascript Pull-Quotes”, then was changed to “Graceful Pull-Quotes”. Along with the name change, the directory and file name also changed. It’s possible you have both versions running simultaneously. That’s the first thing I would check.

    • MEP Project says:

      No I only have Graceful Pull-Quotes Version 2.4.2. Removing and reinstalling did not resolve the issue. Right now the plugin is not activated, but works. If i activate it, I still get double pull quotes.

      [comment manually added by admin. original eaten by software.]

    • Stephen R says:

      Hi — I took a look at the source of your site. The “Magazine” theme you’re using has a CSS rule for the “pullquote” class, so the theme’s Stylesheet is directly formatting your spans with the “pullquote” class. (You’ll notice that the text in the span does not appear directly in the normal flow of text as it’s supposed to; it’s only appearing as the large pull-quote.)

    • Stephen R says:

      Follow-up note: You can go into preferences (under Appearance > Pull-Quotes) and change the CSS selector used by the plugin. Changing it to something other than “pullquote” should fix your problem.

      You would have to update any existing pull-quotes (of which I assume there are not many, since you’re having the problem), and you would have to manually change the CSS. I recommend putting the CSS in a jspullquotes.css file in your theme folder so it doesn’t try to use the stylesheets included with the plugin. See the Readme for more info on how to use custom CSS; there are multiple ways to do it.

  5. Lisa Cole says:

    Hi – it’s a beautiful plugin but it’s leaving the original text in place as well as pulling it out. Have I missed something?

    • Stephen R says:

      That’s what it’s supposed to do. A pull-quote pulls a quote from the body of the text. You can however use the HTML comment trick for alternate text if you want a stand-alone pull quote unconnected to the article text.

  6. I’ve seen sites that use pull quotes to bring attention to the most important parts of their content. Many top publishers are doing that.

  7. Anthony says:

    I’m attempting to implement this on a WordPress 3.8.1 installation by applying it to a sidebar via the text widget, however the quote is being duplicated. Is there a workaround for this?

  8. Will says:

    I can’t get pull quotes to work at all. I suspect the theme is overiding it. Do I need to do anything special other I have the sixteen-nine theme. Any help is appreciated.

    • Stephen R says:

      Will — First thing to test is to temporarily switch to the default theme. If pull-quotes do work on the default theme then you will have confirmed that it’s your theme causing the problem. If pull-quotes DON’T work on the default theme, then the problem is somewhere else.

  9. Milton Dixon says:

    Just a heads up for users: Using the plugin with W3 Total Cache, the JS minify setting “Non-blocking using JS” prevents the plugin from working. Using the other non-blocking settings is fine though.

  10. Hi, pull-quote is not appearing in my editor so while I’m writting ther is no way I can use it. There is no button for it on my screen. thank you

    • Stephen R says:

      Mayalen — The best way is to add the span using the HTML view in the editor. You’re right — there’s no button for it in the rich-text editor.

  11. Jan Bletz says:

    I have tried and tried to position quotes vertically. How do I do this?

    You say: “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….)”

    I’m afraid I don’t understand this. Could you give an example of the code I shoud use?

    What is an ‘HTML “parent” of the span’?

    Should I use and for example? Why should I be aware?!

    Sorry for my ignorance!

    Jan

  12. Jan Bletz says:

    P.S. The quote keeps ending up above the more-code in this page for example:

    Pakweg zeven jaar geleden werd hij gegrepen door de zon en bedacht hij het concept voor zijn latere onderneming OpdeZon. Sindsdien groeit het Amsterdamse bedrijf gestaag door en installeert het – o.a. in de hoofdstad – steeds meer hoogwaardige panelen. Een interview met oprichter/directeur Paul Dalebout.Hij zit boven. En laat dat nou ook de naam van zijn bedrijf zijn dat hij samen met vijf collega’s runt in een van de bedrijfsverzamelgebouwen op officepark Sloterdijk. Op deze locatie is OpdeZon (http://www.opdezon.nl) sinds 2012 gevestigd. Paul Dalebout komt over als een gedreven en tegelijkertijd uiterst kiene en nuchtere ondernemer in de solaire sector. Hij haalt zich geen overdreven dromen in zijn hoofd. Dalebout beseft dat de zonnesector nog niet volledig tot wasdom is gekomen en dat er dus nog veel werk aan de winkel is. Maar toch nam hij als consultant voor de fossiele sector – waaronder onder meer voor concerns als Nuon, Essent en Oxxio – medio 2011 rigoureus de beslissing: over te stappen naar het opzetten van een eigen solair bedrijf. Dalebout: “Ik vond de omgeving van die grote energieconcerns te stoffig en wilde een nieuwe uitdaging. In deze sector zit meer dynamiek.” Hij erkent: “Het opzetten en runnen van een bedrijf in de leverantie van zonnepanelen verkeert nog steeds half in de pioniersfase.” OpdeZon betrekt zijn panelen via de groothandel vooral uit China en Zuid-Korea Daarbij gaat het inmiddels om vijf verschillende types panelen, waarbij die van LG uit Korea de crème de la crème vormen. Deze panelen leveren maximaal 300 Wp per paneel.Nieuwe panelen OpdeZon groeit, dat is zeker. Inmiddels heeft Dalebout vijf collega’s in dienst, waarvan drie op kantoor en twee in het veld. Het aantal geïnstalleerde panelen groeit ondertussen gestaag door. In het voorjaar waren het er tweeduizend, maar Dalebout gaat eind dit jaar uit van drie keer zoveel.Waar mogen we die nieuwe panelen dan vooral verwachten? “Als het gaat om Amsterdam, dan vooral op daken buiten de ring. Daar zijn de meest geschikte daken te vinden voor de installatie van nieuwe panelen. hoewel we in de binnenstad ook wel diverse locaties hebben bij particulieren die specifieke zonnepanelen willen, of op braakliggende terreinen waar zonnepanelen tegen een relatief laag tarief geïnstalleerd kunnen worden.” Maar de ‘bulk’ ligt volgens Dalebout wat betreft Amsterdam toch buiten de ring: op nieuwbouw, waar geïntegreerde installatie van zonnepanelen mogelijk is, of op ‘oude’ kantoorgebouwen. “ Maar hij benadrukt: de zon kan het niet alleen: daarbij zal ook de ‘hulp’ ingeroepen moeten worden van windenergie en aardwarmte. Het is een mix van deze duurzame energievormen die op den duur kan zorgen voor een energieneutrale stad.”Overdreven regelzuchtDalebout is in de eerste plaats ondernemer en moet daarbij uiteraard letten op zijn omzet en rentabiliteit. Maar dat betekent niet dat hij niet ook met een schuin oog naar de nieuwste ontwikkelen op zonnepanelengebied kijkt. En grappig genoeg komen die behoorlijk in de buurt, zoals uit de regio Eindhoven en Utrecht waar panelen worden ontwikkeld die ook onder de Hollandse weersomstandigheden – met een uitgekiende lichtinval – het juiste rendement kunnen opleveren. Dalebout: “Ja, daar kijken we naar. Maar op dit moment zijn die panelen gewoonweg nog te duur. Toch verwacht ik dat dit over een jaar of tien anders zal zijn En dan hoop ik zeker in de praktijk gebruik te maken van deze nieuwe technologieën.”Waar de OpdeZon-directeur meer van wakker ligt is volgens hem de overdreven regelzucht van de Nederlandse overheid. In 2012-2013 gold nog de Landelijke ‘Subsidieregeling Zonnepanelen’(MEI). Het was een gewilde subsidieregeling die vervolgens na gebleken succes haastjerepje werd afgeschaft. Momenteel zijn er weer diverse lokale regelingen en is er de nieuwe, landelijke, postcoderoos. Dalebout kan er niet warm van worden: “Ik zou zeggen: laat de markt zijn werk doen. Een beetje slimme particulier weet heus wel dat hij de investering in zijn panelen na zeven à acht jaar heeft terugverdiend. Een investering in de zon, is een investering op de langere termijn. Vraagt even geduld. maar dan heb je ook wat.”

  13. Jan Bletz says:

    I finally understand how to do it – use the code (not the code I am used to).

    Sorry – like most things, once you understand it, you find it hard to understand why you didn’t understand it ;-)

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>