I am making a Top Photos section in a page. This section will have 3 last post (there are galleries in the posts), each with thumbnail, link and excerpt from the posts. The posts will be displayed in "box-style" and align horizontally. Container for these boxes is 1050px wide.

Here is my loop:

<div id="top-content">
<?php $custom_query = new WP_Query('cat=2687&posts_per_page=3'); //Top of the page - Top Photo Category 
while($custom_query->have_posts()) : $custom_query->the_post(); ?>
    <li <?php post_class(); ?> id="post-<?php the_ID(); ?>">
        <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('top-photo-thumb'); ?><h2><?php the_title(); ?></h2></a>
        <p> <?php llc_excerpt('llc_excerptlength_long', 'llc_excerptmore') ?></p>
        <p class="view-more"><a href="<?php the_permalink(); ?>">View Gallery</a></p>
<?php endwhile; ?>
<?php wp_reset_postdata(); // reset the query ?>

and here is my CSS file:

    margin-left: -10px;

#top-content ul{
    margin: 0 4px;
    float: left;

#top-content ul li{
    width: 320px;
    height: 100%;
    margin: 0 5px 0 5px;
    padding: 0 14px 0 0;
    /*display: block;*/
    border-right: 1px solid #D6D5D5;

#top-content h2 {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12pt;
    font-style: normal;
    line-height: 12pt;
    font-weight: bold;
    font-variant: normal;
    text-transform: none;
    color: #4A65A8;
    padding: 0px;
    margin: 7px 0 0 0;
    text-align: left;

#top-content ul li p{
    width: 320px;
    margin: 5px 0 0 0;
    text-align: justify;

#top-content ul:last-child{
    margin-left: 5px;
    background-color: yellow;
    border-style: 0px;

#top-content ul:last-child a img{

#top-content ul:last-child h2{

#top-content ul:last-child p{

(sorry about the messy code.. I've been experimenting :P)

I want to make a CSS division-line between these "boxes" (posts). The first and third (last) boxes should be placed right at the left and right edge of the container respectively without left and right border, so I think the way to achieve this is by targeting the second post and then add left and right border into it.

How do I achieve it or do you have other suggestion? (I think it is possible to add custom class at the loop). As you can see, I've been trying to use last-child (with nth and that "n" thingy) selector and still no luck.. I'm not really good at CSS (and PHP) TBH..

Thanks in advance!

  • 1
    Can you rephrase? I'm struggling to visualise what you want, a diagram would do wonders! – Tom J Nowell Jul 23 '12 at 14:45
  • Hi Tom, hope this help, tried to draw but the formatting failed. I try to make a container at the top of a page template. Inside this container, there are three "boxes", each will be filled with a post from the loop above. These boxes are align horizontally from left to right. The first box should sit right at the left edge, the last sit at the right edge of the container. Then, there will be a divider line between these 3 boxes, but the catch is, the first and the last shouldn't have this line at their left and right edge, respectively. So the idea is to put this line on the second box. – Mario88 Jul 23 '12 at 15:36

They key is here:

<li <?php post_class(); ?> id="post-<?php the_ID(); ?>">

You can add a parameter to the post_class call, e.g.:

$counter = 0;
$custom_query = new WP_Query('cat=2687&posts_per_page=3'); //Top of the page - Top Photo Category 
while($custom_query->have_posts()) : $custom_query->the_post();
    $column = $counter %3; // 3 columns, use module to get the remainder
    $class = "column-".$column;
    <li <?php post_class($class); ?> id="post-<?php the_ID(); ?>">

Now the first post will have a 'column-0' class, the second 'column-1' and the third/last 'column-2'. You can then apply your styles to these:

#top-content .column-2{
    margin-left: 5px;
    background-color: yellow;
    border-style: 0px;

#top-content .column-2 a img{

#top-content .column-2 h2{

#top-content .column-2 p{

Also remember to put an if($custom_query->have_posts()) around your loop, you never know what might happen, and define your query as an array not a string, e.g.:

$custom_query = new WP_Query(array(
    'cat' => 2687,
    'posts_per_page' => 3

It's cleaner, easier to read, and you can do more advanced queries. It's also a tiny bit faster and it's good practice

  • I am trying it now, just modified the loop and the CSS, still no luck but I believe I am on the right track, thank you. – Mario88 Jul 23 '12 at 15:38
  • Your CSS may be wrong, but are the classes turning up as expected? – Tom J Nowell Jul 23 '12 at 15:59
  • 2
    I'm not sure.. as I said, I don't know much about PHP but I think it (the class) should begin with 0 (the way array counting), just like you said. But now, the first box got column-1, the second= column-2 and the third= column-0. Now it seems that h2 tag (CSS - it is, but somehow I can't style it) does not apply to the third column (0) while it works for the first and second column. – Mario88 Jul 23 '12 at 17:03
  • 1
    Accepted your answer Tom, thank you very much :) Still have problem with the h2 tag, but each post gets custom class now. – Mario88 Jul 23 '12 at 17:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.