<?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>Travis Beck &#187; tips</title>
	<atom:link href="http://travisjbeck.com/blog/tag/tips/feed/" rel="self" type="application/rss+xml" />
	<link>http://travisjbeck.com/blog</link>
	<description>The Modern Web</description>
	<lastBuildDate>Mon, 14 Jun 2010 05:36:46 +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>Style comments by alternating row and author in WordPress</title>
		<link>http://travisjbeck.com/blog/wordpress/style-comments-by-alternating-row-and-author-in-wordpress/</link>
		<comments>http://travisjbeck.com/blog/wordpress/style-comments-by-alternating-row-and-author-in-wordpress/#comments</comments>
		<pubDate>Sat, 30 Aug 2008 14:09:54 +0000</pubDate>
		<dc:creator>Travis</dc:creator>
				<category><![CDATA[wordpress]]></category>
		<category><![CDATA[code]]></category>
		<category><![CDATA[tips]]></category>

		<guid isPermaLink="false">http://travisjbeck.com/blog/?p=7</guid>
		<description><![CDATA[I&#8217;ve seen many articles on setting up alternating rows or &#8220;zebra stripes&#8221; for comments as well as many articles on styling author comments.  I&#8217;m gonna show you how to combine the two into one function. Zebra striping is when every other comment has a slightly different background color or some other visual variation.  Zebra striping [...]]]></description>
			<content:encoded><![CDATA[<p>
I&#8217;ve seen many articles on setting up alternating rows or &#8220;zebra stripes&#8221; for comments as well as many articles on styling author comments.  I&#8217;m gonna show you how to combine the two into one function.
</p>
<p><span id="more-7"></span></p>
<p>
Zebra striping is when every other comment has a slightly different background color or some other visual variation.  Zebra striping helps the reader sort through the comments quicker.  Author styling on comments is when comments posted by the author have been styled to stand out from the rest of the comments.  Author styling allows readers to quickly skim comments to find those posted by the article&#8217;s author.  You&#8217;ve no doubt seen these two methods used on blogs before. Here&#8217;s an example of what you can do:
</p>
<p><img src="http://travisjbeck.com/blog/wp-content/uploads/2008/09/alternating-rows-with-author-styles.gif" alt="" title="alternating-rows-with-author-styles" width="311" height="411" class="aligncenter size-full wp-image-18" /></p>
<p>
So here&#8217;s how&#8217;s it&#8217;s done. Find the comment loop inside your comments.php file. It should look like this:
</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">foreach</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$comments</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$comment</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
	&lt;li id=&quot;comment-<span style="color: #000000; font-weight: bold;">&lt;?php</span> comment_ID<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot;&gt;
	<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> get_avatar<span style="color: #009900;">&#40;</span> <span style="color: #000088;">$comment</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">32</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
	<span style="color: #000000; font-weight: bold;">&lt;?php</span> comment_text<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
	&lt;p&gt;&lt;cite&gt;<span style="color: #000000; font-weight: bold;">&lt;?php</span> comment_type<span style="color: #009900;">&#40;</span>__<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Comment'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> __<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Trackback'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> __<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Pingback'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span> <span style="color: #000000; font-weight: bold;">&lt;?php</span> _e<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'by'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span> <span style="color: #000000; font-weight: bold;">&lt;?php</span> comment_author_link<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span> &amp;#8212; <span style="color: #000000; font-weight: bold;">&lt;?php</span> comment_date<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span> @ &lt;a href=&quot;#comment-<span style="color: #000000; font-weight: bold;">&lt;?php</span> comment_ID<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot;&gt;<span style="color: #000000; font-weight: bold;">&lt;?php</span> comment_time<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&lt;/a&gt;&lt;/cite&gt; <span style="color: #000000; font-weight: bold;">&lt;?php</span> edit_comment_link<span style="color: #009900;">&#40;</span>__<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;Edit This&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">' |'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&lt;/p&gt;
	&lt;/li&gt;
&nbsp;
<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">endforeach</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<p>
Change the first part to this:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">&nbsp;
<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">foreach</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$comments</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$comment</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
   <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #000088;">$i</span><span style="color: #339933;">++</span>  <span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
	&lt;li id=&quot;comment-<span style="color: #000000; font-weight: bold;">&lt;?php</span> comment_ID<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot; class=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> alternate_rows_author_comment<span style="color: #009900;">&#40;</span><span style="color: #000088;">$i</span><span style="color: #339933;">,</span> <span style="color: #000088;">$comment</span><span style="color: #339933;">,</span> <span style="color: #000088;">$post</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot;&gt;</pre></div></div>

<p>
We&#8217;re doing a couple things here.  We&#8217;ve created an iterator ($i) that adds 1 to itself each time through the loop and we&#8217;ve set the class property to a php function passing the iterator, post object, and comment object variables. As of now there is no &#8220;alternate_rows_author_comment&#8221; function.  So let&#8217;s make one
</p>
<p>
Open up your functions.php file and add this:
</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> alternate_rows_author_comment<span style="color: #009900;">&#40;</span><span style="color: #000088;">$i</span><span style="color: #339933;">,</span> <span style="color: #000088;">$comment</span><span style="color: #339933;">,</span> <span style="color: #000088;">$post</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
   <span style="color: #000088;">$className</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">''</span><span style="color: #339933;">;</span>
   <span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$i</span> <span style="color: #339933;">%</span> <span style="color: #cc66cc;">2</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #000088;">$className</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'odd-row'</span><span style="color: #339933;">;</span>
   <span style="color: #009900;">&#125;</span>
   <span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$comment</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">user_id</span> <span style="color: #339933;">==</span> <span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">post_author</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #000088;">$className</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'author-comment'</span><span style="color: #339933;">;</span>
   <span style="color: #009900;">&#125;</span>
   <span style="color: #b1b100;">echo</span> <span style="color: #000088;">$className</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></pre></div></div>

<p>
This handy function we&#8217;ve created checks if our iterator ($i) is odd and if so adds &#8216;odd-row&#8217; to our class.  the &#8220;if($i % 2)&#8221; part is called a <a href="http://en.wikipedia.org/wiki/Modulo_operation">modulo operator</a>.  Basically it checks the remainder of the value of &#8220;$i&#8221; divided by 2.  A remainder of 1 evaluates to &#8216;true&#8217; and a remainder of &#8217;0&#8242; evaluates to false.  Odd numbers always have a remainder of 1 and even numbers always have a remainder of 0 when divided by 2.  The second if statement checks the user id of the commenter against the user id of the author.  If they are equal then it sets our class to &#8216;author-comment&#8217; overwriting, if need be, our previous value of &#8216;odd-row&#8217;. At this point if it&#8217;s an author comment we&#8217;re no longer interested in whether it&#8217;s odd or even.
</p>
<p>
Now you can set up definitions in your style sheet to style your new comment types like so:
</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">li.odd-row<span style="color: #00AA00;">&#123;</span>
   <span style="color: #808080; font-style: italic;">/* change the background color or other attributes here */</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
li.author-comment<span style="color: #00AA00;">&#123;</span>
   <span style="color: #808080; font-style: italic;">/* change the background color or other attributes here */</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>
And that&#8217;s all there is to it.  Now you have comments styled by alternating rows and author.</p>
]]></content:encoded>
			<wfw:commentRss>http://travisjbeck.com/blog/wordpress/style-comments-by-alternating-row-and-author-in-wordpress/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
	</channel>
</rss>
