Code — Auto Drop-cap For Thesis And Other WordPress Themes

With Thesis you can turn every first letter of the post to a drop cap. There are two ways you can do it. First is to go the official way and include the first letter like so:

.custom .entry-content p:first-child:first-letter {
font-size: 3.571em; line-height: 0.76em; padding: 0.04em 0.12em 0 0;
color: #888; float: left;
}

However if you have a pretty large and old blog, it will be humanly impossible to go in after each post and edit it to include the above the above code and implement a drop cap effect. One way around it is to use a regular expression and do a “find and replace” on the database.

Or else, magic… The following code automatically turns the first letter of each post into a drop cap. Place this into your custom.css (or style.css if you are not using the Thesis theme).

.custom .entry-content p:first-child:first-letter {
font-size: 3.571em;
line-height: 0.76em;
padding: 0.04em 0.12em 0 0;
color: #888;
float: left;
}

As always feel free to play around with this code till you get the effect you want. This works on most standards compliant browsers like Firefox, Seamonkey and Google Chrome. This works on Internet Exlorer 8 too but breaks the layout. And if you are looking for a free copy of Thesis WordPress Theme, you can save $87 and get it here.

Posted In:

WordPress Support & Maintenance, Code Snippets, Thesis WordPress Theme Framework

11 Comments

  1. Vasu: Thanks for pointing it out. Was a 404 on several other posts too. Fixed now.

    Reply
  2. Hey! This is awesome, but with copied/pasted code into my custom theme, it’s turning ALL the first letters in each paragraph into drop caps (as opposed to just the first letter of the whole post). Any way to fix this?

    Reply
  3. Whoop. I’m a liar – some extra divs snuck in there.

    However, if you put an image at the very top of the post – before any text – the code doesn’t work.

    Reply
  4. Jeff: Yes, if an image is the first child of the paragraph then this may break the look. You can try to place the image outside the paragraph.

    Reply
  5. This doesn’t work for me. It creates the drop caps in the homepage with the excerpts but on the posting pages, it doesn’t do anything. Any ideas? I’m on 1.8.

    Reply
  6. Hi, thanks for the tutorial. I’ve been able to get the drop caps working however they are being applied to blockquotes as well as the initial paragraph.

    Any idea how I could stop this from happening?

    Reply
  7. It doesn’t work for me either in Thesis 1.8 🙁

    Reply
  8. Its works great. What if I wanted to exclude teasers? what change would I make to the code? Any ideas? looking to get pointed in the right direction, Thanks!

    Reply
  9. Hi, i used the second code and it works great. The problem is, once the post is preceeded with a photo, then the dropcap does not work. It only works if there´s no photo before the first letter. What is the fix? Thanks. 🙂

    Reply
  10. This is what i’ve looking for so long. Tnx boss u saved my life. Works like a charm……

    Reply

Comment on Code — Auto Drop-cap For Thesis And Other WordPress Themes

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