Rodney Campbell's Blog

DropCap First Character WordPress Plugin

by 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.

Related posts:

  1. Enhancing a WordPress Blog with Themes, Plugins and Widgets
  2. Choosing a Blogging Software Package
  3. Welcome to the Blog
  4. Having problems with Internet Explorer 7 visiting certain sites?
  5. OpenSolaris Fun on an Ultra 24 WorkStation…

112 Comments for this entry

186 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!

Blogroll

A few highly recommended websites...

Archives

All entries, chronologically...