Dropcap First Letter, Universal Version

By | 19/10/2008

As you can see on Gibni.com, articles’ title have got a drop capped first letter.

I’m making this technique available to the public so that you can “Drop cap” any text you wish.

You can drop cap in WordPress or on any other platform where you can run PHP functions.

I’ll explain on how to Drop cap in WordPress without installing any plugin.

I’ll keep it simple; just open the “functions.php” file in your theme directory, and add this function to it:

—Code—Functions.php—

function dropcap_first($content) {
$pos = strpos($content, ‘<a>’);
/* stripos is only available in new PHP versions we’ll  */
/* live with using the case sensitive version so it won’t match <A> */
/*     $pos = stripos($content, ‘<a>’); */
if (($pos !== 0) || ($pos === false)) {
echo ‘<p class=”dropcap-first”><a href=”‘.get_permalink().'” rel=”bookmark” title=”Permanent Link to ‘.the_title_attribute(‘echo=0’).'”‘. $content .'</a></p>’;
} else {
echo ‘<p class=”dropcap-first”><a href=”‘.get_permalink().'” rel=”bookmark” title=”Permanent Link to ‘.the_title_attribute(‘echo=0’).'”‘ . stristr($content, ‘>’).'</p>’;
}
}

—END—Code—

Now that you have added the function, you should supply the text you want to drop cap to this function

Here’s a briefing about internal items of the function:

_____

int strpos ( string $haystack , mixed $needle [, int $offset ] )

Returns the numeric position of the first occurrence of needle in the haystack string. Unlike the strrpos()

before PHP 5, this function can take a full string as the needle parameter and the entire string will be used.

_____

int stripos ( string $haystack , string $needle [, int $offset ] )

Returns the numeric position of the first occurrence of needle in the haystack string.

Unlike strpos(), stripos() is case-insensitive.

_____

string stristr ( string $haystack , mixed $needle [, bool $before_needle ] )

Returns all of haystack from the first occurrence of needle to the end.

_____

Now proceed to formatting the drop cap letter by CSS. Here I’ve defined a new class, named “dropcap-first” and here’s the CSS I’ve written for it:

—Code—Style.css—

.dropcap-first:first-letter {
color:#900;
float: left;
font-size:50px;
padding-right:2px;
font-family:Arial, Helvetica, sans-serif;
}
.dropcap-first {
font-size:26px;
font-family:Arial, Helvetica, sans-serif;
color:#036;
font-weight:bold;
text-decoration:none;
margin:20px 0 0px 0;
}

—END—Code—

After having added the CSS to your main style sheet, you should provide the text you want to Drop cap to the function, for example, here’s what I did for the articles’ titles:

—Code—Index.php—

<div class=”post_title_wrap”><?php $get_title_todropcap=the_title(‘<a>’,'</a>’,FALSE);
dropcap_first($get_title_todropcap); ?>
<small><?php the_time(‘j,M, y’) ?>
<span class=”comments”> | <?php comments_popup_link(‘Be the first to comment’, ‘1 Comment’, ‘% Comments’ , ‘Comments Disabled’); ?></span>
<span> | written by: <?php the_author() ?></span>
</small>
</div>

—END—Code—

Once you apply the above procedure, you can get the first letter of the supplied text, dropcapped.

If you have trouble understanding the function, do leave a comment and I’ll explain you what is going on in the function.

Category: Blogging Web Development Wordpress Tags: ,

About Gi

I love new technologies and try to use them in my everyday life. Since many years ago, I write about these technologies, and provide solutions to the issues people might get using the new world. I tested and experienced the solutions I provide. I love helping people, and that's why my publications have been free until now.

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge