What’s up! If you’re a little bit curious if it’s possible to automatically add drop caps in a blog post – this tutorial is for you. Do you like the drop caps I use in my blog? Don’t you think that I manually need to add some inline CSS class or at least do something about it?

Naaaaaaa. I’m a little bit lazy to do manual things. I think this helps me go further in the learning path of coding. I’m just always curious if there’s an easier way to do things.

So, let’s copy and paste some code and have a neat drop caps in your future Extra projects.

I’m still studying  jQuery – and JS subjects – and I don’t know a lot yet. So, I searched on the internet and found 812studio tutorial about first letter pseudo-element. The website is from 2010, but the golden info is evergreen. It’s really worth to check it out.

My Facebook friend Kirb Lloren Ratilla gave me the idea for this tutorial. Thanks my friend! Hope I can help somehow with it!

Without further ado, let’s start!

How to automatically add drop caps in a blog postDemo

CSS

Let’s use the CSS I currently use in all my projects – including my YouDivi blog. You can find the drop caps Divi tutorial here.

First of all, copy and paste the following code inside Extra > Theme Options > Custom CSS:

/* -- Drop caps -- */
.dcaps {
background-color: none;
color: #1d2129;
font-size: 40px;
float: left;
display: inline-block;
font-family: Georgia, Roboto, sans-serif;
font-weight: bold;
text-align:center;
border: 5px solid #3F51B5;
margin: 5px 15px 0 0;
padding: 15px !important;
}

I like to keep Georgia as the main font inside the drop caps. But, feel free to change it and the colors to match your website project’s design.

Now that you have the correct style for the drop caps you need to use some jQuery’s magic to find and target only the first letter of the first line of all your blog posts.

jQuery

Finally, copy and paste the following code inside Extra > Theme Options > Integration > Add code to the < head > of your blog.

<script>
jQuery(document).ready(function( $ ){
// Select first letter for drop caps
$(".post-content.entry-content p:eq(0)").each(function() {
var text = $(this).html();
var first = $('<span>'+text.charAt(0)+'</span>').addClass('dcaps');
$(this).html(text.substring(1)).prepend(first);
});
});
</script>

If you followed all the steps above you should be seeing the first letter of you blog posts styled like our CSS code.

Send me a message if you need any help with it.

Conclusion

I really hope that you learned how to automatically add drop caps in a blog post.

If you had the same fun and happiness as I had when I managed to apply this neat feature, this tutorial had a great purpose.

Did you like this tutorial? Please, leave a comment or subscribe for more tutorials like this.

See ya!