WordPress Guy

WordPress Guy designs and develops WordPress themes and plugins. WordPress Guy teaches you WordPress stuff.

Initial CapAlso called initial letters, initial caps are enlarged characters that are used as the first letter of a paragraph. Initial caps can be in a different font, different color, or you could even use images instead! In this tutorial we’re going to learn how to create initial caps using special HTML markup, CSS styling, and then we’re going to automate the process with a PHP function.

The HTML

In order to style the first letter of a paragraph differently, we need to wrap it inside a special HTML element that we can later style by adding a few lines of CSS. For this tutorial I’m going to use a simple span element, with the “initialcap” class. The resulting paragraph will look like this:

<span class="initialcap">L</span>orem ipsum dolor sit amet, ...

Remember not to repeat the letter after the span ;-)

The CSS

Here comes the tricky part, due to the fact that every theme has different font size and line height values you’ll have to adapt this part to your theme. I’m going to assume that our paragraph has a font-size of 14 pixels and a line height of 18 pixels.

1. Float! We need to make our capital letter float left in order for the paragraph text to flow around it.

span.initialcap{
    float: left;
}

2. Font size. We assign it a font size of 40 pixels (again, this may vary depending on your theme’s CSS), and a line height of 35 pixels, which is twice the line height of the paragraph minus 1 pixel (just in case).

span.initialcap{
    float: left;
 
    font-size: 40px;
    line-height: 35px; /* Double the line height minus 1 pixel */
}

3. Extra styling. We’re going to use a serif font, make it blue, and add a little bit of spacing on the right.

span.initialcap{
    float: left;
 
    font-size: 40px;
    line-height: 35px; /* Double the line height minus 1 pixel */
 
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #2583ad; /* Blue */
    padding-right: 5px;
}

You’re probably going to have to play a little bit with the font size and line height values though.

Automation

Ok, so you’ve added the necessary CSS to your style.css file, but isn’t it a bit of a hassle to have to add the HTML markup every time you write a new post? Well, this bit of PHP code will do this for you:

function wpguy_initial_cap($content){
 
    // Regular Expression, matches a single letter
    // * even if it's inside a link tag.
    $searchfor = '/>(<a [^>]+>)?([^<s])/';
 
    // The string we're replacing the letter for
    $replacewith = '>$1<span class="capital">$2</span>';
 
    // Replace it, but just once (for the very first letter of the post)
    $content = preg_replace($searchfor, $replacewith, $content, 1);
 
    // Return the result
    return $content;
}
 
// Add this function to the WordPress hook
add_filter('the_content', 'wpguy_initial_cap');

How does it work? Basically, our function takes the content of the blog post, and wraps the first letter with our special markup.

All you need to do is paste it inside the functions.php file of your theme.

I hope you enjoyed this tutorial! Remember to post your thoughts and questions in the Comments section.

Get testking 642-832 training to learn how to create WP themes for your web project and become expert using professional testking 640-863 video tutorials and testking 640-553 study guides.

Comments

  • May 22nd, 2008 at 9:40 pm

    Why not just use the :first-letter CSS pseudo element?
    http://www.w3schools.com/CSS/pr_pseudo_first-letter.asp

    Works like a charm for me.

  • May 23rd, 2008 at 12:57 am

    Hey -
    Just ran across your blog. it is nice to see some different wordpress articles for once. So many of the wordpress tutorial sites out there just go over the same old stuff. Yyou got your self a new reader. If you ever want to write a tutorial for my site, let me know. Could get you some more readers.

    You might like to join in this discussion as well: How to make a more dynamic sidebar in wordpress?

  • ... How to Use Initial Caps in Your Theme ...

  • May 23rd, 2008 at 5:26 am

    Hi Wes!

    This is an excellent tutorial for maximum browser-support, but for newer browsers this can be done a little more simply.

    p.intro:first-letter { }

    This acts on the first letter of paragraphs with the ‘intro’ class. You still need to add the class attribute to your first P tag, which would be an excellent use of filters if you didn’t want to do it manually.

    Browser support is always a concern. I know this works on IE7 and Firefox, but I have no idea whether it works on opera or safari, unlike the tutorial here which works on absolutely everything.

    Can I also say, I love how this site is coming along. I’ve already directed people here a number of times for your tips. As you add more content this will definitely be a great wordrpess resource. Congratulations.

  • May 23rd, 2008 at 10:08 am

    @Milo: Thanks for the suggestion. I would definitely do it with pseudo-classes like you suggest, if it worked on every browser. I know it works on Safari, and probably Opera too… The big problem here is IE6 which is still used by 37% of the people. Maybe a couple years from now :-D
    And thanks for the compliments… I’m blushing ;-)

  • May 23rd, 2008 at 10:16 am

    @Danny: Thanks for the compliments! I’d definitely love to write a tutorial for your site… I’ll get in touch!

  • May 23rd, 2008 at 10:21 am

    @Dan Philibin: I believe IE6 doesn’t support a lot of pseudo-classes, I wish it would… would make my life much easier ;-)

  • May 23rd, 2008 at 10:31 am

    wow, lots of unmoderated comments, sorry for repeating what was already said ;)

  • June 1st, 2008 at 10:06 am

    ... vous souhaitez donner un peu plus de style “serif” à votre contenu, je vous conseille ce tuto de wpguy qui vous explique comment utiliser une lettre capitale de taille différente au début de vos ...

  • June 2nd, 2008 at 8:56 pm

    I’m not a super specialist but I think you’d better user ‘em’ instead of ‘px’ for your span attributes.

    PS : On my little blog, IE6- visitors are less than 17% vs 40% on IE7+. It’s a looooong debate between largest browser compatibility and adoption of web standards… Almost a religious choice ;-)

  • June 3rd, 2008 at 12:47 pm

    @Comme une image: Well, it depends on what you prefer to use… I didn’t want to have to explain the ins and outs of ems. But anyway… I guess the em values would be: font-size: 2.8571 em; line-height: 0.875 em; But I haven’t actually tried this ;-)

  • June 4th, 2008 at 9:07 pm

    The advantage with an ‘em’ sample is that it would be directly usable by any (of your reader), independently of them font size.
    But I swear, I’m not an em-integrist ! ;)

  • ... Créer une lettrine pour la première lettre de ses articles dans Wordpress ...

  • ... ya hablamos de palabras mayores (nunca mejor dicho) pues no solo vas a poder configurar el estilo CSS de un modo básico sino que ...

  • August 31st, 2008 at 11:06 pm

    ... How To Use Initial Caps In Your WordPress Theme: Now I use initial caps, but they’re already built into the theme I’m using, WP Guy shows how to do this with a bit of simple html and css code. ...

  • September 22nd, 2008 at 10:24 am

    Is this “initialcap” vs. “capital” really correct? In the PHP-Part of your code, you wrote:

    $replacewith = ‘>$1$2′;
    ^^^^^^^

    And in the CSS-Part:

    span.initialcap{…

  • February 8th, 2009 at 8:03 am

    I’m using initial caps and it works great, but I’m trying to use it with a site that has this CSS property for the “entry” class:

    text-indent: 40px;

    This text indent looks great in Firefox 3 when paired with initial caps, but in IE, Safari, and Chrome I find that it just indents the paragraph 40 pixels over after the initial cap, sort of defeating the whole point.

    Any ideas on this? Perhaps I could wrap the whole first paragraph in a with a that would tell it to cut the indent down to 0px? Problem is, I have no idea how to do something like that.

    Any help would be appreciate and, in necessary, compensated.

    • February 8th, 2009 at 8:09 am

      My comment above didn’t display correctly. What I meant to suggest was that the first paragraph could somehow be wrapped in a span class that would tell it to change the text-indent setting to 0px, just like you’ve shown me to wrap the first character in span class. Does that make sense?

  • ... all themes doesn’t have the same div-, p-, or whatever-classes for posts.  Then I found a guide at WordPress Guy that shows how to make those big capital, by easily inserting a <span>. You just have to ...

  • August 21st, 2009 at 8:03 pm

    Hey there, I’m working on a new version of my page right now and would really like to implement this function! It works like a charm already, except for one problem I have found: When a post starts with a image before the text starts, this doesn’t work for me.

    What happens is this:
    Text starts…

    So, when my post starts with an image, the span tags end up in between the two paragraphs (If that’s the correct name for tags)

    Any solution for this? Or have I done something stupid? :)

    Thanks, and by the way, thank you for a great site!
    // Jens.

    • August 21st, 2009 at 8:06 pm

      Ok, it stripped my code away! What happens is:

      First comes a p-tag.
      Then comes the image code img src and so on.
      Then comes the /p-tag.
      Then comes the span=”capital”-tags, both opening and closing one.
      After that a new p-tag comes.
      And then the text starts, without any initial cap.

      Hope you can understand it this way instead! :)

      • katarsis20032002
        May 24th, 2010 at 9:32 pm

        my post start with a picture and wp envolve this with a tags and the tags y tagged to pic

        you can change the php code to search the second paragrafh?

        thank!

    • August 21st, 2009 at 8:27 pm

      Don’t know what’s wrong with the comments but I can’t post the code… I’ll get in touch with you directly.

  • April 2nd, 2010 at 7:32 am

    That is very nice! Thank your for share.

  • April 22nd, 2010 at 5:08 pm

    Thanks - this works like a charm! There is just one thing: Within the functions.php, you name the span-tag “capital”, whereas it is called “initialcap” in the css style definition. I reckon this should be the same everywhere, so either “initialcap” in the css style or “capital” in the function.

  • ... an inital cap in the single post view (see wordpress guy for a HowTo – ...

  • April 5th, 2011 at 5:51 pm

    nice post its informative thanks for sharing

  • May 11th, 2012 at 4:57 pm

    It is still appreciated in 2012 ;)

  • December 31st, 2012 at 1:40 am

    I’ve created a Wordpress plugin to accomplish this for those who are interested:

    http://wordpress.org/extend/plugins/initial-letter/

    -Garrett

Your Comment