Hi jay_wp,
Make 2 files content-style1.php(you can choose another name) and content.style2.php, similar to content.php.
The first file is used for styling your first post, second one is used for styling other 3 and for others we can use our regular file.
Now, modify your above code and make it like this:
<?php
if ( have_posts() ) {
/* The loop */
$i = 0;
while ( have_posts() ) {
the_post();
if( $i == 0 ){
get_template_part( 'content', 'style1' ); //loading content-style1.php file
}elseif( $i > 0 && $i < 4 ){
get_template_part( 'content', get_post_format() ); //loading content-style2.php file
}else{
get_template_part( 'content', get_post_format() );
}
$i++;
}
twentythirteen_paging_nav();
}else{
get_template_part( 'content', 'none' );
}
?>
I hope this helps.
Cheers 🙂
Instead of creating a new variable you could also check the value of the $current_post property in the global $wp_query object. For instance in the code provided by Ghanshyam Khanal you could check the value of $wp_query->current_post instead of creating a variable $i and checking its value.
Thread Starter
jay_wp
(@jay_wp)
@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?
Thread Starter
jay_wp
(@jay_wp)
Hi again, while I try to implement the solutions suggested, I’ve wondered why this cannot be done simply with CSS. Not sure if and how this is possible but I’m just wondering if there is a way to select the first post and the next three (or four) posts on the home/front page and style them on the style.css. Is this possible? What do you think? Thanks.
You can do this SO much simpler using CSS only, no coding necessary, HOWEVER, it is a CSS2 technique, which while it’s been around quite a while, still doesn’t work in *very* old browsers. If that’s not an issue, just use this technique.
http://www.w3schools.com/cssref/sel_firstchild.asp
Basically what you do is first look at the source for a Page that has your post listings on it to be sure WHICH Class, but generally speaking when WP returns results from the loop, each Post has a class of “post” (sans quotes of course).
SO you look in your CSS for THAT class style selector, copy it, paste it back into your stylesheet and add :first-child to the newly pasted selector, then change the styles in the brackets {} to suit your needs.
So you’d wind up with something similar to this:
.post {normal post styling here}
.post:first-child {special styling here}
Thread Starter
jay_wp
(@jay_wp)
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 -->
Thread Starter
jay_wp
(@jay_wp)
@trisham, thanks for your response. CSS :first-child selector may work for the first post but how about the three or four posts following that first one? They are all on the home/front page but the very first (most recent) post and the other group of three or four will have different styles.
This may work for others
.post:nth-child(2), .post:nth-child(3), .post:nth-child(4){
/*your styling here*/
}
You can find more information about nth-child here:
http://css-tricks.com/how-nth-child-works/
Thread Starter
jay_wp
(@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.
To make a site, you’d have to have the capacity to compose PHP and be acquainted with Mysql or alike.
I’d make your landing page as you’d like it. At that point you could physically make a database and enter data, or manufacture yourself an “administrator” region where no one but you can login (to shield from different clients), where there could be a structure with the different data.
I could continue endlessly yet frankly this is a truly convoluted undertaking particularly in the event that you don’t know HTML or different dialects.:P
