CODEWITHSUNDEEP
phpthumbnailswordpress
Kauffmann
Kauffmann

Reputation: 11

Styling Wordpress frontpage-appearance of specific posts

I'm helping a friend out with a portfolio-site in Wordpress, with a specific idea of what the frontpage should look like. This is a quick sketch of his logo, and the post thumbnails are supposed to follow those dimensions. Posts on the frontpage are thumbnails only, no text or anything. As I see it, this would mean that the thumbnail for the 2nd and 3rd post on the page has a specific styling, while posts 1, 4, 5 and 6 have another.

Unfortunately I'm not a PHP mastermind, so I've been able to separate posts, but only from the first post and onwards, not from the 2nd to 3th post as needed.

How can this be done, if possible?

Upvotes: 0

Views: 101

Answers (2)

kjid
kjid

Reputation: 89

In your wordpress loop you could add classes to your posts, for example 

<?php 
    $i = 1;
if ( have_posts() ) {
    while ( have_posts() ) {
        the_post();  ?>
                    <div class="post<?php echo $i;?>">
                    <?php the_post_thumbnail();  
                    $i++;
    } 
}
?>

and style them like

 .post1 .wp-post-image, .post4 .wp-post-image, .post5 .wp-post-image, .post6 .wp-post-image {
   width: 100px;
   height: 100px;
 }

 .post2 .wp-post-image, .post3 .wp-post-image {
   width: 200px;
   height: 200px;
 }

Did not test this, but it should work.

Upvotes: 0

Anjana
Anjana

Reputation: 499

Create Child Specific CSS

nth-of-type(2n+1){ your css dode};

nth-of-type(2n+2){ your css dode};

nth-of-type(2n+3){ your css dode};

Upvotes: 1

Related Questions