Feb 01

Decorative Caps

You can see this plugin in action right here at the beginning of this post. Notice how the “Y” is a fancy image of a “Y”? This is a plugin that I call Decorative Caps and is now available for download.

Update September 1, 2007: Version 1.1 has been released. The major change in this version is that an options page has been created to allow the user control over the CSS styling of the image (height, width, padding, etc.), specify a CSS class if you want to use a class from your stylesheet instead of the plugin settings, and specifying whether you want to use the decorative cap only on the post pages or on the front page as well.

Update September 4, 2007: Version 1.2 has been released. A minor change in the options page allows for a bit more control over where the decorative caps appear on your blog (home page, individual posts, individual pages).

Installing and using is very easy:

  1. Download Decorative Caps
  2. Unzip the file into your wp-content/plugins folder (this will create a directory called “scs-decorative-caps” which contains the plugin PHP page and the folder with the image files in it)
  3. Activate the plugin and view the results on your site!
  4. (New in version 1.1) Use the “Decorative Caps” options page in your admin interface to control the CSS styling of the image and specify some other options as well.

The image files that I used are from Leo’s Icon Archive (click on “Decorative Caps” on the left-hand side when you get there), and are freely available. If you wish to use different image files, the only specifications to work with this plugin would be:

  1. Image must be square in dimension (equal width and height)
  2. Image width and height must be at least 35 pixels, to avoid any degradation of the image (if you use a smaller image, make sure that you specify the correct dimensions in the options)
  3. Image names must be single lower-case letters followed by “.gif” in all lower-case (i.e., “a.gif, b.gif, etc.”)

Simply replace the images in wp-content/plugins/scs-decorative-caps/images with your own image files and the result will be immediate.

Note: This plugin does some very rudimentary checking to make sure that the first character is really an alpha character. It’s by no means perfect, and I have observed the following behavior:

If the first element is the start of a tag (for example <p>), the code looks to the first character beyond that. However, if the first character is a space, or if the first character beyond the opening tag is another tag, the plugin stops trying to find an initial letter in that particular post.

I’m not precisely sure how best to figure in all the possibilites. But this should work fine for you if you generally start your post with text (or at best an opening paragraph tag). Any thoughts?

  1. Nice Plugin…But is there anyway to escape from the decorative cap??? I see only one way…by using two tags intially…is there any other way??

    Comment by Praveen J — May 15, 2007

  2. Praveen, you mean on a post-by-post basis? The only way I can think of would be to put an empty tag at the start of the post html (like “<a></a>”), which is maybe what you were referring to.

    Give me some ideas, though. What would be a way you would like to see this work?

    Thanks for the feedback.
    steve :)

    Comment by Steve Sensenig — May 15, 2007

  3. Thanks Steve!
    I am using it in our online free travel magazine…great!
    Luca

    Comment by Luca — May 19, 2007

  4. Looks good, Luca! Thanks for the comment.

    Comment by Steve Sensenig — May 19, 2007

  5. Now I am using it also in my girlfriend’s blog!
    Thanks!

    Comment by Luca — May 22, 2007

  6. Hello
    I tried to use your Plugin but I got the error message:
    Fatal error: Call to undefined function: ctype_alpha() in /home/www/paleografia/wordpress/wp-content/plugins/scs-decorative-caps/scs-decorative-caps.php on line 37

    I’m using Wordpress 2.2

    Comment by Jose — June 20, 2007

  7. Sorry, didn’t finish the comment.

    Could you help?
    Thanks

    Comment by jose — June 20, 2007

  8. jose, can you find out what version of PHP your host is running? That is a PHP function and not a WordPress one. If you send me the URL to your blog, I can try to find out the necessary information.

    Thanks for the heads up!
    steve :)

    Comment by Steve Sensenig — June 20, 2007

  9. Hi! I really like the decorative caps look, but I was wondering if there is anyway to get the caps to recognise an indent? II’m planning the setup the entries and stories I write with a book/pararapgh look…. and if Icould figure out the indent wooho… if not, I probably won’t be using this nifty plugin. Thanks. =)

    Comment by Samantha — August 1, 2007

  10. Samantha,

    Thanks for the question. Are you simply needing the image to have an indented look to it?

    Unfortunately, I haven’t yet gotten the hang of creating a page where you can control features of the plugin, but I’d be happy to customize it for you, or help you learn how to customize it yourself.

    Additionally, I believe that there are ways to edit your stylesheet in order to automatically indent the first line of a post, which would function separately from this plugin, yet should not interfere with it at all.

    If I can be of more help (or if I haven’t totally lost you in this and you need more assistance), feel free to post here again or email me directly.

    Thanks!
    steve :)

    Comment by Steve Sensenig — August 1, 2007

  11. Actually, i figure out how to do the above by editing the css style of the image in the plugin @ wp-content\plugins\scs-decorative-caps\ in the scs-decorative-caps.php

    If you add a margin-left with a specified width (ex. margin-left: 2em;) which would simply push the image and the text over.

    A second method would be to add along with the margin-left, to change the float from left to none (ex. float: none;) That puts the image on the same line as the first sentence and forces the rest of the text below it.

    I’m currently not using it as it looked a bit funky. Lol. But at least I know how to alter it if I need to. It was a plus side that your coding in the plugin was so clean and concise. Once I fount the ” style= ” I knew immediately what i could and could not do. I’ll probably be playing with it in the future to see if I can get the look I want. (Storybook like)

    I have a funny feeiling that I’ll probably jsut drop the indenting and design the same images in larger squares. **shrugs** We will see.

    Thanks again.

    Comment by Samantha — August 1, 2007

  12. Ick. Sorry about the bad typing/mispells/grammar in the above entries. I’m a bit tired. Just realised how bad it was when i reread it. Lol.

    Comment by Samantha — August 1, 2007

  13. Samantha,

    Glad you figured it out! :) If you need anything else, let me know.

    steve :)

    Comment by Steve Sensenig — August 2, 2007

  14. Great plugin, although I’m noticing a bit of a bug. Not sure if it’s specific to my template, but I notice that when viewing older archived posts, or posts by category, the drop cap isn’t showing up, and I’m left with a missing first letter on all the older posts! Check out my site to see what I mean:
    http://www.internationalhistoryclub.com

    If anyone knows a fix for this it would be greatly appreciated!
    thanks!

    Comment by Chris — August 22, 2007

  15. Chris,

    Thanks for the comment. I’m glad you like the plugin, and I like the look of the letters you’re using on your site.

    I wasn’t able to find one showing the problem you described on your site, but I have experienced my own problems under the following circumstance, which might be what you’re dealing with, too:

    When a page prints an excerpt from a post, all images are stripped from the excerpt, which includes the decorated cap.

    To date, I have been unsuccessful in finding out how to determine in my plugin whether or not it’s being called by an excerpt rather than a complete post. If I could determine that, I would then skip the replacement of the letter with the image.

    If anyone else knows how to do this, please let me know! :)

    Comment by Steve Sensenig — August 22, 2007

  16. hi steve

    First of all, congratulations, very nice plugin, simple and efficient ; )

    I would like to ‘avoid’ the plugin in my homepage, so I ask you, is there a way to apply the plugin only in the posts? I have thought to use a php conditional if (is_home()) or something like that, but I didn’t know exactly where should I use it …

    Thanks!
    Marco.

    Comment by Marco — August 31, 2007

  17. Marco,

    Thank you for your kind comments. And you are correct that is_home() will allow you to bypass it.

    All you have to do is edit the plugin file and insert the following code right before the first line of the function (after the function declaration):

      //skip if homepage, not individual post
  if(is_home()) {
      return $text;
  }

    Someday, I hope to have an options page for this plugin, and this would be a great option to have available. Thanks for the idea!

    Comment by Steve Sensenig — September 1, 2007

  18. [...] For more information and to download the plugin, visit the plugin’s page. [...]

    Pingback by Decorative Caps Version 1.1 Released : Plugins by Steve — September 1, 2007

  19. Marco (and Samantha, this applies to you, as well!)

    I have, based on your great ideas, released version 1.1 of this plugin, which now has an options page!

    For Marco, there is the option of telling it to skip the home page. (More accurately, tell it to use the plugin “only on post pages” rather than “on home and post pages”)

    For Samantha, a way to tweak the padding on all four sides of the image via the options page!

    Download the new version now (from the same download link…the zip archive has been updated)

    Thank you all for your great comments about this plugin. Keep the comments and suggestions coming.

    Comment by Steve Sensenig — September 1, 2007

  20. Hi Steve!
    Yes, the plugin works ok with the admin page!
    It would be good if the plugin could be applied to pages too.. I did a “crack” commenting the following lines
    if(is_page()) {
    return $text;
    }
    … but of course an ‘official’ option to control it would be better ; )
    Another thing, within the zip file I downloaded there were two .php files, one of them appears to be the old version of the plugin (it’s inside the folder).
    Well, congratulations, nice job!
    Marco

    Comment by Marco — September 4, 2007

  21. Marco, good point! I’m not sure why I left “page” as a hard-coded skip. Version 1.2 is now available for you to download.

    It is best if you deactivate it and then reactivate it to get the options set properly. Otherwise, the caps may not show up at all until you go to the options page and check some of the boxes for where you want the caps to appear.

    Three options appear now for “Use Decorative Caps On…” and they are checkboxes (home, page, individual posts). I hope that makes sense.

    When you activate the plugin, all three of them get checked, so you’ll need to go in and uncheck “home page” to accomplish what you wanted to do before.

    Thanks again for the great input!

    steve :)

    Comment by Steve Sensenig — September 4, 2007

  22. Hi Steve!
    The release 1.2 appears unbeatable ; )
    I did as you said, deactivating and reactivating the plugin. Re-start from zero is always the better procedure when working with computers…
    Well, no more ideas at this moment. I insist to say, congratulations, nice job, a plugin simple and efficient!
    Marco.

    Comment by Marco — September 4, 2007

  23. Hi again, Steve!
    I’ve found a little problem.
    In my Search Results page, the first character of each post doesn’t appear (nothing – image or character).
    Not sure, but seems that is because the Search Results page has a “special life”… it is not homepage, nor post, nor page…
    Maybe you could consider to include a if (is_search())… and another checkbox in the options page ;)
    Thanks,
    Marco

    Comment by Marco — September 10, 2007

  24. Marco, you are by far the best source of feedback for this plugin! I appreciate it very much.

    This problem you’ve identified is something I mentioned elsewhere in this post, regarding the_excerpt(). I can’t, for the life of me, find out how to determine if the_excerpt() is being called. the_excerpt() strips all HTML tags, but after the plugin has already stripped the first letter.

    For the time being, I should probably hard code to avoid this plugin if it’s a search result (I didn’t know about is_search() — is that a real WP function?). Or, you can use The Excerpt Reloaded plugin and tell it to allow img tags in excerpts, but I haven’t tried that yet.

    I guess what would be best overall is if I give the option to use dec caps in excerpts (the other checkbox that you’re dying for me to add! ;) ) and find out how to force the_excerpt to allow images if that option is selected…

    Stay tuned! I’ve got a lot going on right now, but will try to get to the bottom of this.

    Thanks again for all the feedback. You are a plugin author’s best friend! :)

    Comment by Steve Sensenig — September 10, 2007

  25. Hi Steve!
    Unafortunately, this afternoon I have noticed that problem not only in Search Results page, but in every page in which are a list of posts.
    In that pages I don’t use the_excerpt(), but the_content(), that displays the text block defined by me with the –read more– feature. Well, I don’t know if wordpress runs it differentely than the_excerpt()… maybe the problem would appear in both cases :P
    I don’t know much about php and wordpress, but yes, there is a function is_search(). I have used it once I needed to apply some specific style changes to my search results page.
    The is_home() is working ok with the list of posts in homepage, so I think a is_search() would work too… but I don’t know what could be done for the other pages with lists of posts, like a Monthly Archive or an Author Archive. Maybe exist functions like is_archive()… ;)
    Nice if I help you a bit with my feedbacks and comments, and sorry for my foreign english speaking ;)
    Marco

    Comment by Marco — September 11, 2007

  26. Hi, Steve:

    I’ve seen the same problem with the missing first letter as Chris (#14) and Marco (#s23 and 25).

    Any luck in fixing the problem yet? I REALLY want to use Decorative Caps, but it looks a little “messy” with the missing cap.

    Comment by George — June 13, 2008

  27. George, I’m sorry it took me so long to respond here. I’ll email you, too, just in case.

    The “solution” I have found (workaround, so to speak) is to use another plugin to control display of the excerpt.

    The other plugin is called “the_excerpt Reloaded” and can be found here.

    That plugin allows you to modify the_excerpt to allow img tags, etc. and has worked for me in displaying the first letter properly in an excerpt of a post.

    Someday, I hope to be able to figure out how to detect if an excerpt is being displayed, but as of right now, I can’t figure out how to do that. I’ve got some weird ideas, though…

    Comment by Steve Sensenig — July 20, 2008