What is it?
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.
- 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
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.
- 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:
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):
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.
- 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 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.
- 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: