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.

4 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…

    hi

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

    thanks

    philip

  4. On December 15th, 2008 Souren said…

    Hi,
    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:
    http://thepublicsphere.com/contact-us/
    They do not need drop-cap. But I couldn’t figure out how to disable it on those pages.

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=""> <strike> <strong>

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