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.
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.