Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Robert Niemczewski
Robert Niemczewski
4,560 Points
Posted by Robert Niemczewski
Robert Niemczewski
4,560 Points

Styling WordPress Posts

Hi guys, so I am working on a blog that is based on Genesis frame work and the Executive theme that they provide and I am stuck, I have been searching for a while now to find the answer how to style posts that look on a page like this. Featured post field where you see the newest posts and has a picture with description and underneath you have the rests of the posts maybe divided into three columns and so on. To give you an example I am aiming for something like this : http://fashionelka.pl/, any ideas?

4 Answers

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

Best way to do this would be to have two loops in my opinion. The first loop would be for a single post and from the category "featured". Then runs a second loop as you normally would.

If you just want it so the most recent post is styled differently, then add a count to your loop with a conditional saying if this post is less then the count target, then put it in this div and set of classes, otherwise put it in this one. Something like this:

$wp_query = new WP_Query(array(
'posts_per_page' => '7',
'post_type' => 'news',
'paged' => $paged
)); 

$count = 0; ?>


<?php while($wp_query->have_posts()) : $wp_query->the_post(); ?>

<?php if($count < 3){ ?>
    <?php $count++; ?>
        <article class="upper-article">
            <div class="upper-article-image">   
                <?php the_post_thumbnail('large'); ?>
            </div>
            <div class="upper-article-content">
                <h2><?php the_title(); ?></h2>
                <div class="upper-article-text"><?php the_content(); ?></div>
                <a class="upper-article-link" href="<?php the_permalink(); ?>">Read More</a>
            </div>
        </article>  

<?php } else { ?>

        <article class="lower-article">
            <div class="lower-article-image">   
                <?php the_post_thumbnail('large'); ?>
            </div>
            <div class="lower-article-content">
                <h2><?php the_title(); ?></h2>
                <div class="lower-article-text"><?php the_content(); ?></div>
                <a class="lower-article-link" href="<?php the_permalink(); ?>">Read More</a>
            </div>
        </article>  

<?php } ?>

<?php endwhile; wp_reset_query(); ?>

In my loop there, the top 3 posts are big, full width and the bottom 4 are in a 2 by 2 grid.

Here's it in action: http://ultimategamingparadise.com/reviews/

Robert Niemczewski
Robert Niemczewski
4,560 Points
Robert Niemczewski
Robert Niemczewski
4,560 Points

I see, thank you.

I am not that PHP experienced but I will try to figure it out.

Thanks

P.S - there are no plugins or easier options?

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

HI Robert Niemczewski - I've not seen any plugins no. Don't think you could actually do it with a plugin.

Are you comfortable creating page templates for WordPress and CSS etc? You could create a page template called special posts page or something. Then create a new page in WP selecting the new template as the template. Then just copy and paste my code into the file. Change the classes to fit and style with CSS. Remove the bits of the loop you don't need.

Robert Niemczewski
Robert Niemczewski
4,560 Points
Robert Niemczewski
Robert Niemczewski
4,560 Points

Hey Matthew,

Okay, I will give it a try!