Split Category posts in three columns

  • Resolved evilpixy

    (@evilpixy)


    14 years, 10 months 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

Viewing 5 replies - 1 through 5 (of 5 total)

  • 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

    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>

    Thread Starter evilpixy

    (@evilpixy)

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

    :~(

    Thread Starter evilpixy

    (@evilpixy)

    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.

    Very interesting, this is what i’m looking for ! ??

    thanks guys,

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Split Category posts in three columns’ is closed to new replies.