Drop Caps For WordPress

Drop caps are a really simple way of making your posts just that bit more interesting. They’re easy to do too — in this post we’ll find out how we can use a mixture of CSS3 and plugins in order to spark up posts with minimum effort.

Drop cap first letter

Drop caps are when you take the first letter and enlarge it, dropping it down several lines and wrapping text around it so that it looks something like this (you’ve probably seen it before, even if you didn’t recognise it):

The plugin way

We’ll start with the plugin method. The appropriately named ‘Drop Caps‘ plugin adds <span> around the first letter of the post which you can then style as you wish.

The CSS3 way

You can use CSS3’s selectors to do this, specifically the :first-letter and :first-of-type. Combining these together you can target the first letter of the first paragraph of your post’s content:

Drop cap the CSS3 way
.post p:first-of-type:first-letter{
	font-size: 48px;
	padding: 10px;
	float: left;
}

These mean you don’t need to add any extra markup whatsoever to the post and it’ll be all automated for you. The downside, of course, is that IE users don’t get to see the drop cap, but it does degrade gracefully:

The manual way

If you only want to use a drop cap on the occasional post then this is the best way of doing things — otherwise I can see very little advantage in doing this over any of the other methods.

The manual way does mean wrapping the first letter of the post in <span> tags in the HTML editor. This means unless you do it from the start on your blog you’re not going to get the drop cap on every post, hence why I wouldn’t really recommend doing this unless you only want to do it occasionally.

You’ll need some CSS, something like this:

Drop cap the manual way
.post span{
	font-size: 48px;
	padding: 10px;
	float: left;
}

Dropping off?

Wake up! It’s the end of the post. That’s a really bad pun. I’d better end quickly. Drop caps. They’re pretty cool and now they’re easy for you to do too. Do leave a comment if you’ve got an ingenious better way of doing this.

Image from DailyDropCap, an awesome site.