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.

Follow these topics Graphene, WordPress

Short Link: