How to change style of the first paragraph in WordPress posts

You have probably noticed that some magazines (printed as well as online ones) use different styles for the first paragraph of their articles. Whether the text is slightly bigger, it uses different font or is displayed in a different color, this is used to separate that first paragraph which represents an introduction into the article.

Since you can’t do that “out of the box” with WordPress, you will have to introduce the feature by yourself. But don’t worry; changing the style of the first paragraph is relatively easy and quite fun since you get to choose how that paragraph will look like.

Before you can play around with font changes and the way your article looks like, you will have to prepare your WP theme for the job:

  1. Open functions.php file
  2. Copy and paste the following function:
  3. function different_first_paragraph ( $content ) {
    return preg_replace( '/<p([^>]+)?>/', '<p$1 class="highlight">', $content, 1 );
    }
    
    add_filter( 'the_content', ' different_first_paragraph ' );
  4. Save changes

WordPress is now ready to recognize and separate the first paragraph from the rest of the content and you are ready to style the paragraph. Function you have just used recognizes the first paragraph and adds a “highlight” class to it. If, by any chance, your theme already uses the same class name for something else, you can change the class name to anything you want but don’t forget to change it throughout all the code in this article.

If you’re ready to style your first paragraph, follow the next steps:

  1. Open style.php file
  2. Copy and paste the following or create your own style:
  3. p.highlight {
    font-color: blue;
    }
  4. Save changes

We will leave styling to you. You can do only a small change like changing the color or the size of font in the paragraph or you can do much more complicated CSS styles if you want to. Take your time and test out several styles until you find the one to your likings.

START YOUR OWN BLOG

This guide is an introduction to mastering the art of blogging. It provides easy to follow steps to start, maintain, and grow your blog.

Read the guide

Leave a Reply

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