How to add Drop caps (First Big Letter) in Your WordPress Paragraph

by

You have noticed Drop caps (First Big Letter) on many websites but perhaps familiar with their technical name. Drop caps are used as the First big letter at the beginning of the paragraph. You can easily see them on News & Magazines websites.

It is good for better reading experience and it also enhance reader to spend more time on your website. If you’d also like to style your paragraph as drop caps so check the below methods to do.

Add Drop Caps in your WordPress theme editor

The first way is to place some css and php codes directly into your theme editor. This is so easy simple check the below steps to do.

Step 1: First of all, Go to Appearance >> Theme Editor

Step 2: Then search for  functions.php, you will have to wrap the content using the following code (edit with below codes functions.php template file).

// http://http://loudytech.com

 
function prefix_big_letter($content) {
  return "<div class='wp_content'>$content</div>";
}

Step 3: Now search for single.php page and place the below code at the beginning or bottom (Please insert <style> on the beginning of the code and </style> on the end of the code)

.wp_content p:first-child:first-letter { 
  float: left; 
  color: #903; 
  font-size: 75px; 
  line-height: 60px; 
  padding-top: 4px; 
  padding-right: 8px; 
  padding-left: 3px; 
  font-family: Georgia; 
}
</style>

Use Plugin

Another way to add dropcaps is Use plugin DropCaps By Thomas Milburn. This plugin allows you to allows you to create wicked drop caps. 

That’s it!! You will see first letter in paragraphs as dropcaps. If you have any query then feel free to comment us below.

Leave a Comment