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.

Don't forget to Share...Share on Google+Share on FacebookTweet about this on TwitterShare on LinkedInPin on PinterestEmail this to someonePrint this page

Loading Facebook Comments ...

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!

Copyright © 2013 Rodney Campbell

Images contained on this web site may not be used or reproduced in any way without prior permission.