I've used the TwentyTwelve theme for this example:
index.php
Above the while
loop, you will need to initialise a counter:
<?php $count = 0; ?>
Inside your while
loop for getting the posts, you can do something like this:
<?php while ( have_posts() ) : the_post(); ?>
<?php
if ($count < 1) {
$setClass = "less-than";
} else {
$setClass = "more-than";
}
$count++;
// get_template_part( 'content', get_post_format() );
include(locate_template('content.php'));
?>
<?php endwhile; ?>
This means any post less than 1, since we started the counter at 0, this will only apply it to our first post.
if ($count < 1) {
You also need to comment out the get_template_part
function, because we won't have access to our setClass
variable, instead it will just include the content.php
page.
content.php
Now we can pass the $setClass
variable, in to post_class()
function.
So:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
Becomes
<article id="post-<?php the_ID(); ?>" <?php post_class($setClass); ?>>
So now when you view the index page you won't notice any visual changes, but if you inspect each post, you should see the class
added to them:
<article id="post-4" class="post-4 post type-post status-publish format-standard hentry less-than">
The less-than
class is added to this post.
Now you can style up the posts based on those 2 classes
.
.less-than { /* your-styles */ }
.more-than { }
For the Divi theme:
in index.php
, use this for your if
statement:
if ( have_posts() ) :
$count = 0;
while ( have_posts() ) : the_post(); ?>
<?php
if ($count < 1) {
$setClass = "less-than";
} else {
$setClass = "more-than";
}
?>
<article id="post-<?php the_ID(); ?>" <?php post_class( 'et_pb_post' . ' ' . $setClass ); ?>>
<?php
$count++;
echo $count;
$thumb = '';
$width = (int) apply_filters( 'et_pb_index_blog_image_width', 1080 );
$height = (int) apply_filters( 'et_pb_index_blog_image_height', 9999 );
$classtext = 'et_pb_post_main_image';
$titletext = get_the_title();
$thumbnail = get_thumbnail( $width, $height, $classtext, $titletext, $titletext, false, 'Blogimage' );
$thumb = $thumbnail["thumb"];
if ( 'on' == et_get_option( 'divi_thumbnails_index', 'on' ) && '' !== $thumb ) : ?>
<a href="<?php the_permalink(); ?>">
<?php print_thumbnail( $thumb, $thumbnail["use_timthumb"], $titletext, $width, $height ); ?>
</a>
<?php
endif;
?>