So, what exactly is a Drop Cap? Or, is it a Cap Drop?

Posted 29 January 2011 by

D

ropcaps is the name for the effect where the first letter of the first paragraph in an article drops below the line of text, and is displayed in a larger font-size than the other normal letters.

I took that sentence above, and the following instructions,  from the WordPress FAQ for Layout and Design. Just scroll down and look for the heading “How do I do a dropcaps on the first letter of a post?”. This is what is says:

This can be done using BBCode quicktags. First, add this to your style sheet:


#fp:first-letter {
font-size : 300%;
font-weight : bold;
float : left;
margin-right: 3px;
}

then add following code to file /wp-includes/js/quicktags.js and put them among edButtons:


edButtons[edButtons.length] =
new edButton('ed_capdrop'
,'CapDrop'
,'<p id="fp">'
,'</p>'
,'c'
);

You will now see a DropCap quicktag in your edit window.

That’s it. The first part is done by going into your WordPress Dashboard, Appearance, Editor, Look on the far right under “Styles” and click on the “Stylesheet” link. Throw the first part in the render /* =Structure. You may need to adjust the text positioning if you like to keep things tidy. Click “Update File” this to save your changes.

For the second part I used Filezilla, which is an FTP client. Navigate to /wp-includes/js/quicktags.js and edit/view. Add the changes among the edButtons area. You might wish to get rid of the extra spaces to keep the file tidy. Save that.

Now, your changes should be in place. If you create a post, or edit and existing one, you’ll see a new quicktag in your edit window called Cap Drop. Mine appears first in the row. I presume because I placed the edButtons text in the quicktags.js file at the beginning to the edButtons area ;)

This shows the CapDrop quicktag and the capdrop code.

CapDrop code and quicktag.

Bad Kiwi.

Image of Bad Kiwi

Post Details

Leave a Reply