How to easily add drop caps to your WordPress content

Ways to add drop caps as decorative first letter to your website

The use of drop caps hasn’t always been for decorative purposes like it’s used in today’s typography. Drop caps once denoted the start of a new sentence, or highlighted an important event within the text. Paragraphs and break returns did not feature in early texts. So the usage of the drop cap was widespread in a variety of texts for many years, spanning a wide range of cultures around the globe.

Drop Caps WordPress
Image Source: OpenClipart-Vectors – Pixabay.com / License: CC0 Public Domain

Modern usage of a drop cap is primarily for decorative use that helps tie together content and web design. Implementing drop caps into your WordPress content can be achieved using a variety of methods (e.g. simple HTML or plugins), all of which are suitable for beginners to get stuck in to.

Drop Caps in MH Magazine

MH Magazine Variations

Users of our popular MH Magazine WordPress theme can easily implement drop caps into their content using simple HTML code. Adding HTML code or markup into your posts and pages is possible by using the Text mode in your text editor. And that’s the code you can use for drop caps:

<span class="mh-dropcap">T</span>

Simply click the Text tab to enter the Text mode when editing (or creating) a post or page. Now replace the first letter of your chosen paragraph with the above code. Drop caps will be positioned automatically for you. Here you can learn more on how to use the text editor in WordPress properly.

In your text editor you should then see something like in the screenshot below. There you have your text and the first letter is wrapped into the code which is adding the drop cap to your paragraph:

Drop Cap HTML Code

When looking at the paragraph from the front end of your WordPress website, then you can see the drop cap you’ve added. It’s neatly placed within your website’s post or page content, like seen here:

Drop Cap Post Content

The drop caps are also styled to match your chosen color scheme, which you can modify using the built-in theme customizer via Appearance => Customize => Colors in your WordPress dashboard.

WordPress plugins for drop caps

WordPress Plugins for Drop Caps
Image Source: Clker-Free-Vector-Images – Pixabay.com / License: CC0 Public Domain

There are a variety of WordPress plugins available at your disposal that offer you alternative methods of adding drop caps into your website content. All plugins are available to download for free via the WordPress Plugin Directory. Some of these plugins are also offering pro versions to further enhance your drop caps features and stylistic options. Let’s have a look at these plugins.

Simple Drop Cap

Letters
Image Source: ptra – Pixabay.com / License: CC0 Public Domain

The Simple Drop Cap plugin offers you a simple method of implementing drop caps into your WordPress website. You can manually add drop caps to your content using the provided shortcode on a per-post basis. As an alternative you can opt to dynamically add drop caps to all posts and pages automatically.

You can further customize the drop caps using custom CSS code or by taking advantage of the provided color picker. This offers an easy way to fully integrate it into your current WordPress theme design. A Pro Version that offers an improved support service is also available along with a series of improvements to the WordPress plugin functionality and styling options. With this WordPress plugin you can easily transform the first letter of a word into a drop cap.

Dropcaps Shortcode and Widget

Dropcaps Shortcode Widget
Image Source: Screenshot – WordPress.org

As the name of this WordPress plugin suggests, Dropcaps Shortcode and Widget does exactly that. This plugin let’s you add drop caps to your posts, pages, and even widgets via the use of an easy-to-use shortcode. The plugin offers you the ability to drop the shortcode within your theme code, as well as being able to make use of the 11 built-in shortcode options to completely customize your drop caps. An upgraded version of the plugin offering a wide-range of content management features starting from $25 is also available.

Storyform

Storyform
Image Source: Screenshot – WordPress.org

Storyform is a stunning plugin that offers you the ability to create engaging, fullscreen magazine websites that look and behave like real paper magazines. Included within this unique WordPress plugin is the ability to easily add drop caps to your post and page contents. However, this is a very minor feature of a very comprehensive plugin that is certainly worth checking out. Storyform works great with longform articles, photo-essays or the everyday blog.

Initial Letter

Initial Letter Plugin
Image Source: Screenshot – WordPress.org

Initial Letter is another simple plugin to add a big letter at beginning of a paragraph as drop cap. The plugin comes with various styling options so that you can change the size, color and font of the first letter of each paragraph within a post. Initial Letter also provides a meta box on a per post basis to turn this functionality on or off.

Drop Caps

Drop Caps Plugin
Image Source: Screenshot – Instantsolve.net

Drop Caps has been around the block a few times but still functions perfectly well offering a simple solution to dynamically implement drop caps into your content. This WordPress plugin provides you with multiple options allowing you to choose which content elements will display drop caps. You’re further able to exclude certain posts and categories should you wish to do so.

Drop Cap Shortcode

Drop Cap Shortcode Plugin
Image Source: Screenshot – WordPress.org

The Drop Cap Shortcode WordPress plugin allows you to easily insert any letter of the alphabet in a drop cap style using a series of different shortcodes. Using a simple shortcode on a per-letter basis, such as [T] to place the letter T in a drop cap style, you’re able to get going in no time at all.

Conclusion: Adding Drop Caps to your Website

You’ve now learned how to use drop caps in WordPress while blogging. Whether you’re wanting to add drop caps throughout your entire WordPress website, or on a per-post basis, there is an easy-to-use solution available to you regardless of which WordPress theme you are using. All of the featured plugins are lightweight, easy to use, and work directly out-of-the-box, leaving you free to begin customizing the drop caps to perfectly suit your WordPress theme.

Share this with your friends

Leave a Comment

Your email address will not be published.


*