Making a WordPress Pull Quote

Posted May 17th, 2007 by Mike Cherim

A pull quote is a selected blockquoted passage from the post it accompanies used to reveal or emphasize a portion of the post.

On most of my posts you’ll typically see some sort of decorative image. I do this to jazz things up a bit and give my posts a sprinkling of good old fashioned artistic love. I think it compliments the posts. I started thinking, though, that a pull quote would also be cool. I’m sure you’ve seen them elsewhere. Now you can learn a decent way to make them a built-in WordPress feature. This may be especially useful to theme makers, but anyone can do this.

First, what’s a pull quote?

A pull quote is a selected quoted passage from the post it accompanies used to reveal or emphasize a portion of the post. It should typically be representative of the post’s general content. Typically a pull quote — also referred to as a “lift quote” sometimes — will be posted as larger styled text inset or floated within the main content. Here I will instruct you how to make (or make provision for) pull quotes quickly and easily using the blockquote element and cite attribute. Without having to code them more than once.

The files

When enabling this feature in WordPress, you will need to edit some files. Which ones, precisely, will depend on the theme you use, whether you use excerpts or full posts, and if you want them to show in excerpts, if used, on front pages (index.php, search.php, archives.php). If you only want them to exist on the full post page only (single.php) then you only have to edit it and the style sheet. Otherwise, if using it in all places, like I have on this blog, you’ll need to edit the full list:

  • single.php (Single Post Template)
  • index.php (Main Index Template)
  • archives.php (Archives Template)
  • search.php (Search Results Template)
  • style.css (Main Style Sheet)

You may need to edit other files that serve as post templates, but the files above would be typical if creating a full set with most themes.

The code

In the files above, you will want to add the following code:

 <?php if(get_post_meta($post->ID, pullquote, true) != "") { ?>
   <blockquote cite="<?php echo get_permalink() ?>" class="ex-pullquote">
     <p><?php echo get_post_meta($post->ID, pullquote, true); ?></p>
 <?php } ?>

Please note, that the blockquote class="ex-pullquote" above is used on the excerpt pages on this theme. Since the content of my single pages is wider, I have two classes. On my wider single pages, I use class="pullquote" which renders a little wider. This may not apply to you, but I figured I should mention it.

Where it goes

Now that you have the code, it’s important that you place it in the files properly. But it’s not hard. I will use the index.php page as an example, but it really doesn’t matter. Just stick it in “The Loop” and use the right style class if and where applicable.

 <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  <div class="post">
   <h2 id="post-<?php the_ID(); ?>">
    <a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
     <p><small>Posted <?php the_time('F jS, Y'); ?> by <?php the_author(); ?></small></p>
      <div class="entry">
         The code above goes here, before the content or excerpt function.
         This Loop setup is typical, but yours may vary slightly.
         Do note that some elements/attributes were removed for clarity.
       <?php the_excerpt(); // If excerpt page, the_content() will be used ?>
 <?php endwhile; ?>
 <?php else : ?>
   <p>Sorry, there are no posts.</p>
 <?php endif; ?>

Styling it

To style the pull quote, I style the two classes as follows:

 .ex-pullquote, .pullquote {
   float : right;
   width : 210px;
   border : 0;
   color : #99cc66;
   font-family : georgia, palatino, 'times new roman', serif;
   font-size : 110%;
   font-weight : bold;
   font-style : italic;
   margin : -5px 0 15px 10px;

 .pullquote {
   width : 250px;
   margin : -25px 0 20px 15px;

A lot of the styles for my blockquotes are inherited from what’s already in my screen media style sheet. The especially important changes I made were the float and the width, but you can see what else I added. The .pullquote class’s width and margin is redefined in the second block. Adjust these styles as needed for your blog.

Putting it to use

Okay, now let’s make one. Let’s pull a quote!

  1. In the WordPress admin create a new Post or edit an existing one.
  2. Scroll down to the “Custom Fields” section.
  3. If doing this for the first time, write the word “pullquote” in the Key input. You must use the word as written.
  4. Then, in the small textarea to the right of that input, enter your desired pull quote from said post.
  5. Click the “Add Custom Field” button.
  6. Publish or Save your Post.

If it’s not your first time, instead of writing in the word “pullquote” in the Key input, simply use the pull-down (select) to the left of that input. The word will appear in that menu once you’ve entered it in the database making this small task even easier.

If no pull quote is specified, it simply will not appear. No errors, no problems. Do note, though, if you float an image at the top of a post like I do in mosts of my posts, don’t use this pull quote feature in that post as there may be a rendering conflict.

Accessibility note

To show users not capable of visualizing the pull quote, I placed the cite attribute in the blockquote and it points to the post as its source. I do not use the cite element as I decided it’d be best not to. I didn’t want to fix the author since there are those who want no author name shown, plus there may be other considerations. I thought the cite attribute would be best in this case. Since the quote is pulled from the post it should be obvious.

Because a pull quote can be used to emphasize, it may be beneficial to add one of the emphasis elements — strong or em — with the p tags, but I didn’t do this in my example.

Usability note

To ensure a logical usability to all users, such as those with screen readers, be sure to try and pull a quote that’ll not be too out of place when taken out of context and placed ahead of the content. This can often be a problem with floated images that use alt text (read more about this), and it could be a problem with pull quotes as well so be sure to read it aloud in the right order to make sure it sounds okay. Do understand, though, that those users will know it’s a blockquote, and since it won’t have the cite element and the cite attribute will link the blockquote to the post itself, it should be clear to them what it is they’re encountering.

Adding more than one

If you want to add more than a single pull quote — as I see on Roger Johansson’s blog a lot (example post) — you won’t be able to use this automated method on the subsequent occurrences. Instead you’ll just place the markup within your posts as needed, using one of the classes and basic blockquote mark-up (see below), with or without a citation as needed. If you’re quoting yourself as is proper with a pull quote, it’s probably best to forgo the cite element.

 <blockquote cite="Post-URL-Goes-Here" class="pullquote">
   <p>This is the pull quote content!</p>

That’s it. Enjoy!

Note: I have implemented this in my BeastBlog v.2 theme as a permanent feature for the convenience of theme users.

8 Responses to: “Making a WordPress Pull Quote”

  1. David Zemens responds:
    Posted: May 17th, 2007 at 5:57 pm

    Another absolutely terrific WordPress tip, Mike. I already have it working at my new website. Thanks again for the great advice and for taking the time to teach us what you learn.

  2. Jermayn Parker responds:
    Posted: May 18th, 2007 at 12:42 am

    Yeah thanks for that fascinating tip Mike.

  3. Screaming at Clients at reflections responds:
    Posted: May 18th, 2007 at 9:54 pm

    […] [Thanks to Zep, The Paper Bull, Charity, Mike, Aaron, Tara, Lisa and Ludovic for your comments on recent posts] […]

  4. WordPress Page Titles for Search Engines » 1955 ยป Accessible Website Design responds:
    Posted: May 20th, 2007 at 6:48 am

    […] By applying a nice bit of coding and sharing it with the world, Mike Cherim gave me the idea about how to solve this problem. I adapted the code he uses to display WordPress pull quotes, and now use it to afford the WordPress user the option to add their own, more descriptive page title rather than relying on the_title() alone. By using Mike’s technique, the user is not required to to add a more descriptive page title, and if they don’t, the code defaults to using the_title() as normal. However, it does afford the user the option to be more descriptive in their page titles. Not only is this a neat feature that allows for more descriptive titles, but it also allows for keyword insertion into these page titles - something that can only increase page rankings in the search engines. After all, what’s more SEO friendly: “Home” or “Welcome to LifePlan Financial”? […]

  5. Martin responds:
    Posted: June 28th, 2007 at 10:08 pm

    Thank you for a great tip… Just tried it out and it works beautifully..
    Thanks again.

  6. Ozonew4mWebmaster responds:
    Posted: July 17th, 2007 at 11:12 am

    Hi.. cool blog.. I was wondering if you would consider allowing me to add your blog feed to my news section on my webmaster website . I realise that not all of your posts are strictly webmaster related but ive written a script to only show posts containing certain keywords so theres no need to worry. Anyway, like i said.. cool blog.. some interesting stuff.. thanks

Sorry. Comments are closed.

Note: This is the end of the usable page. The image(s) below are preloaded for performance only.