a different approach to ‘grid style’ – stacking the posts in a tightly ordered grid; to get a similar design as in http://www.creativedepart.com/ – ideal to use with thumbnails and excerpts:
the structure (for instance 3 columns, 4 rows, 12 or more posts):
1 5 9 2 6 10 3 7 11 4 8 12
the structure (for instance 3 columns, 4 rows, less than 12 posts, i.e. 7):
1 4 6 2 5 7 3
(bare minimum code, without explanation, totally flexible and automatic)
<?php
$num_cols = 4; // set the number of columns here
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1; // for pagination
$args = array(
'posts_per_page' => 16, // optional to overwrite the dashboard setting
'cat' => 0, // add any other query parameter to this array
'paged' => $paged
);
query_posts($args);
if (have_posts()) :
for ( $i=1 ; $i <= $num_cols; $i++ ) :
echo '<div id="col-'.$i.'" class="col">';
$counter = $num_cols + 1 - $i;
while (have_posts()) : the_post();
if( $counter%$num_cols == 0 ) : ?>
<!-- core post area;
title, content, thumbnails, postmeta, etc -->
<?php endif;
$counter++;
endwhile;
rewind_posts();
echo '</div>'; //closes the column div
endfor;
next_posts_link('« Older Entries');
previous_posts_link('Newer Entries »');
else:
echo 'no posts';
endif;
wp_reset_query();
?>
minimum css:
.col { width:150px; float:left; margin-right:5px; }
addendum:
this method can be implemented into the Twenty Ten theme, using the new ‘get_template_part()’ function to use custom loops.
for the code see:
loop-grid.php;
page template;
css styles.
Thanks for this – out of interest, any reason why you don’t indent your code? Makes it slightly hard to read…
I usually don’t care to indent code; however, it sems to be a nice idea, so here it is
Thank you dude for your Valuable, which have helped me alot.
is it possible to only show a list of 1 category?
and show posts in alphabetic order?
many thanks
use corresponding parameter for the query:
example:
$cat_id = 17; //the cat ID of the one category$args = array(
'posts_per_page' => 16, // optional to overwrite the dashboard setting
'category__in' => array($cat_id),
'orderby' => 'title',
'order' = 'ASC',
'paged' => $paged
); query_posts($args);
list of all possible query parameters
Is it possible for this code to exclude the first post, or to allow me to style the first post differently? I want to first to span the size of 4 columns, and be alone. Basically, I want the columns to start under the first post.
generally, yes.
possibly by putting a simple loop infront of the code to output the first post, and then excluding this post in the main loop. for how to, see http://codex.wordpress.org/The_Loop#Multiple_Loops_in_Action
however, if you don’t want this first post to be different on paginated pages, then it would need quite extensive coding for this, as you require different post numbers for those pages.
A couple of questions:
I am trying to use this grid for the search results template for a custom post type. How do I go about this? I’ve been wracking my brain trying to figure this out.
Also, when I use this grid for my custom taxonomy category/tags archives pages, I only see three items (which is the setting in the Reading settings). How do I get it to display more?
what arguments have you tried with the query? to use this for search results, you might need to integrate the global $wp_query as in http://codex.wordpress.org/Function_Reference/query_posts#Usage_Note.
as for the category archives, does the ‘posts_per_page’ parameter not work? be aware, you might get some problems with pagination if the number of posts don’t match what is in the dashboard settings.
for further questions, please consider joining the wordpress.org support forum.
Awesome tutorial – the adendum at the bottom solved my problem after hours or searching.
Thanks so much!
Thanks for this and the reply on wordpress forums, I have it working on my site now with a few changes. I added featured image into each area with a line of code from another tutorial.
Only thing is, my header isn’t showing the featured image anymore when the post is selected, and I’m trying to track down what’s doing it but haven’t had any luck. Any suggestions? Would it be something from this code, or maybe somethign else I’ve done.
Your tutorials are very help, I’ve learned alot from them.
now THIS is exactly what I was looking for – im working on a custom theme and needed a way of labelling my third column with a unique class to remove excess padding to the right!!!!
Exciting times for me
– many thanks and keep up the good work
Im using your code and it works good at index.php, but when i click on categories, it keeps the same page, doesn’t load any thing, except URL. Please help me
PS: I use many loop to make columns and mostly get this issue
hi,
imho, your issue seems unrelated to the stacking code.
for general help, consider joining the wordpress support forum, and ask your question there.
Could provide a clue as to how to implement this? My theme is based off of Twenty Ten and the loop is a bit more layered and I’ve found a lot of loop hacks won’t work. Where in the loop could this be pasted?
Hi Jason,
thanks for your interest.
the general loop.php is a bit crowded already, therefore, i would make a loop-grid.php and integrate the stacking code there, for instance: http://wordpress.pastebin.com/09HncmWf
as you can see, a lot of the conditional code has been removed.
then call it from a page template, for instance: http://wordpress.pastebin.com/P6vPLb2g
esssential css styles, to be added to style.css of the Twenty Ten based theme: http://wordpress.pastebin.com/sEP6SV3F
you may need to edit the post output area to force excerpts, for instance, or to integrate thumbnails.
hope you are familiar with page templates, and how to use them.
good luck
Thanks for this, it’s just what I was searching for. I have a question though, I’m unable to figure out how to change the format in which the posts are displayed. they show up (I have it set to 2 column)
Post #1 | Post #4
Post #2 | Post #5
Post #3 | Post #6
I need it to display them in this format.
Post #1 | Post #2
Post #3 | Post #4
Post #5 | Post #6
Is this possible to do with this code?