Reusable blockquote markup in WordPress using post snippets

9 February 2013: The instructions in this post to implement the blockquote markup using the Post Snippets plugin for WordPress are accurate. However, the markup itself has been updated since I wrote this post. See the updated blockquote post snippet for the improved markup.

Two posts I found useful this week are:

I was looking for sample blockquote markup with scope for including author names, citations and source URLs in a way that visually makes sense to readers – yet is semantically correct in HTML5. This is something I often have to look up when inserting a blockquote.

Tim Murtaugh, working on the HTML5 templates for A List Apart, shared his thinking on marking up blockquotes and posted the code on GitHub.

I’ve copied Tim’s markup for a single line blockquote with attribution and optional cite below, and added an optional URL to the cite text, as this is what I’ll use to create a snippet in WordPress:

<figure class="quote">

<blockquote>The quote text goes here.</blockquote>

<figcaption>Author name, <cite><a href="#">Cite the source title with optional URL</a></cite></figcaption>

</figure>

When rendered (in the Pinboard theme currently active on this site), the blockquote looks like this:

The quote text goes here.

Author name, Cite the source title with optional URL

In Tim’s markup, <figure> has the class quote, which you can use as a hook to style the  <figure> container. I used the following css to style the quote, indent the attribution and insert an em dash before the author name, purely for aesthetic purposes:

.quote figcaption {
font-size: .85em;
margin-left: 60px;
}

.quote figcaption:before {
content: "\2014 \2009";
}

Now I know the correct markup, I’ll reuse it.

Save blockquote markup using Post Snippets plugin

I could save the markup in a text file and cut and paste it into a draft WordPress post. This is messy though. Inevitably, I’ll have to swap between the visual and text editors to get it right, and that’s a faff.

I installed the Post Snippets plugin, which I found via Anna Ladoshkina’s great post on how to improve your writing in WordPress.

You can use the plugin to save snippets of text, HTML or other code for reuse, which you access via the toolbar in WordPress’ visual editor.

Here are the steps to make a reusable blockquote snippet.

Download and install the Post Snippets plugin, then activate it.

In your WordPress dashboard, go to Settings > Post Snippets.

Choose Add New Snippet.

Screenshot: Add new post snippet fields

In the Title field, type Blockquote.

In the Variables field enter:

quote,author,sourcetitle,sourceurl

In the Snippet field enter the following <blockquote> markup, noting the variables’ location:

<figure class="quote">

<blockquote>{quote}</blockquote>

<figcaption>{author}, <cite><a href="{sourceurl}">{sourcetitle}</a></cite></figcaption>

</figure>

In the Description field, enter a suitable description for your snippet. This will help you find it again in the visual editor. I used “Single line blockquote with attribution and cite including source URL”.

Leave everything else unticked and click the Update Snippets button.

Insert post snippets using the visual editor

Now start a draft post and you should see a new icon on the toolbar:

New icon on toolbar to insert post snippet

Click the icon and you get a Post Snippets pop-up:

Insert post snippets popup box with text fields to enter quote, author, source title and source url

Now add your content into the four fields. For example, to quote from Tim’s post, I enter the following:

  • quote: “So, here they are, the official ALA blockquote patterns. A lot of thought for what might be a small detail, but in thinking about these things now we’re doing our best to make sure that our content is future-friendly, and not just our templates.”
  • author: Tim Murtaugh
  • sourcetitle: A List Apart
  • sourceurl: http://alistapart.com/blog/post/more-thoughts-about-blockquotes-than-are-strictly-required

When you have added your content, click the Insert button. You should see your blockquote and the four different content items marked up correctly.

Here is my blockquote code:

<figure class="quote">

<blockquote>So, here they are, the <a href="https://gist.github.com/4489740">official ALA blockquote patterns</a>. A lot of thought for what might be a small detail, but in thinking about these things now we’re doing our best to ensure that our content is future-friendly, and not just our templates.</blockquote>

<figcaption>Tim Murtaugh, <cite><a href="http://alistapart.com/blog/post/more-thoughts-about-blockquotes-than-are-strictly-required">A List Apart</a></cite></figcaption>

</figure>

…and here’s the rendered blockquote:

So, here they are, the official ALA blockquote patterns. A lot of thought for what might be a small detail, but in thinking about these things now we’re doing our best to ensure that our content is future-friendly, and not just our templates.

Tim Murtaugh, A List Apart

Final thoughts

This is going to save me a lot of time. I no longer have to look up the blockquote markup and I can focus on writing the content. When writing, anything that gets the tech out of the way is a good thing for me.

At some point, I’ll style <figurecaption> to indent it to the same level as the blockquote. I think this will visually tie the author and citation to the body of the quote itself.

You may also like...

7 Responses

  1. Anders says:

    I stumbled upon this post searching for a way to alter the blockquote markup from WordPress. I didn’t even know this plugin existed…Awesome!

    I did a few minor tweaks on your code, so it’s a bit more versatile:


    echo '';
    echo "

    {text}

    ";
    if( "{author}" != ""){
    echo "{author}";
    if( "{source}" != ""){
    if( "{source_url}" != ""){
    $url_start = '';
    $url_end = '
    ';
    }
    echo ", ".$url_start."{source}".$url_end."";
    }
    echo "";
    }
    echo '';

    • Anders says:

      bah, the markup got screwed up..


      echo '<figure class="quote"&rt;';
      echo "<blockquote&rt;{quote}</blockquote&rt;";
      if( "{author}" != ""){
      echo "<figcaption&rt;{author}";
      if( "{source}" != ""){
      if( "{source_url}" != ""){
      $url_start = '<a href="'."{source_url}".'" target="_blank"&rt;';
      $url_end = '</a&rt;';
      }
      echo ", <cite&rt;".$url_start."{source}".$url_end."</cite&rt;";
      }
      echo "</figcaption&rt;";
      }
      echo '</figure&rt;';

  2. Gavin Wray says:

    Hi Anders – thanks for sharing your improved blockquote snippet! I’m struggling to get it to work though. I guess my WordPress site is mangling your markup when you post a comment. Please can you add another comment with your code snippet inside the shortcode shown in this screenshot?

    • Anders says:

      Hi!

      I’ll try again :)
      I forgot to mention you’ll have to mark it as both shortcode and PHP snippet.
      Anyway, the main improvements are that if some fields are empty unecessary code won’t get printed:

      echo '';
      echo '<blockquote>"{quote}"</blockquote>'; //The quote-marks around {quote} is there just to add quotes
      if( "{author}" != ""){
        echo "{author}";
        if( "{source}" != ""){
          if( "{source_url}" != ""){
            $url_start = '<a>';
            $url_end = '</a>';
          }  
        echo ", <cite>".$url_start."{source}".$url_end."</cite>";
        }
        echo "";
      }
      echo '';

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>