Graceful Pull-Quotes

Screenshots

This plugin allows you to make pull-quotes ( http://en.wikipedia.org/wiki/Pull-quote ) in your posts without duplicating any content. Text you select will be duplicated as a pull-quote. This is done entirely via JavaScript and is designed to seamlessly vanish if the plugin is disabled later. Using JavaScript instead of PHP also ensures that duplicate content doesn’t show up in your feeds. It is named for the fact that it degrades gracefully in browsers that can’t handle the JavaScript, as well as not leaving behind visible cruft (such as shortcodes) if the plugin is later deactivated. This plugin was previously known as “JavaScript Pull-Quotes” Usage NOTE: If you would like to have a “Pull-quotes” button in the post editor, I highly recommend Frank Bueltge’s Add Quicktags plugin. I’ve included in my plugin (in the “extras” folder) a settings file that you can import into “Add Quicktags” (though it isn’t hard to do it manually). To make a pull-quote: Just wrap the text you want to put in a pull-quote like this: All you need to do is <span class="pullquote">wrap the quotable text in a span element and give it the class name “pullquote”</span>. The won’t affect how that text shows up, but it tells the JavaScript to duplicate it as a pull-quote. (optional) If you want a pull-quote that has text different than the text in the <span>, put it inside <!-- an HTML comment --> like so: <span class="pullquote"><!-- This sentence should be a pull-quote -->This sentence, without this middle clause, should be a pull-quote`</span>`. The content inside the HTML comment will only show up as the pull-quote — it will not appear at all in the main flow of text. (optional) To specify a side for a particular pull-quote, give the ` a secondary class of either pqLeft or pqRight (that’s case-sensitive!), like so: <span class="pullquote pqRight">This will appear on the right`</span> no matter what the Settings screen says.<h3>Bugs and Workarounds</h3> Note Regarding HTML Comments A little known “gotcha” with HTML quotes is that technically speaking you are not allowed to put a double-dash (“–“) inside a comment, except as part of the beginning and end markers. (A double-dash technically ends an HTML comment.) In some browsers I have seen this expose comment data as page text. This is part of the official HTML spec and not a “bug” per se in this plugin. BUG: WordPress does weird things if you try to put HTML tags inside an HTML comment. See https://core.trac.wordpress.org/ticket/8912 for more info. This may be fixed in WP 3.3. BUG: HTML entities (e.g. accented characters) inside HTML comments get messed up. I believe this is a WordPress bug related to the above bug. Workaround Regarding Buggy Browsers There is a bug in the JavaScript rendering of certain less common browsers (including very old versions of Safari) which causes it to misfire on the alternate text. Assuming that some of your readers may use these browsers, you have two options: A) Do the alternate text as described. Affected browsers will show the *actual* text in the span as though the alternate were not there. B) Put the comment alone in a pullquote span, just _before_ the sentence you're (sort of) quoting. Affected browsers will not show any pull-quote, but other browsers will work normally. Example: `<span class="pullquote"><!-- Darn that browser! --></span>`Darn that JavaScript-mangling browser!<h3>History</h3> I’ve been using WordPress for years now. In late 2006 I was reading through the excellent book “DOM Scripting”, by Jeremy Keith, which teaches how to use JavaScript to manipulate the structure of (X)HTML documents. As I read through, learning how to move, duplicate, and change parts of a web page with scripts, I came up with the concept that it could be used to make pull-quotes programmatically. The CSS required to do pull-quotes is easy, but I didn’t like the idea of having text duplicated in the HTML for what is ultimately a purely visual effect, so the idea of doing it with JavaScript appealed to me — it created the entire pull-quote from whole cloth and disappeared entirely if the JavaScript didn’t run for some reason. (That is, it “degrades gracefully” in less capable browsers.) Entirely by coincidence, blogger Jeff Harrell, right about that time, pointed me to a script written by Roger Johanssen http://www.456bereastreet.com/archive/200609/automatic_pullquotes_with_javascript_and_css/. We weren’t even discussing my idea at the time — it was simply a “hey, this is neat” post on Jeff’s blog. So I took a look. As it turns out, Roger basically had created exactly the script I had had in mind — right down to a limitation mine would have had because I (and he) didn’t know how to code around it. Before I even saw his script, a commenter on his blog had fixed that limitation, and a second commenter had gone and tucked it into a “wrapper” that made it into a WordPress plugin. No frills, no fuss — it simply applied the script to WordPress pages. (You can find that version here: http://www.viper007bond.com/wordpress-plugins/javascript-pullquotes/ ). Finally, I (Stephen Rider) picked it up and started adding features, including the options panel and all user changeable options, alternate text quotes, styles, localization compatibility, and pretty much everything beyond the simple script link. I’ve put a lot of hours into this plugin, and have learned a lot about JavaScript, PHP, and WordPress along the way. Enjoy! –Stephen Rider