WordPress.org

1. evilpixy
   Member
   Posted 2 years ago #

   Hello.

   I've been searching for a way to split the latest 15 posts from one specific category, into three columns (contaning 5 items each) and display it as links?

   I know that people have shown a way to split ALL CATEGORIES into a number of columns, but that's not what I'm after here.

   Example:
   I have two categories (Music, Food) with 20 posts in each. So, for the music-page i would like to show the last 15 from the music category and vice versa for the Food-page.

   Post 1 Post 6 Post 11
   Post 2 Post 7 Post 12
   Post 3 Post 8 Post 13
   Post 4 Post 9 Post 14
   Post 5 Post 10 Post 15

   I'm currently displaying them like this:
   

   <ul>
   <?php
    global $post;
    $myposts = get_posts('numberposts=15&category=1');
    foreach($myposts as $post) :
      setup_postdata($post);
    ?>
       <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
    <?php endforeach; ?>
    </ul>

   But it will only give you a long list...and that's ugly :)

   Any help would be greatly appreciated!
   Kind regards,
   EvilPixy

2. mores
   Member
   Posted 2 years ago #

   Are you sure you need them to go down one column then continue with the next?

   If not, I suggest you use CSS to get what you need.
   Off the top of my head:
   

   ul {list-style-type:none;}
   ul li {float:left;margin:0px 10px 20px 10px;padding: 1px 10px;width: 200px;display:inline;}

   This gives your list items a specified width, makes them float and display inline. Depending on the width of your page and the width of the list items, you can set how many colums you want.

   Use a <div style="clear:both"></div> after the

3. alchymyth
   The Sweeper
   Posted 2 years ago #

   this introduces a counter, at count of 5 it starts a new ul. ul is styled float:left and fixed width. adjust number values to your needs.
   

   <ul style="float:left; width:100px; margin-right:10px;">
   <?php $count=0;
    global $post;
    $myposts = get_posts('numberposts=15&category=1');
    foreach($myposts as $post) :
      setup_postdata($post); $count++;
    ?>
       <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
   	<?php if($count%5 == 0) { '</ul><ul style="float:left; width:100px; margin-right:10px;">'; } ?>
    <?php endforeach; ?>
    </ul>

4. evilpixy
   Member
   Posted 2 years ago #

   Thank you for the answers.
   However - it does not seem to work.
   It still posts them on top of eachother...

   :~(

5. evilpixy
   Member
   Posted 2 years ago #

   I managed to do it.

   <ul>
   <div style="float:left; width:200px; margin-right:10px;">
   <?php $count=0;
    global $post;
    $myposts = get_posts('numberposts=15&cat=1');
    foreach($myposts as $post) :
      setup_postdata($post); $count++;
    ?>
       <a href="<?php the_permalink(); ?>"><? echo $count?>. <?php the_title(); ?></a>
   	<?php if($count%5 == 0) { echo '</div><div style="float:left; width:200px; margin-right:10px;">'; } ?>
    <?php endforeach; ?>
    <div>
   </ul>

   It now puts a number next to the link as well as creating a new div after 5 posts.
   Thank you for the help that made this possible.

6. caseyj
   Member
   Posted 1 year ago #

   Very interesting, this is what i'm looking for ! :D

   thanks guys,

Topic Closed

This topic has been closed to new replies.