Earlier this year I wrote a post on using A List Apart’s official blockquote pattern 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 that 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 omitted when a value for any variable is empty. For example, an empty anchor is not included in the markup if you don’t specify a value for {sourceurl}. Here is Anders’ improved snippet:

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

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 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:

    Post snippet settings

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

    Insert a blockquote pop-up

Test 1

Let’s try it out. This 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 with no value for sourceurl:

[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’s the quote without 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

This 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>
comments powered by Disqus