Adding Chapter Quotes to Your WordPress Posts
You know how some books have little quasi-relevant quotes at the start of each chapter? They are called chapter quotes and then can be a nice addition to some posts. Let’s see how we can do this easily in WordPress.
Of course, we could just toss the quote and relevant markup in the top of our post body. This would work, but is not the best method. The biggest problem is that the quote will appear on any page that includes an excerpt from our post. This means it will might there on the home page, the category page, the archive page, the tag pages, search results, and even in your RSS feeds! No matter how cool or appropriate the quote is, we would probably rather show off a bit of our text instead, no?
This sort of thing is exactly what custom fields are for. If you haven’t worked with custom fields before, don’t worry. They are simply labelled bits of text you can add to a post or page. We’re going to add two custom fields to our posts, one for the text of the quote and one for the source if there is one. In WordPress 2.9.1, it will something something like this:
Now that we have the quote in there, we need to use it, so we are going to modify the single.php file in your theme. By modifying just this file, the quotes will only be shown when people are looking at a specific post. The problem of the quotes appearing in feeds, and on archive pages, etc. just goes away.
In single.php, we need to find the line where it shows the title of the post and just after it, we’ll add this:
$quotetext = get_post_meta($post->ID, 'quotetext', true);
$quotesource = get_post_meta($post->ID, 'quotesource', true);
if (!empty($quotetext)) { ?>
<div class="startingquote">
<div class="startingquotetext"><?php echo $quotetext; ?></div>
<?php
if (!empty($quotesource)) { ?>
<div class="startingquotesource"><?php echo $quotesource; ?></div>
<?php } ?>
</div>
<?php }
?>
Let’s walk through that briefly, so it’s clear what’s going on. First we grab the values of our two custom fields and put them into $quotetext and $quotesource. Next, we check to see if there is any quote text. This lets us get away with having posts without quotes. The next bit is the start of our markup and then another if to see if we have a source for our quote.
As far as markup, we have an outside wrapper class (startingquote) and then specific classes for the text (startingquotetext) and one for the source (startingquotesource). This allows us to style each part of the quote separately as well as apply styles to the quote as a whole.
The resulting output should look like this:
All that is missing now is some styling.
width: 40%;
margin-left: 50%;
font-size: 80%;
color: #999999;
}
div.startingquotetext {
text-align: left;
font-style: italic;
}
div.startingquotesource {
text-align: right;
}
We make the whole quote a little less than half the width of our current block, and we move to the right side by setting a 50% left margin. It is tempting to float it to the right instead, but we’d risk text wrapping around the quote. We could add an extra clearing div, but that always seems a little gross to me and this way works fine. If you’d rather use a clearing div, knock yourself out. We also make the font a little smaller and make it gray. The quote text, we make italic and we make sure it is left justified. The source, if there is one, will be right justified and not italicized.
The result is not bad at all:
And we can now freely add quotes to the posts that warrant them and leave them off everywhere else without worry.
Leave a comment