Creating a pull quote in WordPress without adding plugins or changing WordPress install
By Jaems • Sep 20th, 2009 • Category: Tutorials"A pull quote is the kind of quoted passage that you can see in the box to the right, otherwise known as "here""
A pull quote is the kind of quoted passage that you can see in the box to the right, otherwise known as “here”. Pull quotes are useful for the purposes of creative formatting, generating interest, and promoting clarity and focus within your blog. There are a few WordPress plugins that claim to do this for you, but I’m always interested in keeping the number of plugins to an absolute minimum, both because it’s difficult to stay ahead of updates and compatibility, and because they can slow page loading times and add confusion and density to your posts. So here is a method to enable simple and customizable pull quotes to your WordPress theme without the need for plugins or for editing your WordPress install. It’s a good idea to keep all edits to the theme alone, since future updates can overwrite edits that you make to the original WordPress install. This is a step-by-step guide.
What you’ll need:
- WordPress blog
- A Theme that you can edit
- Basic knowledge of the location of your theme’s files
- About 15 minutes
The following guide will add pull quote capability to individual posts (shown when user clicks the post’s title from any page).
Step 1. Go to your WordPress Dashboard. Find “Appearance”. Select “Editor”. Go to “Single Post” (also called single.php).
Step 2. Find between:
<div class="entry">
and
<?php the_content...
(dots indicate more content specific to your theme)
Step 3. Paste following:
<?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 } ?>
Update Single.php
Step 4. Navigate to Stylesheet (style.css) and paste the following anywhere (but preferably on the bottom):
.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;
}
Update Style.css
Step 5. Create a new post. navigate to “Custom Fields”. Select “Enter new”. Type in:
pullquote
Step 6. In the “Value” box, type in your desired quote. Click “Add custom field” (see below) Update or publish your post.
Note: for future posts, all you need to do is choose “pullquote” from the Custom Fields pulldown menu, enter your quote into the value field, and click “Update”.
Note: Portions of this post and its code were heavily borrowed from, and inspired by, green-beast.com

