WordPress: How to Automatically create Drop Caps Without using Plugins

Looking for an automatic way to create drop caps on every post or pages of your WordPress blog without using any plugins? As you may notice, this website has drop caps on every post.

Drop caps are used in so many publications hundred of years before and today this also entrenched in desktop publishing and web design. A popular platform like WordPress has available plugins to easily integrate drop caps on every article published which create additional attraction to the readers.

But you know that adding plugins on WordPress will increase the overall load time of the site which is not acceptable by impatient readers. Instead of making attractive this may cause your readers to leave your site.

How about adding a snippet and CSS, which also achieve the same result as the plugin does. This is what I’m going to share with you, how to create drop caps without using plugins.

To Automatically create Drop Caps without using plugins follow the simple steps given below:

Below are simple steps that you can follow in order to add automatic drop caps on your WordPress website.

1. Go to your functions.php and add this snippet of code inside.

function post_first_letter($content = '') {
   $pattern = '/<p( .*)?( class="(.*)")??( .*)?>((<[^>]*>|\s)*)(("|“|‘|‘|“|\')?[A-Z])/U';
   $replacement = '<p><span title="$7" class="post-first-letter">$7</span>';
   $content = preg_replace($pattern, $replacement, $content, 1 );
return $content;
}		
add_filter('the_content', 'post_first_letter');

2. Next head on to your style.css and also add this line, you may change the value of this CSS style to fit your taste.

.post-first-letter{
float:left;
font-size:3.2em;
color: #555555;
margin-right:0.10em;
line-height:90%;
font-weight:bold;
}

The two sets of code that you add to your website functions.php and style.css file will do the job. Just be careful when editing the functions.php, make sure to have a backup before editing, in case something happen you can easily reverse the update you made.

That’s it, hit refresh and all the first letter of every post and page will automatically become drop caps. Enjoy.