Drop caps are a great way to start a blog or paragraph to get reader’s attention, to get them interested in your content.
This article will show you how to add drop caps in your WordPress posts or blogs, we can achieve this in either way with or without writing codes, first let's start with the way of plugin method, so the plugin can handle drop caps without writing codes.
What is a Drop Cap?
A drop cap is a styling technique commonly used in books and stories that feature longer reads. The first letter of the starting paragraph in chapters has a larger font.
Adding drop caps helps you with a more formal and traditional touch to your site’s design.
Adding Drop Cap using Plugin.
First, we need to install and activate the initial Letter plugin on your WordPress dump. For more details on installing you can refer to the guide here
Once the plugin is active, you can go to Settings >> Initial Letter from your WordPress dashboard and change the settings of your drop caps. This plugin allows you to edit the font, size, color, alignment, and padding of your drop caps. You can also select the option to show drop caps in the excerpt and only have the first paragraph to have a large initial letter.
After it's done with settings, click with “Save Changes” button at the bottom. If you don’t want to show drop caps on some posts or pages, then you can disable the Initial letter inside the WordPress classic editor. So for WordPress block editor after adding the paragraph from Gutenberg, you can enable the drop cap option from the menu on your right. Simply click the toggle for Drop cap under ‘Text settings’ to show a larger initial letter.
Adding Drop Cap without Plugin
So, in this method, we are going to add a shortcode to your WordPress theme functions.php. I will add below gist code for the shortcode that you needed for the drop cap. you can add class name and style with your own CSS way. or by giving the styles as parameters to the shortcode.
So, paste the above code to your functions.php and now the shortcode has been created with some parameters as style for it, so after getting into the classic editor or Gutenberg block add this [extra-style color=purple size=18px padding=5px]Hello World![/extra-style]
Now you can add size, color, and padding as parameters to it. If you need extra parameters for your drop cap add it to the array attributes and call in the return part as we did to other attributes.
Leave your thoughts on comments if you had any with the above methods.
