<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>TransformationPowerTools &#187; wordpress loop</title>
	<atom:link href="http://www.transformationpowertools.com/wordpress/tag/wordpress-loop/feed" rel="self" type="application/rss+xml" />
	<link>http://www.transformationpowertools.com/wordpress</link>
	<description>for personal growth and transformation</description>
	<lastBuildDate>Sun, 15 Aug 2010 22:14:28 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Multi-Column Grid-Style Posts in WordPress</title>
		<link>http://www.transformationpowertools.com/wordpress/multi-column-wordpress-template</link>
		<comments>http://www.transformationpowertools.com/wordpress/multi-column-wordpress-template#comments</comments>
		<pubDate>Fri, 29 Jan 2010 11:33:36 +0000</pubDate>
		<dc:creator>alchymyth</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[3 column post]]></category>
		<category><![CDATA[blog]]></category>
		<category><![CDATA[columns]]></category>
		<category><![CDATA[grid]]></category>
		<category><![CDATA[grid layout]]></category>
		<category><![CDATA[grid style]]></category>
		<category><![CDATA[magazine style]]></category>
		<category><![CDATA[multi-column]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[portofolio]]></category>
		<category><![CDATA[theme]]></category>
		<category><![CDATA[thumbnail grid]]></category>
		<category><![CDATA[wordpress forum]]></category>
		<category><![CDATA[wordpress loop]]></category>
		<category><![CDATA[wordpress theme]]></category>

		<guid isPermaLink="false">http://www.transformationpowertools.com/wordpress/?p=517</guid>
		<description><![CDATA[following question comes up regularly in the wordpress support forum: &#8216;i want to show my posts in three (four, five) columns, how can i do it?&#8217;
see the effect here in action: under pages &#8216;grid of posts&#8217;.
EDIT:
as this code can have its challenges, and is not always easy to apply, i would like to point to another approach with the same results:
Playing with columns – stacking posts in a grid.
END of EDIT
here, i am going  to  ... &#187; <small><a href="http://www.transformationpowertools.com/wordpress/multi-column-wordpress-template">read more</a></small> &#187;]]></description>
			<content:encoded><![CDATA[<p>following question comes up regularly in the wordpress support forum: &#8216;i want to show my posts in three (four, five) columns, how can i do it?&#8217;</p>
<p>see the effect here in action: under <strong>pages </strong><a href="http://www.transformationpowertools.com/wordpress/grid-posts">&#8216;grid of posts&#8217;</a>.</p>
<p>EDIT:<br />
as this code can have its challenges, and is not always easy to apply, i would like to point to another approach with the same results:<br />
<a href="http://www.transformationpowertools.com/wordpress/playing-with-columns-stacking-posts-grid-style">Playing with columns – stacking posts in a grid</a>.<br />
END of EDIT</p>
<p>here, i am going  to present yet another solution: a flexible core structure to allow <strong>any</strong> number of columns with <strong>any </strong>number of rows, limited only by screen space, readability and fantasy&#8230;</p>
<div id="attachment_683" class="wp-caption aligncenter" style="width: 522px"><img class="size-large wp-image-683" title="grid-style-template" src="http://www.transformationpowertools.com/wordpress/wp-content/uploads/2010/01/grid-style-template-512x375.jpg" alt="a three column grid category template" width="512" height="375" /><p class="wp-caption-text">a three column grid category template</p></div>
<p>the structure (for instance 3 columns, 4 rows, 12 or more posts):<br />
<code> 1  5   9<br />
2  6  10<br />
3  7  11<br />
4  8  12</code></p>
<p>the structure (for instance 3 columns, 4 rows, less than 12 posts, i.e. 7):<br />
<code> 1  4  6<br />
2  5  7<br />
3 </code></p>
<p>i&#8217;ll begin with a step by step introduction into the concept:</p>
<ol>
<li>setting of variables</li>
<li>query_posts</li>
<li>calculate rows</li>
<li>loop 1 &#8211; the columns</li>
<li>the wordpress loop &#8211; the rows</li>
<li>page navigation</li>
</ol>
<p>1. setting the variables:<br />
<code>$set_number_of_columns = 3; // enter numbers of columns here;<br />
$set_number_of_rows = 3; // enter numbers of rows here<br />
$set_showpost = $set_number_of_columns * $set_number_of_rows ;<br />
</code></p>
<p>2. query_posts:<br />
<code>global $query_string;<br />
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;<br />
query_posts($query_string.'&amp;showposts='.$set_showpost.'&amp;paged='.$paged);<br />
<!--formatted--></code></p>
<p>3. calculate rows:<br />
<code>// make adjustment to get three equaly long columns even on last paged page<br />
// get number of posts for this,<br />
$num_of_posts = $wp_query-&gt;post_count;<br />
// divide by $set_number_of_columns to get number per column,<br />
// round up to next integer to make $ppc posts per column variable, or $set_number_of_rows whatever is smaller<br />
$ppc = min(ceil($num_of_posts/$set_number_of_columns),$set_number_of_rows);<br />
// calculates number of rows, i.e. showposts for the following query_posts and get_posts<br />
<!--formatted--></code></p>
<p>4. loop 1 &#8211; the columns:<br />
<code>&lt;?php for ( $col = 1; $col &lt;= $set_number_of_columns; $col += 1) { ?&gt;<br />
&lt;div class="col&lt;?php echo $col; ?&gt;"&gt;<br />
&lt;?php $row = 1;<br />
$noffset = ($col -1) * $ppc + ($paged - 1) * $set_showpost ; //calculate offset parameter if paged ?&gt;<br />
<!--formatted--></code></p>
<p>5. wordpress loop &#8211; the rows and posts:<br />
<code>&lt;?php $posts = get_posts($query_string.'&amp;numberposts='.$ppc.'&amp;offset='.$noffset); foreach ($posts as $post) : start_wp(); ?&gt;<br />
&lt;div id="post-&lt;?php the_ID(); ?&gt; class="post row&lt;?php echo $row; ?&gt;"&gt;<br />
&lt;?php //output all post related data, i.e. date, title, content/excerpt, postmetadata, tags, etc. // ?&gt;<br />
&lt;/div&gt; &lt;!--closing .post div --&gt;<br />
<!--formatted--></code></p>
<p>6. page navigation:<br />
<code>&lt;div class="navigation"&gt;<br />
&lt;div class="alignleft"&gt;&lt;?php next_posts_link('&amp;laquo; Older Entries') ?&gt;&lt;/div&gt;<br />
&lt;div class="alignright"&gt;&lt;?php previous_posts_link('Newer Entries &amp;raquo;') ?&gt;&lt;/div&gt;<br />
&lt;/div&gt;<br />
<!--formatted--></code></p>
<p>here is the full code:</p>
<div style="border: 2px solid #ffffff; height: 300px; overflow-y: auto;"><code>&lt;?php get_header(); ?&gt;<br />
&lt;?php<br />
// code to display a number of posts in multi columns top-to-bottom left-to-right<br />
?&gt;<br />
&lt;?php global $query_string; ?&gt;<br />
&lt;?php<br />
$set_number_of_columns = 2; // enter numbers of columns here;<br />
$set_number_of_rows = 4; // enter numbers of rows here<br />
$set_showpost = $set_number_of_columns * $set_number_of_rows ;<br />
//setup query with parameter for paged<br />
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;<br />
query_posts($query_string.'&amp;showposts='.$set_showpost.'&amp;paged='.$paged);<br />
// get number of posts for this,<br />
$num_of_posts = $wp_query-&gt;post_count;<br />
// make adjustment for paged to get three equaly long columns even on last paged page<br />
// divide by $set_number_of_columns to get number per column,<br />
// round up to next integer to make $ppc posts per column variable, or $set_number_of_rows whatever is smaller<br />
$ppc = min(ceil($num_of_posts/$set_number_of_columns),$set_number_of_rows);<br />
// calculates number of rows, i.e. showposts for the following query_posts and get_posts<br />
?&gt;<br />
&lt;?php for ( $col = 1; $col &lt;= $set_number_of_columns; $col += 1) { ?&gt;<br />
&lt;div class="col&lt;?php echo $col;?&gt;"&gt;<br />
&lt;?php<br />
$row = 1;<br />
$noffset = ($col -1) * $ppc + ($paged - 1) * $set_showpost ; //calculate offset parameter if paged<br />
$posts = get_posts($query_string.'&amp;numberposts='.$ppc.'&amp;offset='.$noffset);<br />
foreach ($posts as $post) : start_wp(); ?&gt;<br />
&lt;div id="post-&lt;?php the_ID(); ?&gt;" class="post row-&lt;?php echo ($row%2); ?&gt;"&gt;<br />
&lt;!-- start of anything to do with post --&gt;<br />
&lt;h2&gt;<br />
&lt;a href="&lt;?php the_permalink() ?&gt;" rel="bookmark"&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;&lt;/h2&gt;<br />
&lt;div class="storycontent"&gt;<br />
&lt;?php the_excerpt(__('(more...)')); ?&gt;<br />
&lt;/div&gt;<br />
&lt;!-- end of anything to do with post --&gt;<br />
&lt;/div&gt; &lt;!-- end #post --&gt;<br />
&lt;?php<br />
$row++;<br />
endforeach; ?&gt;<br />
&lt;/div&gt;<br />
&lt;?php } ?&gt;<br />
&lt;?php // close the for-loop // ?&gt;<br />
&lt;div class="navigation"&gt;<br />
&lt;div class="alignleft"&gt;&lt;?php next_posts_link('&amp;laquo; Older Entries') ?&gt;&lt;/div&gt;<br />
&lt;div class="alignright"&gt;&lt;?php previous_posts_link('Newer Entries &amp;raquo;') ?&gt;&lt;/div&gt;<br />
&lt;/div&gt;<br />
&lt;?php get_footer(); ?&gt;<br />
<!--formatted--></code></div>
<p>the naming of the css classes is:<br />
class .col1 for the first column; class .col2 for the second column; and so forth.<br />
same thing for the rows: class .row1 for the posts in first row, on so on.<br />
going with this code is the css:<br />
<code>.col1, .col2 {float:left; width:49%; }</code></p>
<p>you can see the code in action: under <strong>pages </strong><a href="http://www.transformationpowertools.com/wordpress/grid-posts">&#8216;grid of posts&#8217;</a>.<br />
the effect ia achieved by giving each post a fixed height; and using a bit of javascript trickery.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.transformationpowertools.com/wordpress/multi-column-wordpress-template/feed</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
		<item>
		<title>Zebra style wordpress loop</title>
		<link>http://www.transformationpowertools.com/wordpress/zebra-style-wordpress-loop</link>
		<comments>http://www.transformationpowertools.com/wordpress/zebra-style-wordpress-loop#comments</comments>
		<pubDate>Wed, 13 Jan 2010 23:50:58 +0000</pubDate>
		<dc:creator>alchymyth</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[alternating styles]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[custom theme]]></category>
		<category><![CDATA[forum]]></category>
		<category><![CDATA[logic]]></category>
		<category><![CDATA[modification]]></category>
		<category><![CDATA[php code]]></category>
		<category><![CDATA[theme]]></category>
		<category><![CDATA[theme adaptation]]></category>
		<category><![CDATA[web development]]></category>
		<category><![CDATA[wordpress loop]]></category>

		<guid isPermaLink="false">http://www.transformationpowertools.com/wordpress/?p=591</guid>
		<description><![CDATA[to start, i would like to express my thanks and gratitude to all the volunteers in the wordpress forum who patiently and freely give their time and attention, and share their knowledge and experience with all the users coming with questions and problems about their wordpress installation and modifications.
a great community.
lists or posts styled with alternating color backgrounds, for instance, can inprove the readability of blogs.
most themes and the standard wordpress installation are not offering  ... &#187; <small><a href="http://www.transformationpowertools.com/wordpress/zebra-style-wordpress-loop">read more</a></small> &#187;]]></description>
			<content:encoded><![CDATA[<p>to start, i would like to express my thanks and gratitude to all the volunteers in the <a href="http://wordpress.org/support/">wordpress forum</a> who patiently and freely give their time and attention, and share their knowledge and experience with all the users coming with questions and problems about their wordpress installation and modifications.<br />
a great community.</p>
<p>lists or posts styled with alternating color backgrounds, for instance, can inprove the readability of blogs.</p>
<p>most themes and the standard wordpress installation are not offering this feature.<br />
however, it is easy to implement, when you know how.</p>
<p>for example we could give alternating posts within the &#8216;wordpress loop&#8217; a different extra class (&#8216;odd&#8217; or &#8216;even&#8217;) which can then be used with css.<br />
to begin with, we introduce a counter ($c = 0;) before the loop, increment it inside the loop ($c++), and generate a class depending on the number of the counter by checking the modulus 2 of the number ($c % 2 &#8211; modulus is the remainder of the division):</p>
<p><code>&lt;?php $c = 0 ; ?&gt;<br />
&lt;?php if (have_posts()) : while (have_posts()) : the_post(); ?&gt;<br />
&lt;?php $c++;<br />
if( $c % 2 == 0 ) $extra_class = &#039; even&#039;;<br />
else $extra_class = &#039; odd&#039;; ?&gt;<br />
&lt;div class=&quot;post &lt;?php echo $extra_class; ?&gt;&quot;&gt;<br />
&lt;!--typical stuff in the loop--&gt;<br />
&lt;/div&gt;<br />
&lt;?php endwhile; ?&gt;<br />
&lt;?php else : endif; ?&gt;<br />
<!--formatted--></code> </p>
<p>the class &#8216;odd&#8217; or &#8216;even&#8217; can be used in the style.css to create different background colors, alignments, margins, paddings, font-styles &#8211; no limits.</p>
<p>the most basic application of this method with a counter is how to style the first post in the loop different (only showing the logic part of the code):<br />
<code>&lt;?php $c++;<br />
if( $c == 1 ) $extra_class = &#039; first&#039;;<br />
else $extra_class = &#039;&#039;; ?&gt;<!--formatted--></code></p>
<p>to make it more interesting, the next example is to create three different styles and a special style for the last post on the page.<br />
we can get the number of the last post with <code>$wp_query-&gt;post_count <!--formatted--></code>.<br />
The structure is the same, the main difference is in the &#8216;if, elseif, else&#8217; logic:<br />
<code>&lt;?php $c++;<br />
if( $c == $wp_query-&gt;post_count ) $extra_class = &#039; last&#039;;<br />
elseif( $c % 3 == 0 ) $extra_class = &#039; three&#039;;<br />
elseif( $c % 3 == 2 ) $extra_class = &#039; two&#039;;<br />
elseif( $c % 3 == 1 ) $extra_class = &#039; one&#039;;<br />
?&gt;<!--formatted--></code></p>
<p>you can extend this method to create any number of cyclic classes.</p>
<p>and you can use it in any situation in your wordpress templates, where you loop through some output &#8211; lists, foreach, for, while, posts, comments, &#8230; </p>
<p>special thanks to <a href="http://profiles.wordpress.org/esmi/">@esmi</a> who dared venturing into the realm of more than two alternating styles, and who inspired me to post this article.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.transformationpowertools.com/wordpress/zebra-style-wordpress-loop/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
