Gibni – The Prime

Dropcap First Letter, Universal Version

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:

_____

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.

_____

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

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

_____

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.

01:30 AM by Gi
Categories: Blogging, Web Development, Wordpress | Tags: Web Developpment, Wordpress | Leave a comment