Drop Caps Plugin

This plugin enables you to easily add drop caps to your WordPress blog. Drop Caps increase the readability, make your blog look more professional and increase the time your visitors spend on your site.

Traditionally very few sites have drop caps because they have to be manually hard coded. With the Drop Caps plugin, all drop caps are added on the fly meaning you can disable them if you change theme and you don’t need to think about them when you write your posts. To learn how it does this you may want to read about creating the plugin

The Drop Caps plugin is very flexible and can be easily be used to create other types of initial. Using the plugin you can create drop caps like those on the following sites:

• I love typography
• Children’s Memorial Hospital
• Design Gala
• Onyx Design
• Jon Tan
• No Doubt Scrapbook
• …and of course my own site!

Background

Beginning paragraphs with a large first letter is an ancient practise dating back over a thousand years.

This was called “an initial” and generally consisted of a very ornate letter with artwork surrounding it (Historiated Initial). The use of an initial has continued up to the present day.

Today initials come in the form of a drop capital and are found in many magazines, newspapers and novels. Drop Caps are used to a lesser degree on the web.

Designers use drop caps to lead the readers eye to the start of a piece of text such as a new chapter or article.

Download

To use the plugin on your blog just download the current release from the WordPress Plugin Directory. Put the files in the plugins folder and activate the plugin from the WordPress admin menu. To customise where drop caps appear go to the Drop Caps page on the settings menu and change some of the settings.

Use

The plugin marks-up the first paragraph starting with a capital letter. It makes the first letter into a drop cap and gives the paragraph a class of “first-child” allowing you to style the first paragraph in a different way. The markup is as follows:

<p class="first-child"><span title="L" class="cap"><span>L</span></span>orem ipusm…</p>

Here is an example of how you could style a simple drop cap.

span.cap {
float:left;
line-height:0.9em;
padding-right:0.1em;
margin-bottom:-0.2em;
font-size:320%;
font-family:georgia,serif;
}
p.first-child{
font-weight:bold;
}

If you want a more complex drop cap like the ones on my blog, this post shows you how to style your drop caps with drop shadows. If you have no experience of CSS use the default styling or contact your theme designer.

Be as imaginative as possible. Please show me how you have used the plugin and I may feature you on this page.

If you find any bugs or have any feedback, please contact me and I will help you as soon as possible.

Update Log

To update to version 2.1 you may have to change existing stylesheets because version 2.1 uses a span tag as opposed to a strong tag.

• 1.2 – Fixed a bug where drop caps wouldn’t appear after images or in paragraphs with attributes.
• 2.0 – Added loads of settings such as which pages to display drop caps on.
• 2.1 – Fixed a bug where drop caps wouldn’t appear after quotes and multiple HTML tags. Changed the markup to use `span` tags as opposed to `strong` tags. Posts can be excluded by name as well as ID.