Post Formats: Quote

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 &lt;blockquote> elements. */
		preg_match( '/&lt;blockquote.*?>/', $content, $matches );

		/* If no &lt;blockquote> elements were found, wrap the entire content in one. */
		if ( empty( $matches ) )
			$content = "&lt;blockquote>{$content}&lt;/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().