«

»

Print this Post

Styling first paragraph of posts

If you look at the first paragraph of this post, you can see that it is slightly different from the rest of the entry in terms of style. It has a different font, colour and the size is bigger than usual.

This is one of the recent changes I’ve made in this site. Actually, I got inspired by Syahir’s website. At first, I thought it would be difficult implement that idea here. Then I got to know that there is nothing to deal with theme function! I can do this with a few lines of CSS and the rest things will go with writing posts.

Well, here is the trick. First I added this to my style sheet.

.firstp {
font: 16px/21px Georgia;
    color: #573428;
}

Then, while writing posts, I just assign firstp class to the first paragraph. i.e <p class="firstp"> My first paragraph </p>.

Isn’t it cool? It is easy too! Try it yourself in your site, and show me your customizations.

Bonus: Short code

If you think it is difficult to add firstp attribute each time while writing posts, you can create a short code for that by adding this to your (child) theme’s functions.php file.

// short code for first paragraph
function firstpara_shortcode( $atts, $content=null, $code="" ) {
    return '<span class="firstp">' . $content . '</span>';
}
add_shortcode( 'firstpara', 'firstpara_shortcode' );

Here firstpara is the short code. So, just wrap your first paragraph with [firstpara] short code and it will take care of the rest things.

Example: [firstpara]This is the first paragraph of my weird post. Lorem ipsum dolor sit amet, consectetur adipiscing … .. .. elit. Donec nisi[/firstpara]

Note:

Beware that your first paragraph may not visible in excerpt if you use shortcode. So, I strongly recommend you to use P class attribute instead.

Short Link:

About the author

Prasanna SP

Student | WordPress Dev | Tech Blogger | Interested in GNU/Linux, FOSS, PHP, Drupal, WordPress, Ethical hacking, Photography, Painting, Literature etc..

Permanent link to this article: http://www.prasannasp.net/styling-first-paragraph-of-posts/

9 comments

Skip to comment form

  1. Tanya Demjanec

    A great idea for adding a little customized style — without a lot of hassle.

    Thank you, Prasanna!!!

    Best,

    -Tanya

    1. Prasanna SP

      Thanks Tanya! ๐Ÿ™‚

  2. Luko

    Nice,
    it can be applied in other themes also,
    Thanks for sharing PHP code, works great!

    1. Prasanna SP

      Yes, it works with other themes as well.

      Thanks Luko!

  3. Richard

    A very nice styling trick ๐Ÿ™‚

    Thankyou for leaving a comment on my site, it got me to have a look here, and I’m finding a few interesting tweeks that I can incorporate.

    Richard ๐Ÿ™‚

    1. Prasanna SP

      Thanks for your comment Richard!

  4. Ahmed

    Hey

    I am willing to change my current theme to Graphene and I am also willing to change its default post font to Book Antiqua or Georgia. How could I do this change.

    Regards
    Ahmed

  5. Ahmed

    Hi

    How can i change the whole post to Georgia from default font style? plz help

    Regards
    Ahmed
    http://icabtutorial.com

    1. Prasanna SP

      Hi Ahmed! To change content text font to Georgia, go to Graphene Options –> Display –> Text Style Options and put georgia in Content Text –> Text font

Leave a Reply

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

Please put your code snippet between <code> and </code>. Comment moderation is in use. Please do not submit your comment twice -- it will appear shortly.

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close