How to add drop caps in WordPress pages and posts?

This article I’m going to teach you how to add drop caps to WordPress posts and pages, we’ve all seen drop caps, but you may not know their technical name. Drop caps are the first letter of a paragraph that is formatted differently than a relatively large font. Drop caps make interesting mixes in the reading experience of the articles by raising the reader’s attention. These are common in magazines and newspapers.

I’ll show you a couple of ways that you can add drop caps to WordPress posts and pages, one by installing a WordPress plugin and other by using simple CSS3.

With “css” there are many ways that you can write your own styles, here I’m showing some style either any one you can use it, to add CSS style if you have FTP access to the site then go to the active theme style.css file (example file path: /public_html/wp-content/themes/twentyseventeen/style.css) and add below css code or if you have WordPress site admin access go to the edit stylesheet section “(Appearance > Editor > Stylesheet – style.css)” and add css code.

i). Following css code will add drop caps to the first paragraph in post or page content.

ii). Following css class (i.e “dropcaps”) will add drop caps to the any charter in between html tags (Ex:<span class=”dropcaps”>A</span>).

Below is an example of a “Drop Cap” image.
Drop Cap


As an alternative way to do this, you can use a plugin. This plugin provides a novice flexibility with less work. Here are a few plugins that you can download from the WordPress plugins directory, some of the plugins have Pro versions to improve dropcap features and style choices.

Hopefully, you learned how to use the drop cap on WordPress while doing blogging. If you want to add a drop cap to the entire WordPress site, or add a drop cap for each post or page, then please Subscribe to ScriptHere.Com by Email. You can also find us on Facebook and Twitter. If you have any comments or queries, please do the following in the comments section.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.