Gavin Wray

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

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>

The blockquote renders like this:

The quote text goes here.

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

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

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

  3. Choose Add New Snippet.

    Add new post snippet fields

  4. In the Title field, type:

  5. In the Variables field enter:

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

     <figure class="quote">
       <figcaption>{author}, <cite><a href="{sourceurl}">{sourcetitle}</a></cite></figcaption>
  7. In the Description field, enter a suitable description for your snippet. This helps you find it again in the visual editor. I used Single line blockquote with attribution and cite including source URL.

  8. Leave everything else unselected and click the Update Snippets button.

Insert post snippets using the visual editor

  1. Start a draft post and you should see a new icon on the toolbar:

    New icon on toolbar to insert post snippet

  2. 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

  3. 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:
  4. When you have added your content, click Insert. 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="">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="">A List Apart</a></cite></figcaption>

Final thoughts

This will 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.

Content © 2021 Gavin Wray
Athena Jekyll theme by Diana Mounter

Twitter · LinkedIn · SoundCloud · GitHub