How to Create Drop Caps (Big First Letters) in WordPress

We’ve all seen drop caps, but perhaps you weren’t familiar with their technical name. Drops caps are those big first letters that you see at the beginning of paragraphs. They are common in magazines and newspapers, but not so much on the web.

If you’d like to style up your posts with a drop cap, it’s easy enough to do. There are several ways to go about it.

Place CSS Code in Your Stylesheet

The first way is to place some CSS code in your Stylesheet.

You will need to know the name of the div class for your main content. You can find that by looking in  your theme files. For example, in the default TwentyTen theme from WordPress, you can see the div class is called “entry-content” for the single post file (loop-single.php).

There’s a good chance that your theme is named in the same way, but it might not be, so you’ll need to check it.

Once you have your div class, then place the following code in your Stylesheet. (Appearance > Editor > Stylesheet – style.css)

You’ll need to change the “entry-content” section below if your theme has a different class name. You can also change the properties to make it look the way you like, even adding more properties, of course. In this example, I’ve made a blue drop cap with a shadow.

div.entry-content p:first-child:first-letter {
float:left;
font-size:4em;
color: #000099;
margin-right:0.10em;
line-height:90%;
text-shadow: 0.05em 0.05em #C0C0C0;
}

And here’s the result:

Use a Plugin

Another way to achieve a drop cap is with the Drop Caps plugin. This plugin gives the novice a little more flexibility with less work.

This plugin lets you easily choose where drop caps should appear and where they shouldn’t: on content, on excepts, on single posts, on pages, on the homepage, etc. It also lets you exclude specific posts or categories.

Here’s the default look for the Drop Caps plugin, but it does also give you the option of inserting your own CSS in your Stylesheet.

Photo: ornamental letter – D- vector from BigStock