Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

WordPress

How do I custom this list in PHP?

Hi everyone. I need to customize a list made of images so that they appear in a certain way. This list is from an internal page (content-causes.php) and the first 5 items will be displayed on the home page.

The code I have so far (in the content-causes) is this:

<?php

$num_posts = (is_front_page() ) ? 5 : -1;


  $args = array(
    'post_type' => 'Causes',
    'orderby' => 'date',
    'order' => 'ASC',
    'posts_per_page' => $num_posts,
  );
  $query = new WP_Query ($args);

?>

<section class="row no-max pad">

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

  <div class="medium-4 columns grid-item">
    <ul>
      <li>
        <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('large'); ?></a>
      </li>
    </ul>
  </div>

  <?php endwhile; endif; wp_reset_postdata(); ?>

</section>

I believe the problem is in the highlighted section above.

In html it would be something like this:

<section class="row no-max pad">

      <div class="medium-4 columns grid-item">
        <ul>
            <li><a href="#"><img src="1.png" alt=""></a></li>
            <li><a href="#"><img src="2.png" alt=""></a></li>
        </ul>
      </div>

      <div class="medium-4 columns grid-item">
      <ul>
        <li><a href="#"><img src="3.png" alt=""></a></li>
      </ul>
      </div>

      <div class="medium-4 columns grid-item">
      <ul>
      <li><a href="#"><img src="4.png" alt=""></a></li>
      <li><a href="#"><img src="5.png" alt=""></a></li>
      </ul>
      </div>
</section>

I'm not sure if anyone can understand what I need, but all help is welcome.

Thanks

Sean T. Unwin
Sean T. Unwin
28,660 Points

I have formatted your code to be more readable.

Please see this thread regarding posting code to the forum. :)

3 Answers

Hi!

You wont be able to achieve this using the loop, as the loop repeats the exact wrapped code for the amount of times you set "posts_per_page".

If your site wont ever need to show more than 5 images on the frontpage I'd try a more static approach. Your code would look like this e.g.

<section class="row no-max pad">

<!-- First Column -->
  <div class="medium-4 columns grid-item">
    <ul>
      <li>
        <a href="<?php the_permalink($post_id); ?>"><?php echo get_the_post_thumbnail( $post_id, array( 'class' => 'yourclass' ); ?></a>
      </li>
      <li>
        <a href="<?php the_permalink($post_id); ?>"><?php echo get_the_post_thumbnail( $post_id, array( 'class' => 'yourclass' ); ?></a>
      </li>
    </ul>
  </div>

<!-- Second Column -->

  <div class="medium-4 columns grid-item">
    <ul>
      <li>
        <a href="<?php the_permalink($post_id); ?>"><?php echo get_the_post_thumbnail( $post_id, array( 'class' => 'yourclass' ); ?></a>
      </li>
    </ul>
  </div>

  <!-- Third Column -->

  <div class="medium-4 columns grid-item">
    <ul>
      <li>
        <a href="<?php the_permalink($post_id); ?>"><?php echo get_the_post_thumbnail( $post_id, array( 'class' => 'yourclass' ); ?></a>
      </li>
      <li>
        <a href="<?php the_permalink($post_id); ?>"><?php echo get_the_post_thumbnail( $post_id, array( 'class' => 'yourclass' ); ?></a>
      </li>
    </ul>
  </div>
</section>
<?php echo get_the_post_thumbnail( $post_id, array( 'class' => 'yourclass' ); ?> 

$post_id -> Replace this with the ID of your corresponding post.

'yourclass' -> Replace with your classes for your images

The reason i'm using "get_the_post_thumbnail" instead of "the_post_thumbnail" is that first works outside the wordpress loop, where as second needs to be nested in the loop.

P.S. Not sure if using <ul> tags in this situation is semantically correct. Your second column e.g. just has one <li> element so it isn't actually a list. You could just wrap your images with <div> tags to keep them blocked.

Thank you Selwyn, it worked :)

Thank you Sean. i didn't know about this "rules" :)

Hi Sean!

How do you want your images to appear ? Currently it looks like your aiming at three columns. Having set "post_per_page" to "5" your images are split 2 -1 -2

Hi Selwyn! I want my images to appear precisely like you say 2-1-2. The problem is that I want image 1 to show on the top left corner, the second one beneath this one, then the third one should appear alone centered, and the 4th and 5th, on the right side, being the 4th on top of the 5th. (Image 3 is higher than the others, which all have the same height.) Can you understand what I need? Thank you