Pull quotes are a great way for articles to pull readers in with your swanky text, reflect traditional print design, and show off your highfalutin typography skills. And, let’s be honest, it just looks so nice. If you don’t think so, you’re probably not reading this article.

You’ll need to be OK with HTML and CSS to make this happen. Or, if you’re using WordPress, you can plop the shortcode at the end of the article in your functions.php theme file.

HTML & Accessibility

Pull quotes are great for print articles. You’re flipping through a magazine and it’s a way to draw you in, help you decide which articles to spend your time reading. On a website, it’s a stylistic flourish, and a way to entice your reader to actually finish the article you wrote.

The downside with a pull quote on a website, is that you’re repeating content. What about users who have a visual disability and are using a screen reader to access your article? They’re going to have that content read to them twice, and, since there’s no cue for them that it’s just stylistic, it’ll be inserted in the article in a random place and not really make sense. Not good! Fortunately, we can fix it.

<div class="pull-quote" role="presentation" aria-hidden="true">
    This is my awesome pull quote. It has the power to draw you in to the article, like a mystical wildebeest.
</div>

See that role=”presentation” and aria-hidden=”true” stuff? It tells screen readers to skip over that content so it’s not read to them twice. We want our pull quotes to enhance our user’s experience, not annoy them. If you want to learn more about those tags, here’s a great post about aria-hidden implementation across screen readers and browsers.

CSS

All the CSS I do is of the mobile-first / progressive enhancement philosophy. That means I want our base experience to be great, and for those that have additional options (like a larger screens and javascript), they get an even better experience. Here’s the CSS to draw the pull quotes out of the article and have the text wrap nicely around it.

/* mobile-first design css */
.pull-quote {
    border-top: 2px solid #ddd;
    border-bottom: 2px solid #ddd;
    color: #486B76;
    font-size: 1.3em;
    margin: 1em auto;
    padding: 1em 0 1em 0;
}

/* tablet styles */
@media screen and (min-width: 34em) {
    .pull-quote {
        float: left;
        width: 50%;
        padding: 1.2em 0 1.2em 0;
        margin: .8em 2em .8em 0;
    }
}
   
/* desktop styles */
@media screen and (min-width: 58em) {
    .pull-quote {
        margin-left: -20%;
    }
}

Drop that in your CSS file and tweak to your heart’s desire. I use ems for everything to keep spacings all balanced with the typography and user’s browser zoom. It’s awesome.

There you go! Your style and HTML is there. Pretty easy. Oh, but you want to use a shortcode with WordPress instead? I do too, because marking up HTML in a WordPress post is annoying.

Bonus WordPress Shortcode

If you have the CSS set-up already, drop this into the functions.php of your theme file. Don’t do this on a live site or via WordPress’s internal theme editor. Well, you can, but be warned that you might break your entire site.

function pull_quote_shortcode( $atts ) {
    extract(shortcode_atts(array(
        'quote' => '',
    ), $atts));
    return ''.$quote.'';
}
add_shortcode('pull_quote', 'pull_quote_shortcode');

// usage 
// [pull_quote quote="Hey, Look! A pull quote!"]

That’s it! Well… you might have to adjust your site layout. Single column articles without any sidebars work best (like on this site). After you do that, put a pull quote up on your site, lean back in your chair, and think, “Oh, yeah. That pull quote looks better than an expertly executed triple gainer.”

Just kidding, nothing is better than that.