Rodney Campbell’s Blog

DropCap First Character WordPress Plugin

by Rodney.Campbell on Jul.27, 2006, under Technology

OK – I've written my first WordPress plugin – it is incredibly simple and VERY short but it does the job none-the-less. The plugin is called dropcap_first and is available for download if you so desire.

What it does is it makes the first character of the post BIG in a magazine style. I got the idea (and most of the CSS code) to do this from an article called Magazine Style CSS Drop Caps and then it was just a matter of writing the relevant PHP code to do what I wanted.

Current Version Download: dropcap_first plugin

Installation:

  • download the latest version the plugin (above).
  • upload the entire plugin folder to your wordpress plugins folder (wp-content/plugins) on your server.
  • activate the DropCap First Character plugin in WordPress Plugins administration tab.

The plugin consists of two files. The PHP file (dropcap_first.php) which does the work (the important code is below):

function dropcap_header() {
    echo('<link rel="stylesheet" type="text/css" media="screen" xhref="' . get_bloginfo('wpurl') . '/wp-content/plugins/dropcap_first/dropcap_style.css" />');
}

add_action('wp_head', 'dropcap_header');

function dropcap_first($content='') {
    $pos = stripos($content, '<p>');
    if (($pos !== 0) || ($pos === false)) {
        return '<p class="dropcap-first">' . $content;
    } else {
        return '<p class="dropcap-first"' . stristr($content, '>');
    }
}

add_filter('the_content', 'dropcap_first', 7);

and a stylesheet file (dropcap_style.css) which defines what the character will look like and uses the :first-letter pseudo element to limit the effect to the first character of the post.

p.dropcap-first:first-letter {
color: #D4D4C7;
float: left;
font-size:80px;
line-height:60px;
padding-top:4px;
padding-right:5px;
font-family: Times, serif, Georgia;
}

If you wanted to change what the first character looked like (the colour, size, font, etc) then you just need to adjust this stylesheet entry. If you like the look of this you can add it to your own WordPress blog by downloading the dropcap_first plugin and installing it as per usual – this plugin requires no other manual edits to work.

Share and Enjoy:
  • Twitter
  • Digg
  • Technorati
  • del.icio.us
  • StumbleUpon
  • Reddit
  • Slashdot
  • BlinkList
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • Add to favorites
  • Print

99 Comments for this entry

« Older Comments

146 Trackbacks / Pingbacks for this entry

Leave a Reply

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Visit our friends!

A few highly recommended friends...

Archives

All entries, chronologically...