dropcap

Dropcap is the very first letter of an article, which is styled differently with comparatively massive font size. Dropcaps make interesting blends to article reading experience by improving the focus of a reader.

Here is an example:

dropcap example

How to use the dropcaps in WordPress?

There are two ways to use the dropcaps in WordPress, one by installing a WordPress plugin and other by using simple CSS3.

Automatically Inserting Dropcap to all WordPress posts using CSS

This one is quite easy and can be done by using a simple CSS edit. All you need is to find your post-content’s class which in my case is entry-content. You can find it by using inspect element feature of your web browser.

inspect element to get post class

Now, all I need to write my CSS code inside

.entry-content p:first-child:first-of-type:first-letter {}

For example, writing

.entry-content p:first-child:first-of-type:first-letter { 
float: left; 
padding: 10px 6px 10px 10px; 
font-size: 60px; 
color: #161616;
font-weight: bold; 
line-height: 1; }

will make first letters of all WordPress posts dropcap-ed. This method also works for Blogger blogs. Just insert the following CSS into your blog:

.post p:first-child:first-of-type:first-letter { 
float: left; 
padding: 10px 6px 10px 10px; 
font-size: 60px; 
color: #161616;
font-weight: bold; 
line-height: 1; }

By installing a WordPress Plugin (Auto/Manual)

There are not too many WordPress plugins available for adding dropcap into posts/pages and the ones which are available have not been updated since a long time. Drop Caps and Drop Cap Shortcode are two useful plugins which appear to work with latest version of WordPress, they don’t declare compatibility with WordPress 3.9.1+ though. Drop Caps automatically first letter of all posts a dropcap while Drop cap Shortcode does the same but by manually inserting a shortcode for each post.

Manually adding Dropcap by CSS & custom class

We can assign an HTML class to each letter to which we want a dropcap to be shown and then do proper styling modifications using CSS. In this tutorial, we are assigning a class dropcap for a span element to which we want to visually render a dropcap. Add the following custom CSS code into your theme’s style.css file or using a custom CSS plugin, like Jetpack’s Custom CSS and WooDojo Custom code :

.entry-content p span.dropcap {
float: left;
padding: 10px 6px 10px 10px;
font-size: 60px;
color: #161616;
font-weight: bold;
line-height: 1;
}

After you finished adding this custom CSS, you can assign dropcap class to span element for the first letter in WordPress post/page editor.

For example adding,

 <span class="dropcap">E</span>

in back-end, you will get left aligned E icon   on the front-end with all other text content right to it.

Drop Cap

You can further customize dropcap design by modifying above CSS. For example you want a white dropcap text to be placed inside a black box, you can add the following CSS:

.entry-content p span.dropcap {
float: left;
padding: 10px 10px 10px 10px;
font-size: 60px;
color: #ffffff;
background-color: #161616;
font-weight: bold;
line-height: 1;
}

This will result into:

dropcap dark

My dropcap CSS has dark text with a yellowish background and a hover effect. I used the following custom code:

.entry-content p span.dropcap {
-webkit-border-radius: 50;
-moz-border-radius: 50;
border-radius: 30px;
float:left;
font-size: 60px;
padding: 10px 20px 10px 20px;
background: #f2ea50;
color:#161616;
font-weight: bold;
font-family: Lora, serif;
line-height: 1;
text-decoration: none;
}
.entry-content p span.dropcap:hover {
color: #ffffff;
background:#161616;
text-decoration: none;
}

The manual CSS3 styling method also works with Blogger blogs. Just insert the appropriate CSS in the Layout editor and then use dropcap span class. On the blogger.com blogs, all you need is to replace

.entry-content p span.dropcap

by

.post span.dropcap

Published by Gaurav Tiwari

A designer by profession, a mathematician by education but a Blogger by hobby. With an experience of over seven years with WordPress, PHP and CSS3, Gaurav is capable of doing almost anything related to these. Beyond that, He is a mathematics graduate & a civil service aspirant.

Leave a Reply

Your email address will not be published. Required fields are marked *