Beast-Blog.com
Making a WordPress Pull Quote

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>
   </blockquote>
 <?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 ?>
      </div><!--entry-->
  </div><!--post-->
 <?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>
 </blockquote>

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.

Filed under Coding & Markup, WordPressing —

Bookmarking Links » del.icio.us | Digg | blogmarks | StumbleUpon | Technorati |

These posts may be related:

A Quickie on the Q Element »

Beast Blog Theme for WordPress »

Adding your own WordPress Smilies »