How to Create Those Cool, Little Pull-Quotes on Your WordPress Blog or Website

This is a pull-quote. Follow this brief tutorial, and learn how to do it yourself. It’ll make you happy.

Pull-quotes are often used in magazines and other print publications to emphasize or draw attention to something specific within the body of an article.

I recently started using them here on Bigger Life Marketing. Besides adding emphasis, I like the way it breaks up the article and gives it some added pizzazz. A client asked me how to do this, so I thought I’d turn it into a short tutorial. It’s relatively easy to do.

1. After you login to your WordPress control panel, click on the Appearance tab, then Editor. This will take you to the “Edit Themes” page. On the right side of the screen, you should see a long list of files. You’ll want to scroll down toward the bottom, and look for the “Stylesheet (style.css)” template. When you find it, just click the link.

2. Scroll all the way to the bottom, paste in the following code, and click the “Update File” button:

blockquote.right {
float:right;
width:45%;
margin: 0 0 10px 15px;
border:1px solid #ddd;
padding: 10px;
text-align:center;
background:#eee;
}

blockquote.left {
float:left;
width:45%;
margin: 0 15px 10px 0;
border:1px solid #ddd;
padding: 10px;
text-align:center;
background:#eee;
}

3. When you write a post (or page), here’s how to create the pull-quote. On your post editor screen, you should see two tabs in the upper right corner labeled “Visual” and “HTML.” You’ll need to click the “HTML” tab, and when you do that, you can use either one of the following options, depending on which side you want your pull-quote to appear:

<blockquote class="left">This is the content that you want to appear in the pullquote. It will appear to the left of the normal content.</blockquote>

<blockquote class="right">This is the content that you want to appear in the pullquote. It will appear to the right of the normal content.</blockquote>

Just use code similar to this within your article content wherever you want your pull-quote to appear. It may take a little testing and tweaking to get it to show up just where you want it, but keep trying, and you’ll have some cool pull-quotes for your own WordPress site.

If you have any problems or questions, post a comment below.