<?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>Beginwithanidea &#187; wordpress</title>
	<atom:link href="http://beginwithanidea.com/category/tutorials/wordpress-tutorials/feed/" rel="self" type="application/rss+xml" />
	<link>http://beginwithanidea.com</link>
	<description>Creative &#38; Technology Articles</description>
	<lastBuildDate>Fri, 05 Mar 2010 12:56:41 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Creating a featured post section w/thumbnails</title>
		<link>http://beginwithanidea.com/coding/wordpress/creating-a-featured-post-section-wthumbnails/</link>
		<comments>http://beginwithanidea.com/coding/wordpress/creating-a-featured-post-section-wthumbnails/#comments</comments>
		<pubDate>Wed, 13 Jan 2010 21:26:44 +0000</pubDate>
		<dc:creator>Brian</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://beginwithanidea.com/?p=223</guid>
		<description><![CDATA[For my first tutorial I will create a featured post section using the new the_post_thumbnail(); function.
This can be implemented on your home page or sidebar file easily.]]></description>
			<content:encoded><![CDATA[<p><img src="http://beginwithanidea.com/wp-content/uploads/2010/01/wp_tuts-548x365.jpg" alt="" title="wordpress tutorials" width="548" height="365" class="aligncenter size-medium wp-image-229" /><br />
For my first tutorial I will create a featured post section using the new the_post_thumbnail(); function.<br />
This can be implemented on your home page or sidebar file easily.</p>
<h3>1) Activating your the_post_thumbnail(); function</h3>
<p>Follow our own post here: <a href="http://beginwithanidea.com/coding/wordpress/post-thumbnail-wp-29/" title=" the_post_thumbnail();">the_post_thumbnail();</a></p>
<h3>2) Creating a php file for your featured section.</h3>
<p>Now that you activated you thumbnail function we can go ahead and create a php file that will be used to call our featured section where we want it on our site. </p>
<p><strong>Why create a php file instead of coding it directly in the theme files?</strong><br />
Well the answer is pretty simple. By doing so, if any changes are necessary in the featured post and you are calling the section at more then one place, you will be able to update them all in one single place.</p>
<p><strong>Create a file called featured.php in your theme.</strong></p>
<h3>3) Implementing the right code</h3>
<p>For our featured section we will want to create a specific category for it. For the lesson, let&#8217;s call it Featured.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;color: #ccc; font: 12px Consolas, Lucida Console, Monaco, monospace;">&lt;div id=&quot;featured_container&quot;&lt;/div&gt;
<span class="kw2">&lt;?php</span> query_posts<span class="br0">&#40;</span><span class="st_h">'category_name=featured&amp;showposts=3'</span><span class="br0">&#41;</span><span class="sy0">;</span> <span class="sy1">?&gt;</span>
&nbsp;
<span class="kw2">&lt;?php</span> <span class="kw1">while</span> <span class="br0">&#40;</span>have_posts<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="sy0">:</span> the_post<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span> <span class="sy1">?&gt;</span>
&nbsp;
&lt;div class=&quot;featured_single&quot;&lt;/div&gt;
        &lt;div class=&quot;featured_image&quot;&gt;
                 &lt;a href=&quot;<span class="kw2">&lt;?php</span> the_permalink<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="sy1">?&gt;</span>&quot; title=&quot;<span class="kw2">&lt;?php</span> the_title<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span> <span class="sy1">?&gt;</span>&quot;&gt;<span class="kw2">&lt;?php</span> the_post_thumbnail<span class="br0">&#40;</span><a href="http://www.php.net/array"><span class="kw3">array</span></a><span class="br0">&#40;</span><span class="nu0">60</span><span class="sy0">,</span> <span class="nu0">60</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span> <span class="sy1">?&gt;</span>&lt;/a&gt;
        &lt;/div&gt;       
         &lt;h2 class=&quot;featured-title&quot;&gt;
                &lt;a href=&quot;<span class="kw2">&lt;?php</span> the_permalink<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="sy1">?&gt;</span>&quot; title=&quot;<span class="kw2">&lt;?php</span> the_title<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span> <span class="sy1">?&gt;</span>&quot;&gt;<span class="kw2">&lt;?php</span> the_title<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span> <span class="sy1">?&gt;</span>&lt;/a&gt;
        &lt;/h2&gt;
&lt;/div&gt;
&nbsp;
<span class="kw2">&lt;?php</span> <span class="kw1">endwhile</span><span class="sy0">;</span><span class="sy1">?&gt;</span>
&lt;/div&gt;</pre></div></div>

<p>Let me breakdown this code for you.<br />
First is the query. This is where we are fetching our posts from our featured category and the showpost function is to only fetch the latest 3.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;color: #ccc; font: 12px Consolas, Lucida Console, Monaco, monospace;"><span class="kw2">&lt;?php</span> query_posts<span class="br0">&#40;</span><span class="st_h">'category_name=featured&amp;showposts=3'</span><span class="br0">&#41;</span><span class="sy0">;</span> <span class="sy1">?&gt;</span></pre></div></div>

<p>The rest of the code between the query is regular post code. The first one is to fetch the post thumbnail which has a size of 60px by 60px. The second one will return the title of the post. Both of them will be links to the actual post.</p>
<h3>4) Calling our file</h3>
<p>Final step is fetching the featured.php file in your wordpress theme. This will be done by using an include tag:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;color: #ccc; font: 12px Consolas, Lucida Console, Monaco, monospace;"><span class="kw2">&lt;?php</span> <span class="kw1">include</span><span class="br0">&#40;</span> TEMPLATEPATH <span class="sy0">.</span> <span class="st_h">'/featured.php'</span> <span class="br0">&#41;</span><span class="sy0">;</span> <span class="sy1">?&gt;</span></pre></div></div>

<p>Save your theme file where you included the featured.php tag.</p>
<p>Note that you will need to implement some new css to make your featured section pretty.<br />
here&#8217;s an option you can use:</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;color: #ccc; font: 12px Consolas, Lucida Console, Monaco, monospace;"><span class="re0">#featured_container</span> <span class="br0">&#123;</span><span class="kw1">width</span><span class="sy0">:</span> <span class="re3">300px</span><span class="sy0">;</span> <span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#ddd</span><span class="sy0">;</span> <span class="kw1">border</span><span class="sy0">:</span> <span class="re3">2px</span> <span class="kw2">solid</span> <span class="re0">#a1a1a1</span><span class="sy0">;</span><span class="br0">&#125;</span>
<span class="re1">.featured_single</span> <span class="br0">&#123;</span><span class="kw1">width</span><span class="sy0">:</span><span class="re3">300px</span><span class="sy0">;</span> <span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">block</span><span class="sy0">;</span> <span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#fff</span><span class="sy0">;</span> <span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">10px</span> <span class="re3">15px</span><span class="sy0">;</span><span class="br0">&#125;</span>
<span class="re1">.featured_image</span> <span class="br0">&#123;</span><span class="kw1">margin-right</span><span class="sy0">:</span> <span class="re3">15px</span><span class="sy0">;</span><span class="br0">&#125;</span>
<span class="re1">.featured_image</span> a <span class="br0">&#123;</span><span class="kw1">border</span><span class="sy0">:</span> <span class="re3">2px</span> <span class="kw2">solid</span> <span class="re0">#ddd</span><span class="sy0">;</span> <span class="kw1">float</span><span class="sy0">:</span><span class="kw1">left</span><span class="sy0">;</span> <span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">block</span><span class="sy0">;</span> <span class="kw1">width</span><span class="sy0">:</span> <span class="re3">60px</span><span class="sy0">;</span> <span class="kw1">height</span><span class="sy0">:</span> <span class="re3">60px</span> <span class="br0">&#125;</span>
<span class="re1">.featured_title</span> h2 <span class="br0">&#123;</span><span class="kw1">float</span><span class="sy0">:</span> <span class="kw1">left</span><span class="sy0">;</span> <span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">block</span><span class="sy0">;</span><span class="br0">&#125;</span></pre></div></div>

<h3>Optional</h3>
<p>Some people will bring up the fact that these post will be duplicated on the site. To counter this we will have to add variables in our page query and our featured query. You can follow this resource to resolve this:<br />
<a href="How to: Use two (or more) loops without duplicate posts" target="_blank">How to: Use two (or more) loops without duplicate posts</a> </p>
<h3>Related information</h3>
<p><a href="http://codex.wordpress.org/Include_Tags" title="Wordpress Include Tags codex">Wordpress Include Tags codex</a><br />
<a href="http://codex.wordpress.org/The_Loop" title="Wordpress Loop codex">Wordpress Loop codex</a><br />
<a href="http://codex.wordpress.org/Pages" title="Wordpress page codex">Wordpress Page codex</a><br />
<a href="http://beginwithanidea.com/coding/wordpress/post-thumbnail-wp-29/" title=" the_post_thumbnail();">Activating Post Thumbnail function</a></p>
]]></content:encoded>
			<wfw:commentRss>http://beginwithanidea.com/coding/wordpress/creating-a-featured-post-section-wthumbnails/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

