Home Articles How to use initial caps in your WordPress theme

How to use initial caps in your WordPress theme

2005
30
SHARE

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:

Lorem 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 = '/>(]+>)?([^$1$2';
	
    // 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.

30 COMMENTS

  1. 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?

  2. 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.

  3. @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 😀

    And thanks for the compliments… I’m blushing 😉

  4. 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 😉

  5. @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 😉

  6. 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 ! 😉

  7. 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{…

  8. 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.

    • 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?

  9. 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.

    • 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! 🙂

      • 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!

  10. 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.

Comments are closed.