How to Add Drop Caps in WordPress Posts


Have you ever wondered how some WordPress sites have drop caps? Recently one of our users asked if we know of an easy way to add drop caps in WordPress. In this article, we will show you how to add drop caps in WordPress posts without writing any CSS code.

Drop cap in float mode

Drop caps is a styling technique commonly used in print books and magazines featuring long reads. It uses a large font size for the first letter of the starting paragraph in each chapter.

Video Tutorial

Subscribe to WPBeginner

If you don’t like the video or need more instructions, then continue reading.

First thing you need to do is install and activate the Simple Drop Cap plugin. Upon activation, simply visit Settings » Simple Drop Cap to configure the plugin.

Simple Drop Cap Settings

The plugin comes with three styling options. The first one is normal mode. This is how the drop cap looks in the normal mode:

Example of a normal drop cap

The second choice is float mode. This is how the drop cap looks in the float mode:

Drop cap in float mode

The last option is to use your own custom CSS rules. If you choose this option, then you will need to provide your own styling rules in the custom css style box

The plugin also allows you to change the color of drop capped letter.

Lastly under the usage settings, check the box next to drop cap automation. This will automatically add drop cap to all your post.

Alternatively, you can also wrap the first letter of your posts with [dropcap][/dropcap] shortcode. We’d recommend using the automated method because it’s easy to use.

That’s all. Save your settings and preview your site to see the plugin in action.

We hope this article helped you add drop caps in WordPress posts. You may also want to check out how to add custom styles to WordPress visual editor.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Google+.

Seraphinite AcceleratorOptimized by Seraphinite Accelerator
Turns on site high speed to be attractive for people and search engines.