The quote post format is generally pretty easy for theme developers to handle, at least one would think so. Quotes are one of my favorite post formats, so I want to make sure theme authors are getting it right.
The purpose of this tutorial is to provide theme authors a method for dealing with the inconsistencies in how users input their quote content.
Current methods
The most-common methods I’ve seen for handling quotes assume one of two things:
- The user has marked up their quote content with a
<blockquote>. - The user hasn’t marked up their quote content with a
<blockquote>.
Assuming just one or the other of those uses will fall apart in the real world. My proposed solution is to account for both possibilities.
The quote post format
The WordPress Codex defines the quote post format as the following:
A quotation. Probably will contain a blockquote holding the quote content. Alternatively, the quote may be just the content, with the source/author being the title.
As you can see, even the WordPress documentation notes this inconsistency in how quote content may be written by the user.
The code
The easiest way to deal with the quote post format is to make sure the content always has a <blockquote> element. If the user has added it, do nothing. If the user didn’t add it, the theme should.
Adding the following PHP code to your theme’s functions.php file will handle this functionality.
add_filter( 'the_content', 'my_quote_content' );
function my_quote_content( $content ) {
/* Check if we're displaying a 'quote' post. */
if ( has_post_format( 'quote' ) ) {
/* Match any <blockquote> elements. */
preg_match( '/<blockquote.*?>/', $content, $matches );
/* If no <blockquote> elements were found, wrap the entire content in one. */
if ( empty( $matches ) )
$content = "<blockquote>{$content}</blockquote>";
}
return $content;
}
I’ve been using this method in my themes for quite a while now. It seems to be working out great because I’ve had no complaints from users. My guess is that they don’t even know what’s going on behind the scenes.
Styling quotes
This is what this post is really all about. Theme developers need a way to consistently style quote posts. Using the above method should simplify styling for you because you know for a fact the <blockquote> element is used.
You can use the following CSS to modify the posts.
/* Style the quote post wrapper. */
.format-quote {}
/* Style blockquotes within the quote post. */
.format-quote blockquote {}
/* Don't forget cite in case a user makes use of it. */
.format-quote cite {}
The excerpt v.s. the content
Don’t use the_excerpt() when displaying quotes for the following reasons.
- Quotes should be short enough that an excerpt isn’t necessary.
- Users aren’t likely to write a custom excerpt for these posts.
So, when you’re displaying quotes in your theme, stick to calling the_content().
This is a timely series. I’ve been doing some work on integrating post formats into my own theme. The quote format is a pretty easy one, as you stated. Though I’ve been using a slightly different approach, by using the Port Formats UI plugin by Alex King. It simplifies things a bit by defining fields particular to the chosen format.
I’ve also chosen to wrap the blockquote in a figure, and use the figcaption to display the attribution information. From what I can tell that is an appropriate use of the figure/figcaption combination, also since blockquote doesn’t have a paired element for attributions.
I really like the plugin, but I’d like it better if it or something similar was integrated into core. I don’t think it’s an ideal solution outside of core right now (except in custom projects). I have a post planned with my thoughts on this too (not directly about the plugin but about the concepts).
As far as using figure/figcaption goes, I hadn’t given that much thought. I’d have to read more up on the specs.
Granted the plugin dependency is not ideal, and even less so for themes that may be distributed. But in this case, the theme is for my own use, and I don’t have _too_ much of an issue with the setup. I am surprised that this sort of functionality isn’t in core already.
Filtering the content to wrap it in a blockquote tag is a very nice approach!
I was trying to do it all strictly with CSS … mostly due to a commonly installed (truly annoying) plugin’s “share” functionality.
I’m going to look at this closer in my current project, might help with some of underlying style specificity issues I was running into.
I hadn’t though of those annoying plugins. It might be a better idea to move the priority on my filter up a bit to make sure we’re wrapping the content before those plugins come along.
Well this will make life alot easier
Some things in here I have not thought about before. I am happy to find this post very useful for me, as it contains lot of information.
I like this plugin, is perfect to me!
Thanks Justin that he did a great job
thanks for the code here. anyway to add the source/author (in link form) at the end of the quote?