Updated blockquote post snippet for WordPress

Earlier this year I wrote a post on using A List Apart’s official blockquote pattern markup as a reusable snippet with the Post Snippets plugin for WordPress. The original snippet code relied on values for four variables: {quote}, {author}, {source} and {sourceurl} to produce a blockquote which renders like this:

One of the most important aspects of a good IA is that it works well for the people who need to use it.

Donna Spencer, A Practical Guide to Information Architecture

Anders Gressli kindly improved the snippet so unnecessary markup is not included when a value for any variable is empty. For example, an empty anchor is not included in the markup if you do not specify a value for {sourceurl}. Here is Anders’ improved snippet:

echo '

<figure class="quote">';
	echo '

<blockquote>"{quote}"
</blockquote>
</figure>'; // the double quotation marks surrounding the quote text are aesthetic
if( "{author}"){
	echo "
	{author}";
	if( "{sourcetitle}" != ""){
		if( "{sourceurl}" != ""){
			$url_start = '<a href="'.">';
			$url_end = '</a>';
		}
	echo ", <cite>".$url_start."{sourcetitle}".$url_end."</cite>";
	}
	echo "

	";
}
echo '

';

To use this markup with the Post Snippets plugin:

  1. In your WordPress dashboard, go to Settings > Post Snippets.
  2. Select Add New Snippet.
  3. Give the new snippet a title, such as ‘Blockquote’.
  4. Enter the following in the Variables field: quote,author,sourcetitle,sourceurl
  5. Select the Shortcode and PHP code checkboxes.
  6. Copy all of the snippet code above and paste it in the snippet box.
  7. Select Update Snippets to save your changes.

Your settings in the WordPress dashboard should look like this:

Screenshot of post snippet settings

To use the snippet when writing a post, select the Insert a Post Snippet icon in the toolbar and enter your values in the pop-up:

Screenshot of pop-up to insert a blockquote

Test 1

Let’s try it out. Here is a quote containing values for all four variables:

[Blockquote v2 quote="One of the most important aspects of a good IA is that it works well for the people who need to use it." author="Donna Spencer" sourcetitle="A Practical Guide to Information Architecture" sourceurl="http://practical-ia.com/"]

…and the resulting markup:

<figure class="quote">
    <blockquote>One of the most important aspects of a good IA is that it works well for the people who need to use it.</blockquote>
    <figcaption>Donna Spencer, <cite><a href="http://practical-ia.com/">A Practical Guide to Information Architecture</a> </cite></figcaption>
</figure>

Test 2

Here is the same quote but no value for sourceurl is specified:

[Blockquote v2 quote="One of the most important aspects of a good IA is that it works well for the people who need to use it." author="Donna Spencer" sourcetitle="A Practical Guide to Information Architecture" sourceurl=""]

…and the resulting markup:

<figure class="quote">
	<blockquote>One of the most important aspects of a good IA is that it works well for the people who need to use it.</blockquote>
	<figcaption>Donna Spencer, <cite>A Practical Guide to Information Architecture</cite></figcaption>
</figure>

Test 3

Here is the quote without any values for sourceurl and sourcetitle:

[Blockquote v2 quote="One of the most important aspects of a good IA is that it works well for the people who need to use it." author="Donna Spencer" sourcetitle="" sourceurl=""]

…and the resulting markup:

<figure class="quote">
	<blockquote>One of the most important aspects of a good IA is that it works well for the people who need to use it.</blockquote>
	<figcaption>Donna Spencer</figcaption>
</figure>

Test 4

Here is the quote without any values for sourceurl, sourcetitle and author:

[Blockquote v2 quote="One of the most important aspects of a good IA is that it works well for the people who need to use it." author="" sourcetitle="" sourceurl=""]

…and the resulting markup:

<figure class="quote">
	<blockquote>One of the most important aspects of a good IA is that it works well for the people who need to use it.</blockquote>
</figure>