On May 28th, 2008 milburn wrote…

Drop Caps Plugin

Last time, I was showing you how to create the cool drop caps on my blog. The only problem was that I was having to write extra mark-up into each post to generate the drop caps.

Extra mark-up is bad. It’s bad because if I wanted to change blogging platforms or even change theme I would have to go through every post and page and remove the HTML mark-up. Not really too difficult with only 4 posts to date but if I have a hundred or so posts in the future, it becomes a real pain.

The perfect solution would be to incorporate the mark-up in my WordPress template. Unfortunately I can’t do that because WordPress uses a template tag called the_content(), this only accepts a few variables to modify the “Read more…” link. I needed to come up with a better solution. A fairly simple solution would be to hack about with some other functions to create a modified the_content() template tag.

While this is a much better solution I don’t really like hacking the WordPress functions. Instead I decided to build a plugin. It sounds like rather a lot of work for applying a tiny bit of styling but it enables me to create an admin page where I can turn the drop caps on and off at the click of a button. Not only that but I can offer this wonderful plugin to the rest of the world using WordPress to create wicked drop caps.

My thanks go to the brilliant Ronald Huereca who wrote devlounges “How to write a WordPress plugin“. I used his code along with taking a peek at some other plugins.

I decided that while I was at it I would fix another issue with my blog theme. I use a first-child selector to choose the first paragraph of each post and make it bold. This breaks in several ways, firstly IE6 doesn’t support the selector and secondly The first paragraph is sometimes not a paragraph of text. It might be an image. To counter this my plugin also marks the first paragraph starting with a capital with a “first-child” class which I can use in my stylesheet.

My plugin can be downloaded from my plugins page and from the WordPress Plugin Directory Of course for those who don’t want to write their own CSS like me the plugin automatically adds it’s own stylesheet to your page.

You can leave a comment, or trackback from your own site.

13 Responses to “Drop Caps Plugin”

  1. On July 6th, 2008 Jackie said…

    Hey man, nice work with the drop cap plug-in with wordpress. However, i noticed that this plug-in only works english characters. Since I can speak Chinese, interested in making a Chinese version of it? btw i only have very limited experience with php, e-mail me if your interested. Cheers

  2. On July 17th, 2008 Cialiskl said…

    Nice Article

  3. On September 3rd, 2008 Anand "Schizo" Philip said…


    great plugin, am using it, but is there a way to turn it off in a specific post?



  4. On December 15th, 2008 Souren said…

    Thank you for the great plugin. We are using it on our online magazine The Public Sphere.

    We have two some sort of “problems” that I think can be fixed by some additional “Options” for the plugin:
    1. When a picture is placed at the beginning of the post drop-cap does not work any more. Is it possible to make it recognize the image and ignore it?
    2. The drop-cap is both activated on posts and pages. It is possible to deactivate it on pages in general, or deactivate it on certain pages? We have pages like this contact page:
    They do not need drop-cap. But I couldn’t figure out how to disable it on those pages.

  5. On April 23rd, 2009 Erin said…

    Thank you so much for this plugin. I do have one problem, similar to Souren’s: I’m using WP 2.7, which enables photo captions. Unfortunately, the plugin is currently making the first letter of my caption text large (e.g. http://costarica.com/wordpress/2009/01/14/monteverde-and-santa-elena/). I don’t have the faintest clue how to stop this from happening; any ideas? Thank you again!

  6. On May 31st, 2009 mario said…

    Hi Thomas!
    I like your work here with Drop Caps plugin…
    Have only one question or feature request..
    Is it possible to have Drop Caps at every single pharagraph?


  7. On May 31st, 2009 mario said…

    ok i got it! 🙂
    @ line 129:
    i just changed from 1 to desired number of pharagraphs that i want to drop caps affect! 🙂
    from $content = preg_replace($pattern, $replacement, $content, 1 );
    to $content = preg_replace($pattern, $replacement, $content, 10 ); or more
    so i changed the same thing @ line 139 and 149 too…

    still i have one question more…
    is it possible to use some images as a drop cap or at last (or even better) to use some other font than one in witch the paragraph is written?

    thank you though


  8. On May 31st, 2009 mario said…

    hello Thomas!
    again me!
    sorry but just realize that this Drop Caps Plugin doesent sustains eastern european characters..
    Can you please tell what i have to do to enable that!
    i sincerely hope that would be all from me @ least 4 today 🙂

  9. On June 1st, 2009 mario said…

    hmm i swear the last question i have after i saw it all!

    it is possible to exclude some pages also? ( for the more like portal type of sites i guess that would be big cool feature)


  10. On June 14th, 2009 Nikita said…

    Plugin is installed and activated. And I agree with Mario… It doesn’t work with Cyrillic texxt. Nothing happens.

  11. On July 9th, 2009 Mark said…

    Superb plugin – very clever how you have added the ‘span’ to make sure the first letter of all posts is captured in case there is an image there (which was the problem I was having)

    Thanks again, bookmarked your site 😉

  12. On December 20th, 2009 Ahmed Irfan Shafqat said…

    How is it possible to change the colour of the first letter from black to, say, red?

  13. On January 4th, 2010 Amy said…

    Hi, awesome plug-in, but how can I change the font/font-family? Inserting “font-family: Verdana” doesn’t do anything.

Leave a Comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Proudly powered by WordPress with plane theme by me! | © 2007 - 2021 Thomas Milburn | Valid CSS and HTML