This is normal text.  It just sits here, looking exactly like all the text that surrounds it. And although the appearance of this page may change slightly as I tweak the stylesheet to get the formatting of our quotes “just right,” the overall look of the body copy won’t change significantly. That’s kinda the point: if you notice the style of the copy rather than the words, then someone got too fancy.

Occasionally, however, you need to make it clear that someone else said something that you think is important enough to talk about. The fact is that we’re all far too familiar with the rules, etiquette, and nuances of quoting shit, so here’s how it looks and works on this site. And just in case you missed it, the button what looks likeis what makes the quotes all blocky.

This is a block quote: As you can see, it basically matches the format to which we’ve all become accustom.  Other than a change in font and the double-indentation, it varies little from standard text.  I toyed with the idea of giving it a bit of a background and whatnot, but that seemed too distracting and broke from the overall style of the site.  In fact, I’m not even too keen on the citation below for this sort of quote.  Perhaps it should be reserved for pull quotes.  Regardless, the <blockquote> tag should be your “go to” format for lengthy excerpts from other sources.

Curiously, the way block quotes appear in the Visual Editor is quite different (and rather more off-putting) than its actual appearance.  I’ll have to look into that eventually. For the time being, however, you’ll just have to trust that things will look better in the morning—viz. once published.  You can always make generous use of thebutton, if you’re at all concerned.

So, block quotes are easy.  All of that was really just a means for me to test the styling of the quotes. Check this page from time to time over the next few days, and you’ll probably notice little changes to this and that. Now for some advanced quotation applications: pull quotes.

This is a pull quote.  In its simplest form, it is intended for the big, attention-grabbing or inspiration-initiating blurb. It does, however, completely break the text (which can be a good thing). And, just like the above, pull quotes don’t show up quite right in the Visual Tab of the editor. I’ve really got to work on that…

In the not-so-distant future, I’ll be adding buttons to the Visual Editor that will make all of this nearly automatic.  Until then, if you want to experiment with using pull quotes to break up a wall-of-text, you’re going to have to do some tinkering around with [insert dramatic music] the Text Tab.  So, let’s switch to that tab now:

The key bits of code that we’re worried about are outlined in green.  Basically, as far as WordPress is concerned, a pull quote is just a special class of block quote.  I’ll leave the  tutorial on HTML tags to your own ambition, but for our purposes all you need to know is that once you’ve created a block quote using the Visual Editor, you can turn it into a pull quote by modifying the opening tag.  As highlight in the image above: find the opening <blockquote> tag and insert the class reference so that

<blockquote>

becomes

<blockquote class="pull">

You’ll note that the citation in the example pull quote is highlighted in blue. Because of some crazy argument within the W3C, citations aren’t citations that are citations. And neither are <q>uotations.

Instead, we need to wrap the reference in a <footer> tag; but that <footer> tag must be nested inside the <blockquote>.  Confused yet?  Don’t worry: so are the people writing the HTML5 standards.

Here’s the last bit, because I’m getting tired and don’t know if any of this is actually making sense.  Since standard pull quotes are something of a visual roadblock, modern(-ish) design has taken to pulling quotes to either the right or left margin so that the text continues  uninterrupted.  And, given that pull quotes are technically intended to highlight something “pulled” from the text itself, it makes sense that they should appear near or alongside the main copy.

The process of creating a floating pull quote is no different from the above.  We just need to add another variable to our class:

<blockquote class="pull alignleft">

or

<blockquote class="pull alignleft">

Getting them formatted is the easy part. Locating them in the text is another matter altogether. I’ll leave that particular hump in the learning-curve to experimentation. Okay: let roll the Lorem Ipsum.

See, left- & right- pulled quotes are also possible, but they can be a bit tricky to incorporate in the text. Play around with them, but don’t hesitate to let me know if you want me to add/tweak them for you.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis auctor sapien, non scelerisque nulla vehicula eu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer vulputate, odio a gravida sodales, urna risus eleifend nisl, vel dapibus purus leo sed justo. Cras pretium non lacus semper sodales. Donec varius, dui nec congue aliquam, mauris ligula fermentum tortor, at placerat urna velit eget metus. Curabitur auctor, sem eget rutrum molestie, odio quam varius ante, ut consequat neque dolor vitae libero. Duis fermentum leo ut purus luctus dapibus. Ut vitae sodales augue. Pellentesque tempor diam nec dapibus dictum. In ullamcorper mauris quis lectus blandit, ac consequat orci congue. Aliquam gravida, libero ac feugiat auctor, libero orci vulputate justo, vitae sodales sapien quam at eros. Aliquam placerat magna ut lorem accumsan, non congue velit fringilla. Phasellus nec laoreet mi, id rutrum dui. Mauris tincidunt interdum turpis id tincidunt. Nunc nec augue augue.

Aliquam lacinia rhoncus nibh, et imperdiet ligula accumsan vel. Curabitur aliquam vitae arcu at cursus. Cras a nibh orci. Aliquam gravida magna in orci mattis hendrerit. Suspendisse interdum turpis sit amet arcu elementum, sed sagittis quam posuere. Nam magna nunc, vehicula sit amet velit non, aliquet eleifend mauris. Sed a nisl eu neque ullamcorper euismod. Integer ac libero congue, lacinia velit nec, hendrerit purus. Cras sit amet nulla consectetur, aliquam metus laoreet, vehicula nunc. Mauris condimentum interdum felis. Curabitur a facilisis sapien. Phasellus risus dolor, blandit volutpat orci in, ornare convallis lectus. Nullam luctus gravida ipsum, at egestas ipsum. Curabitur ac egestas eros, eu interdum nisl. Praesent adipiscing aliquet mi.

Aliquam commodo mattis adipiscing. Cras sit amet ultricies tellus. Phasellus vel ultricies est. Aliquam venenatis faucibus pellentesque. Nam iaculis neque diam.

They also look odd if they include a citation—especially when pulled right. Probably better to avoid.

Morbi eu pretium felis. Etiam porttitor id risus ac lobortis. Nullam tempor tortor justo, et convallis neque facilisis quis.

Integer mollis turpis eu urna sollicitudin hendrerit. Sed sapien nunc, cursus nec nisl vitae, suscipit malesuada sem. Mauris aliquet posuere erat, nec ullamcorper augue mattis et. Etiam imperdiet a libero vitae molestie. Maecenas sed sagittis lacus. In cursus, lorem non auctor luctus, libero nisl aliquam neque, id pharetra nulla purus in turpis. Aenean viverra placerat dolor eget condimentum. Nulla sed dui est. Maecenas at blandit neque. Aenean rhoncus sit amet odio at vulputate. Proin sed arcu lectus. Morbi augue magna, suscipit ac mauris id, ornare tincidunt ante. Suspendisse mattis tellus nec fringilla lacinia. Vivamus eleifend condimentum purus vitae mollis. Donec eleifend justo velit, vel eleifend massa pulvinar id.

Mauris dignissim, leo et semper dapibus, mauris ante ornare ipsum, ac tincidunt magna libero et sem. Morbi hendrerit eget enim non fringilla. Suspendisse turpis risus, convallis eu tristique ac, sollicitudin sagittis sem. Aenean magna augue, pretium vitae ante sit amet, blandit bibendum risus. Maecenas id rhoncus felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce imperdiet ipsum vitae fermentum scelerisque. Nulla dictum nec lectus ut dignissim.