Skip to content

Instantly share code, notes, and snippets.

@morgyface
Last active April 15, 2017 17:17
Show Gist options
  • Select an option

  • Save morgyface/372d40d27ce64429a8f7bccfeb97410a to your computer and use it in GitHub Desktop.

Select an option

Save morgyface/372d40d27ce64429a8f7bccfeb97410a to your computer and use it in GitHub Desktop.
WordPress | Get Posts with adaptive column widths
<style>
ul {margin:0; padding:0; list-style:none; overflow:auto}
ul li {float:left}
ul.half li {width:50%}
ul.thirds li {width:33.33%; width:calc(100% / 3)}
ul.quarters li {width:25%}
</style>
<?php
$args = array(
'posts_per_page' => 100,
'post_type' => 'posts'
);
$posts = get_posts( $args );
if ( $posts ) {
$count = count( $posts );
echo '<ul class="';
if ( $count <= 2 || $count == 4 ) {
echo 'half';
} elseif ( $count == 3 || $count == 5 || $count == 6 || $count == 9 ) {
echo 'thirds';
} else {
echo 'quarters';
}
echo '">';
foreach ( $posts as $post ) : setup_postdata( $post );
$title = get_the_title();
$url = get_the_permalink();
echo '<li>';
echo '<h3>';
echo '<a href="' . $url . '">' . $title . '</a>';
echo '</h3>';
echo '</li>';
endforeach;
echo '</ul>';
}
wp_reset_postdata();
?>
@morgyface
Copy link
Author

morgyface commented Aug 6, 2016

Get those posts but leave out the empty space guvner

Essentially this is a responsive/adaptive get_posts list, which adjusts the widths of the list items based on how many list items there are. It first uses count to return the number of posts and then applies a class to the UL which ensures there's no empty space on each row or, at least, minimal space.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment