How to Implement Pullquotes in WordPress

Posted on

Have you ever looked at articles in big publications like the New York Times and seen little “quotes” on the side at various points in the post? They can alternate from layout to layout, but the basic idea is the same – they highlight memorable pieces of the article that are designed to “stick” in one’s mind. They are the takeaways. These little snippets give readers an overview of the gist of the webpage if they’re just skimming through. And they can entice them to read more. They are called “pullquotes” and they can really impart a professional feel to your webpage. Here’s how to easily implement pullquotes in WordPress using nothing but CSS and a bit of HTML management while writing a post.

Styling the Pullquotes

There’s no single way to design your pullquotes. Every website and layout is different and you should choose a style that blends in or complements your overall theme. Of course, perceptions vary quite a bit. I remember showing a sample pullquote style to my wife only to have her react in horror and tell me to use something else! So make sure you get a second opinion before you finalize the style of your snippets :)

There are quite a few pre built styles on the web. If you’re using Google Chrome, simply find one you like on the web and hit Ctrl+Shift+c to bring up the developer console, hover over the element you want to replicate and grab the CSS styles from the right hand side. You can even change it to see what it looks like in real time. Fine tune the font size, width, and background colors to make it unique to your webpage.

Quotation Marks

One little flourish you may want to add is a pair of oversize quotation marks surrounding your pullquote. This adds yet another visual indicator to it and alerts the reader that it’s something special – maybe an actual quote, or a witty saying of your own creation. Here’s a basic example of a style used to draw oversized quotation marks in your quote:

blockquote.pullquote:before {
display: block;
content: "\201C";
font-size: 80px;
position: absolute;
left: 0px;
top: -10px;
color: #7a7a7a;

Making them Tweetable

You can take it one step further and make your quotes sharable directly. Since a pullquote is by definition a short and memorable takeaway from your article, this is an excellent opportunity to spread the word. One popular plugin that does this in WordPress is RealTidbits PushQuote if you’re willing to sacrifice some flexibility. Unfortunately it doesn’t support Google+ yet so you might want to implement a custom function of your own.

Inserting Pullquotes Easily

Once you’ve finalized the CSS for the pullquote, insert it into the place where you store your custom CSS changes. If you haven’t already, now is a good time to insulate your custom code from future WordPress and theme updates. Place it in a block that defines a special class for the “blockquote” element like this:

blockquote .pullquote {
// Custom CSS pullquote styles here

Since WordPress has easy access to the blockquote element, all you have to do is write your snippet, select it, and hit the quotation marks in the visual editor. This will apply the default blockquote style. Next, navigate to the “HTML” section, locate the <blockquote></blockquote> tags, and change the first element to <blockquote class=”pullquote”> instead. Now preview your article, and it should apply the pullquote styles you finalized earlier.

Pullquotes are a nice way to unobtrusively add some impact to your website and to easily allow people to share the highlights of your article. It’s easy to simply tweak a CSS style you like, and just seamlessly integrate it into your article without missing a beat!

One Reply to “How to Implement Pullquotes in WordPress”!

Leave a Reply

Your email address will not be published. Required fields are marked *