Drop Caps For WordPress • WPShout

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):

There are three ways of doing this. One is use a plugin, the other is use CSS3 and the final one is do it manually. The only way which adds no extra markup is the CSS3, but that doesn’t work cross browser. The plugin way is best if you want to add drop caps to all your posts and if it’s just the occasional post then the manual way it best.

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.

Pros	Cons
Install it and forget about it	Adds extra markup
Works in all browsers	You don’t need a plugin for everything, rather goes against that idea
Gives some options

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:

Pros	Cons
No extra markup	Doesn’t work cross browser
Requires very little effort — it just works!	I’ve found text can’t be selected when using this technique
Degrades 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;
}

Pros	Cons
Works cross browser	Won’t work in retrospect
Gives you complete control over which posts have the dropcap	Adds extra markup
	Does mean a bit of effort wrapping the first letter of the post in a <span> tag.

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.