in Design & Dev & Tutorials

How to add pull quotes in your WordPress posts

Photo from Angus McDiarmid on Flickr

Photo from Angus McDiarmid on Flickr

Pull quotes have long been used by print publications to jazz up design and draw readers’ attention. Online, it seems that more magazine websites use them because their stories can be very long and lack visuals. Newspaper websites tend not to use them (let me know if you know of any examples; I couldn’t recall or find one). But if you’re using WordPress as a CMS, why not spice up your blog or story posts, especially if they’re lengthy?

There is a WordPress plugin that will add pull-quoting power for you, but with a few simple steps, you can be adding pull quotes where you want them with a custom look that matches your site. However, this will require some familiarity with CSS.

Designing your pull quotes

    1. Know what you want your pull quotes to look like. Remember that your pull quote design should make its content stand out from the rest of your post. Graphics, color, font size, font weight, font style, borders, alignment, padding and margins are all tools to do this. Here are lots of examples of pull quotes from Smashing Magazine and Elements of Design. In this example, I’m going to use most of the techniques above to create a pull quote that stands out from my text, like this one:
The great thing about pull quotes is that people actually read them.
    1. Find and prepare your stylesheet for editing. You can do this in WordPress’ theme editor (Go to Appearance then Editor, then find style.css). I prefer to work on copy of the stylesheet on my computer and then upload a changed version via an FTP client like Filezilla.
    2. Find the div class or id that contains your blog posts’ content. For my design here at WP Journo, I know that is going to be #content .post .body. I will make two classes under this hierarchy: one for left-aligned pull quotes and one for right-aligned. By placing these classes under #content .post .body I insure that if I use the pull quote class names outside of a blog post, like in my footer, I can apply different style properties.
    3. Style out your pull quotes. This example shows how I styled my left-aligned pull quotes:
      • Use the width property to set the horizontal space your pull quote uses inside your blog posts. I set mine to 200px because my blog content area is 600 pixels wide.
      • Change the padding to indent the text of the pull quote from its borders. In this case, the pull quote has only one border as defined by border-bottom: 5px solid #1b304c;
      • Add a background image or color using the background property. In this case, I used Photoshop to create a large quotation mark in one of the fonts I used in WP Journo’s design. Note that the left padding is so large (65px) so that my text doesn’t overlap my quotation mark background image.
      • Use the border property to add borders around the pull quote. Here I only wanted a border at the bottom, wanted the border to be five pixels tall and be WP Journo’s main color, a deep purple.
      • Use the float property to set whether text will wrap around the pull quote on the left or right. Since this is the .leftpullquote my float is set to left. That way the pull quote will be on the left side of the content area, and the text of my posts will wrap on its right. To make a right-aligned pull quote, change the class name to .rightpullquote and change the float to right.
      • My normal font size is 1em, so for my pull quotes I made the font-size property 1.2 em or 20 percent larger than my paragraph text.
      • Use the color property to define what color the font will be. Here I used the main color of my theme instead of my paragraph text’s standard nearly black color.
      • The font-weight property can be used to make the text bolder than my standard paragraph text. For my blog, I set the weight to the standard bold. Using the font-style property, you could also make your pull quote text italicized.
      • Finally, apply margins to your pull quote to keep your text a healthy distance away. White space=good, crowded pull quotes=disastrous. For my left-aligned pull quotes, the left margin is 0 so that the pull quote will be flush with the edge of the post area while the rest of the margins are 10 pixels (so really my pull quote is 210 pixels wide inside my 600 pixel text area).
#content .post .body .leftpullquote {
        width: 200px;
	padding: 5px 5px 10px 65px;
	background: url(/images/blockquote.png) no-repeat;
	border-bottom: 5px solid #1b304c;
	float: left;
	font-size: 1.2em;
	color: #262a31;
	font-weight: bold;
	margin: 10px 10px 10px 0;
}

Using your new pull quotes in posts

How to insert your pull quotes into WordPress' HTML editor

  1. Insert div classes in HTML. After you’ve uploaded or saved your new stylesheet in WordPress, it’s time to get them into action. Once you have a post that is fairly lengthly (like this one), find a few good sentences you would want to highlight. Then switch to the HTML editor, and enter in your pull-quote text between <div class="leftpullquote"> and </div>¬†where you would want it to appear. Remember to use your left and or right pull quote class depending on which side you want the quote to be.

That code will result in this pull quote; you just need to edit the text in-between the div tags to change what it says. Note that your pull quotes will not look like pull quotes in your WordPress WYSIWYG editor. They’ll just look like normal paragraphs.

You’re almost ready to make awesome pull quotes like this jazz up your WordPress-powered stories or posts.

It’s worth noting, as Chris Coyier did in his post about pull quotes, that using this method will cause your pull quotes to also appear in your RSS feeds as normal sentences, which means your pull-quoted sentences will appear twice. Chris demonstrates how to prevent this using jQuery.

Mike Cherim also demonstrates how to insert pull quotes into posts by placing code into your template files for your posts and pages, but I prefer the flexibility and ease of using div classes and the WordPress HTML post editor.

Whatever method, just make sure you don’t write a pull quote like the one the Scottish newspaper did in the photo by angus mcdiarmid on Flickr that I used above.

Comments (4)

  1. Pingback: 55 things media organizations can do with WordPress as CMS | WP Journo: WordPress CMS & Journalism

  2. Pingback: How to style the WordPress TinyMCE WYSIWYG visual editor | WP Journo: WordPress CMS & Journalism