So what do quote boxes do? They emphasize a specific quote to draw the reader’s eye to it. Most publications will use this to single out one specific and representative quote of whatever interview they’re publishing.

The first thing you need to do is set up a class in your CSS. On this blog I’m doing something like this:

.bigquote {
float: right;
font-family: kokonor, Arial, Serif;
font-size: 1.25em;
background: none;
width: 150px;
border-top: #663366 1px solid;
border-bottom: #663366 1px solid;
margin-top: 1em;
margin-left: 1em;
margin-bottom: 1em;
padding: .7em;
color: #663366;
}

All we have left to do after that is write out the post and wrap any text we want in the class to emphasize it. Something like this <div class=”bigquote”>This is the text that should show up to the right</div>

There’s an amazing article over at Smashing Magazine on how to theme these even more.

Related Posts
1. Use PHP To Count Your New Wordpress Posts
2. Visualize Your Fonts With MyFontBook
3. FlashForward Going Too Fast For Its Own Good
4. Convert Your PSDs Into Wordpress Themes
5. Adding ‘New’ Badges To Your Wordpress Posts

Tags: Wordpress