Get The Magazine Look with Pullquotes

Get The Magazine Look with Pullquotes

Give your blog the magazine look with pullquotes! The publishing industry has been successfully using pullquotes for years. The professional touch that adds style and usability that helps the reader scan your articles efficiently.

There are a few methods that you can use to get pullquotes on your site, I’m will only be explaining the method for which I used. The code below of course can be customized to your liking colors, fonts and backgrounds.   

The Code: Copy into style.css:
q {float:left; width:9em; display:block; margin:0.25em 0.75em 0.25em 1em; padding:0.5em; border:3px double #ccc; border-width:3px 0; color:#484848; background-color:#ffffff; text-align:center; font:bold 1.3em/1.3 Georgia;}

q.q2 { width: 200px; margin: 5px 0 5px 15px; padding: 5px 0; border: 3px double #aaa; border-width: 3px 0; font-size: 1.4em; text-align: center; float: right; }

To Insert Pullquote in the Post: 
<q>Your Text Here</q> — quote shows left
<q class=”q2″>Your Text Here</q>  — quote shows right

To Insert (Option 2) Pullquote in the Post:
Quicktags Wordpress Plugin : The quicktag is an excellent plugin for the lazy guru blogger. With quicktag you just add your code into the simple user interface under options and when you return to the editor your button will be available for quick use of adding the pullquotes or any other function you want to quickly use while writing. 

Quicktag Interface:

WP Editor:

WordPress Pullquote Plugin Options:
Fancy-Pullquotes Pugin : Negative effects if deactivated and RSS trouble according to comments.
Nerdaphernalia Pullquotes: I actually installed this plugin and it has an excellent user interface located under the presentation tab but I was unable to make the pullquotes show up when adding the required markup tag in the post. 

12 thoughts on “Get The Magazine Look with Pullquotes

  1. Paula says:

    It’s so amazing that just yesterday I was reading a newspaper and wishing to myself that I could put pull-quotes and stuff on my websites!

    Thank you,
    Paula

  2. Life is Colourful says:

    It shall work the same with blogger and wordpress, don’t you think so? But I could not make it work for blogger blog with this piece of code… Anyways, I know another way to make it happen so no worries

  3. Stephen Rider (Nerdaphernalia) says:

    The <q> tag is tricky and should probably be avoided, because different browsers treat them differently. For example, some browsers add quote marks around the text, while others do not.

    You might want to use spans instead.

    Also, just applying CSS to text to make the quotes is going to probably result in that text showing up in the body of your text when viewed in an RSS feed reader.

    As the author of the “JavaScript Pull-Quotes” plugin, I would be interested in figuring out why it didn’t work for you. I’ve had a handful of reports from people saying it just plain didn’t work for them, and would like to establish why. Please drop me an email if you would like to help me out with this.

  4. Jason Neuman says:

    Works in IE and in FireFox it puts quotes around the text but still pullquotes text like its supposed to be. In RSS it does not show but I’m not concerned about that to be honest.

  5. Stephen Rider (Nerdaphernalia) says:

    Are you aware that your page doesn’t validte? Among other things, you forgot to close your <head> and start your <body>. This may be why the plugins have problems.

    Also, WordPress will not insert anything into your head (as is required by my plugin) unless you have the following at the end of your <head>:

    <?php wp_head(); ?>

    As this is a custom theme, it’s possible that this is missing.

  6. Jason Neuman says:

    You are the first to say that my site does not validate. It has been working fine I was just in Romania – worked there and now back in Belgium and it is still working here. Unsure what you are talking about on the plugin as I did not use one for the pullquote and have not used one since this article.

    Since this article I’ve adjusted my blockquote to look similar to a pullquote and now use it instead.

  7. Stephen Rider (Nerdaphernalia) says:

    By not validating I mean it doesn’t follow proper HTML structure. I will email you separately with specific info, but for starters, there is no closing head tag:

    </head>

    And no opening body tag:

    <body>

    I’m simply looking at the source for this page. It goes from meta tags in the header straight to div tags that are part of the body. If something is messed up in your header template, it might not be pulling in header bits that are being added via WordPress plugins.

    (Yes, I’m aware that you’re not using one for your pull-quotes. 🙂 You mention in this post that you tried the plugin and it didn’t work — i think this might be why.)

  8. Pagerank Checker says:

    ’m aware that you’re not using one for your pull-quotes. 🙂 You mention in this post that you tried the plugin and it didn’t work — i think this might be why.

Comments are closed.