jay_wp

It’s incredible to see how powerful CSS can be! I tried :first-child and :nth-child selectors (selecting .post then the article element as an alternative), and it seems to be working like a charm! Not sure if this method might cause any problems down the road (other than the older browsers issue) but I think I will go with this option. Thank you all for your guidance.

Following from my post above, I guess I should also ask why the CSS approach would not be possible. I’m guessing it’s related to the dynamic nature of the platform and not being able to select the latest post (and few earlier ones) through HTML structure of the theme.

As per your advice, I changed my index.php page as below. Does it look ok? Thanks a lot again for your help.

<div id="primary" class="content-area">
		<div id="content" class="site-content" role="main">
		<?php if ( have_posts() ) {
			 while ( have_posts() ) {
			    the_post();
			    if( $wp_query->current_post == 0 ){
			        get_template_part( 'content', 'style1' ); //loading content-style1.php file
			    }
				elseif( $wp_query->current_post > 0 && $wp_query->current_post < 4 ){
			        get_template_part( 'content', 'style2' ); //loading content-style2.php file
			    }
				else{
			        get_template_part( 'content', get_post_format() );
			    }
			    $wp_query->current_post++;
			    }
			    twentythirteen_paging_nav();
				}
				else{
			    get_template_part( 'content', 'none' );
				}

		</div><!-- #content -->
	</div><!-- #primary -->

@ghanshyam, thanks for your clear response. I will give it a try later today.

@wp Gurus, thanks for the short cut. I can try it especially for learning purposes but I couldn’t get my head around how I can check the value of $wp_query->current_post in Ghanshyam’s code? Where exactly in his code should I place that?