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

Posted by Raquel Rodrigues
Raquel Rodrigues
2,876 Points

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,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

I have formatted your code to be more readable.

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

3 Answers

udslwxmrlw
udslwxmrlw
8,196 Points

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>
udslwxmrlw
udslwxmrlw
8,196 Points 
<?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.

Raquel Rodrigues
Raquel Rodrigues
2,876 Points

Thank you Selwyn, it worked :)

Raquel Rodrigues
Raquel Rodrigues
2,876 Points
Raquel Rodrigues
Raquel Rodrigues
2,876 Points

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

udslwxmrlw
udslwxmrlw
8,196 Points
udslwxmrlw
udslwxmrlw
8,196 Points

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

Raquel Rodrigues
Raquel Rodrigues
2,876 Points

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