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

January 20, 2010

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.

 

Join 37,807 others and get free tutorials & tips on design & development using Wordpress on, Thesis & Genesis!

Need help with Wordpress, Thesis or Genesis?

Are you a designer or a developer looking for a hand with Wordpress, Thesis or Genesis? Or perhaps want to save time with a project? Get in touch and let's get the ball rolling! Check out our Thesis development, PSD to Thesis & other services.

{ 10 comments on Code — Auto Drop-cap For Thesis And Other WordPress Themes… read them below or add one }

Vasu January 21, 2010 at 8:28 am

the link shows a 404 page …

admin January 21, 2010 at 12:00 pm

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

Jeff March 5, 2010 at 2:54 pm

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?

Jeff March 5, 2010 at 3:06 pm

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.

Shivanand Sharma March 5, 2010 at 5:01 pm

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.

Richard January 17, 2011 at 12:52 pm

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.

Matthew March 28, 2011 at 4:19 pm

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?

DP April 27, 2011 at 11:47 pm

It doesn’t work for me either in Thesis 1.8 :-(

Joseph November 14, 2011 at 1:00 am

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!

Glee November 29, 2011 at 2:27 pm

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. :)

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

You can add images to your comment by clicking here.

Previous post:

Next post:

X

Wordpress, Thesis, Genesis tutorials from Binary Turf — one tutorial a day. Subscribe & sharpen your web design skills.

Name:

Email:

We respect your email privacy.