November 25th, 2009 by TKBB

Modifying the WordPress Drop Caps plugin

Drop it low {littleboxofideas.com}

{littleboxofideas.com}

In an effort to jazz up the site, TKBB has added drop caps to the first letter of every post. Usually, drop caps are manually inserted into the code via a simple CSS addition and a few characters of HTML code. The implementation either uses a span or an image. However, in the case of WordPress, it’s easier to use a plugin – in this case the Milburn Drop Caps plugin. Essentially, the plugin finds the beginning of a paragraph and inserts the CSS styling to the first character. The default is to produce a drop cap with shadow effect on posts, pages, comments, and search results of your choosing. However, despite an option to disable styling on attachments, the drop cap still shows in attachment text (such as captions) when it is marked not to. TKBB has a caption before the main text 90% of the time. Luckily, with some trial-and-error, it is possible enable functioning drop caps for such a scenario using the WordPress plugin.

  • Find the plugin file to edit. In the WordPress admin panel, go to Plugins->Editor->Drop Caps and select ‘drop-caps/wp_drop_caps.php’. Next, scroll 1/2 way down and find the function that searches for the first paragraph <p> tag

  • Look for: function the_content_filter($content = ”) {

  • Replace:

    • $pattern = ‘/<p( .*)?()??( .*)?>((<[^>]*>|\s)*)((&quot;|&#8220;|&#8216;|&lsquo;|&ldquo;|\’)?[A-Z])/U’;

    with:

    $pattern = ‘/<p>?([A-Z])/U’;

  • Now, the function will find the first normal <p> tag. However, we still must alter the code for the $replace variable. Find and replace:

    • $replacement = ‘<p$1$4>$5<span title=”$7″><span>$7</span></span>’;

    with:

    $replacement = ‘<p class=”first-child”> <span title=”$1″><span>$1</span></span>’;

  • Now, the function will properly insert the drop cap given the change to the search pattern.

  • To properly display the drop caps on excerpts, look for the_excerpt_filter function. Some themes, such as this one, add a space after the excerpt <p> tag. So, add the corresponding HTML character number, which is &#32. The final result will look like:

    • $pattern = ‘/<p>((&quot;|&#32;|&#8220;|&#8216;|&lsquo;|&ldquo;|\’)?[A-Z])/’;

  • Tweak the CSS margins, add some padding, or change the font and you’re all set.

    • Posted in Technology | No comments
    You can leave a comment for this post.

    Leave a comment