Create WordPress Drop Caps

Drop Caps. Magazines use it. Websites use it. What’s all the rage? A Drop Cap is the first letter of a paragraph that is enlarged to “drop” down two or more lines. So, here is an easy way to create drop caps in WordPress.

1. Add a span to the first letter of your post with a “class” called dropcaps. See the example below.

<span class=”dropcaps”>D</span>rop Caps. Magazines use it.

2. Next, add the followng CSS code to your WordPress Theme’s stylesheet.

.dropcaps {
font-family: Georgia, Times New Roman, Serif;
font-weight:bold;
float:left;
line-height:30px;
font-size:36px;
padding: 3px 3px 0 0;
}

3. That’s it. See the example above.

  • Twitter
  • Facebook
  • Google Plus
  • Pinterest
  • PDF
  • RSS

8 Comments

  • At 2008.06.30 06:20, Maj said:

    This doesn’t seem to do anything.

    [Reply]
    • At 2008.11.05 18:17, Aziz said:

      pravelno written:)

      [Reply]
      • At 2009.01.24 07:15, Ed said:

        Works great for me.

        [Reply]
        • At 2009.03.30 23:26, Carey said:

          Yay! Thank you

          [Reply]
          • At 2009.04.08 13:51, Vit said:

            Great! Exact what i need.

            [Reply]
            • At 2009.05.01 01:33, Doing Drop Caps Right - SilverPen Publishing said:

              [...] need a flexible way of using drop caps and employing them right where you want them. To this end, Ulysses Online has a great guide on how to create drop caps in just a few easy steps. You’ll have to be able to edit your CSS file (so this won’t [...]

              [Reply]
              • At 2009.06.06 17:09, S.Pradeep Kumar said:

                I don’t seem to find any code for changing the color here buddy ?

                How to change red into some other color ? Cheers !

                [Reply]
                • At 2009.06.08 14:22, ulyssesr said:

                  Just add color to dropcaps:

                  .dropcaps {
                  color:#06c;
                  }

                  That’s blue.

                  [Reply]