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

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.

Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Comment Name Violation
April 24, 2010 8:41 am

Drop Caps is interesting method to create our WordPress post more unique

April 22, 2010 6:58 pm

THANK YOU. I’m happy to see an up-to-date article on this issue. Great of you to weigh the pros/cons of the plugin route.

Best wishes

April 20, 2010 6:50 pm

I would like to use the CSS variant. The manual way needs much effort and I don’t like the way we add some more tag non-semantic just for drop caps. The Javascript looks a bit better. But anyway, if I use, I’ll choose CSS.

Drop Caps For WordPress | WPLover
April 20, 2010 4:14 am

[…] Drop Caps For WordPress […]

April 20, 2010 3:03 am

I saw drop caps in your weblog and was curious about it. Will try it manually and the CSS3 way. Thanks for sharing. 🙂

April 19, 2010 8:12 pm

I used to use drop caps, but I stopped. Instead, I just style the first paragraph of my post differently. Including a drop cap in there was just too much for me.

But I used the manual way, adding a span tag around the first letter.

April 19, 2010 7:20 pm

You just prove that a post does not has the be long to be good.I use the manual way and think about using css3 in the future.

Thanks Alex !