<?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>Cozmoslabs &#187; featured posts</title>
	<atom:link href="http://www.cozmoslabs.com/tag/featured-posts/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.cozmoslabs.com</link>
	<description>Web design and development experiment.</description>
	<lastBuildDate>Fri, 03 Feb 2012 16:05:17 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	
<xhtml:meta xmlns:xhtml="http://www.w3.org/1999/xhtml" name="robots" content="noindex" />
		<item>
		<title>Add &#8220;Featured Posts&#8221; to your Thematic child theme</title>
		<link>http://www.cozmoslabs.com/557-thematic-featured-posts/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=thematic-featured-posts</link>
		<comments>http://www.cozmoslabs.com/557-thematic-featured-posts/#comments</comments>
		<pubDate>Fri, 26 Jun 2009 13:35:54 +0000</pubDate>
		<dc:creator>Cristian</dc:creator>
				<category><![CDATA[Thematic]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[child theme]]></category>
		<category><![CDATA[featured posts]]></category>

		<guid isPermaLink="false">http://www.cozmoslabs.com/?p=557</guid>
		<description><![CDATA[Featured posts are common in WordPress magazine themes. They let you promote hot topics and bring your best articles right in front of your users. First thing we need to do is create a thematic child theme. This way we won’t make direct changes to Thematic. The featured posts will be inserted on the home [...]
Related posts:<ol>
<li><a href='http://www.cozmoslabs.com/961-exclude-posts-from-wordpress-navigation-in-thematic/' rel='bookmark' title='Exclude posts from WordPress Navigation in Thematic'>Exclude posts from WordPress Navigation in Thematic</a></li>
<li><a href='http://www.cozmoslabs.com/311-green-anyone-try-commune-thematic-child-theme/' rel='bookmark' title='&lt;span style=&quot;color:#7fae52&quot;&gt;Green anyone?&lt;/span&gt; Try Commune &#8211; Thematic Child Theme!'><span style="color:#7fae52">Green anyone?</span> Try Commune &#8211; Thematic Child Theme!</a></li>
<li><a href='http://www.cozmoslabs.com/1298-cozy-child-theme/' rel='bookmark' title='Cozy Child Theme'>Cozy Child Theme</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<div id="attachment_565" class="wp-caption alignright" style="width: 310px"><img src="http://www.cozmoslabs.com/wp-content/uploads/2009/04/featured_posts.jpg" alt="Featured Posts for Thematic" title="featured_posts" width="300" height="200" class="size-full wp-image-565" /><p class="wp-caption-text">Featured Posts for Thematic</p></div>
<p>Featured posts are common in WordPress magazine themes. They let you promote hot topics and bring your best articles right in front of your users. </p>
<p>First thing we need to do is create a <a href="http://www.cozmoslabs.com/2008/09/07/use-wordpress-as-a-cms-with-thematic-part1/">thematic child theme</a>. This way we won’t make direct changes to <a href="http://themeshaper.com/thematic/">Thematic</a>.</p>
<p>The featured posts will be inserted on the home page before the rest of the articles. We&#8217;ll display the latest 3 posts which are tagged &#8216;featured&#8217;. </p>
<p class="preview_download"><a href="http://www.cozmoslabs.com/projects/wp/?theme=featured" target="_blank"><img src="http://www.cozmoslabs.com/wp-content/plugins/download-monitor/img/preview.gif" border="0" alt="preview thematic child theme" /></a></p>
<p><span id="more-557"></span></p>
<p>We now have to add the code inside of functions.php file of your child theme (don&#8217;t forget the <em><&#63;php</em> opening tag and the <em>&#63;></em> ending tag).</p>

<div class="wp_codebox"><table><tr id="p5573"><td class="code" id="p557code3"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> featured_posts<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
&nbsp;
		<span style="color: #000088;">$my_query</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> WP_Query<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'tag=featured&amp;showposts=3'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">'&lt;ul id=&quot;featured-posts&quot;&gt;'</span><span style="color: #339933;">;</span>
		<span style="color: #000088;">$feat_class</span> <span style="color: #339933;">=</span> <a href="http://www.php.net/array"><span style="color: #990000;">array</span></a><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #b1b100;">while</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$my_query</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">have_posts</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> <span style="color: #000088;">$my_query</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">the_post</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #000088;">$feat_class</span> <span style="color: #339933;">=</span> <a href="http://www.php.net/array"><span style="color: #990000;">array</span></a><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #666666; font-style: italic;">// Category for the post queried</span>
				<span style="color: #b1b100;">foreach</span> <span style="color: #009900;">&#40;</span> <span style="color: #009900;">&#40;</span><a href="http://www.php.net/array"><span style="color: #990000;">array</span></a><span style="color: #009900;">&#41;</span> get_the_category<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$cat</span> <span style="color: #009900;">&#41;</span>
					<span style="color: #000088;">$feat_class</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'category-'</span> <span style="color: #339933;">.</span> <span style="color: #000088;">$cat</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">slug</span><span style="color: #339933;">;</span>
					<span style="color: #000088;">$feat_class</span> <span style="color: #339933;">=</span> <a href="http://www.php.net/join"><span style="color: #990000;">join</span></a><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot; &quot;</span><span style="color: #339933;">,</span> <span style="color: #000088;">$feat_class</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #000000; font-weight: bold;">?&gt;</span>
				<span style="color: #339933;">&lt;</span>li id<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;featured-&lt;?php the_ID(); ?&gt;&quot;</span> <span style="color: #000000; font-weight: bold;">class</span><span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;&lt;?php echo <span style="color: #006699; font-weight: bold;">$feat_class</span>; ?&gt;&quot;</span><span style="color: #339933;">&gt;</span>
					<span style="color: #000000; font-weight: bold;">&lt;?php</span> 
						<span style="color: #000088;">$posttitle</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'&lt;h4&gt;&lt;a href=&quot;'</span><span style="color: #339933;">;</span>
						<span style="color: #000088;">$posttitle</span> <span style="color: #339933;">.=</span> get_permalink<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
						<span style="color: #000088;">$posttitle</span> <span style="color: #339933;">.=</span> <span style="color: #0000ff;">'&quot; title=&quot;'</span><span style="color: #339933;">;</span>
						<span style="color: #000088;">$posttitle</span> <span style="color: #339933;">.=</span> __<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Permalink to '</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'thematic'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">.</span> the_title_attribute<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'echo=0'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
						<span style="color: #000088;">$posttitle</span> <span style="color: #339933;">.=</span> <span style="color: #0000ff;">'&quot; rel=&quot;bookmark&quot;&gt;'</span><span style="color: #339933;">;</span>
						<span style="color: #000088;">$posttitle</span> <span style="color: #339933;">.=</span> get_the_title<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>   
						<span style="color: #000088;">$posttitle</span> <span style="color: #339933;">.=</span> <span style="color: #0000ff;">&quot;&lt;/a&gt;&lt;/h4&gt;<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span><span style="color: #339933;">;</span>
						<span style="color: #b1b100;">echo</span> <span style="color: #000088;">$posttitle</span><span style="color: #339933;">;</span>
&nbsp;
						the_excerpt<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					<span style="color: #000000; font-weight: bold;">?&gt;</span>
&nbsp;
				<span style="color: #339933;">&lt;/</span>li<span style="color: #339933;">&gt;&lt;!--</span> <span style="color: #339933;">.</span>post <span style="color: #339933;">--&gt;</span>
		<span style="color: #000000; font-weight: bold;">&lt;?php</span>
		<span style="color: #b1b100;">endwhile</span><span style="color: #339933;">;</span>
		<span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">'&lt;/ul&gt;'</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
add_action<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'thematic_above_indexloop'</span><span style="color: #339933;">,</span><span style="color: #0000ff;">'featured_posts'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>The first line <em>$my_query = new WP_Query(&#8216;tag=featured&#038;showposts=3&#8242;);</em> defines the name of the tag that targets your posts (you can have any tag name there) and the number of featured articles (three in this case).</p>
<p>Right now it&#8217;s just a list of posts so a bit of css styling is in order to make it look attractive to your visitors. Add this css to your style.css file inside the Child Theme.</p>

<div class="wp_codebox"><table><tr id="p5574"><td class="code" id="p557code4"><pre class="css" style="font-family:monospace;">ul<span style="color: #cc00cc;">#featured-posts</span> <span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span> <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">15px</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">list-style</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#111</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">11px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">line-height</span><span style="color: #00AA00;">:</span><span style="color: #933;">14px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">font-family</span><span style="color: #00AA00;">:</span> Helvetica<span style="color: #00AA00;">,</span> Arial<span style="color: #00AA00;">,</span> <span style="color: #993333;">sans-serif</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#featured-posts</span> li <span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span> <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span> <span style="color: #933;">135px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #933;">12px</span> <span style="color: #933;">10px</span> <span style="color: #933;">10px</span> <span style="color: #933;">10px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">margin-right</span><span style="color: #00AA00;">:</span> <span style="color: #933;">15px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">min-height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">260px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#f1f1f1</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #933;">3px</span> <span style="color: #993333;">double</span> <span style="color: #cc00cc;">#ccc</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #cc00cc;">#featured-posts</span> li p <span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #cc00cc;">#featured-posts</span> li<span style="color: #3333ff;">:hover </span><span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#fff</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#featured-posts</span> li h4 a <span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">font-family</span><span style="color: #3333ff;">:Georgia</span><span style="color: #00AA00;">,</span> Times<span style="color: #00AA00;">,</span> <span style="color: #993333;">sans-serif</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">12px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">line-height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">13px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">block</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #933;">5px</span> <span style="color: #933;">1px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#111</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">font-weight</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">bold</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>I hope you find it useful and don&#8217;t hesitate to post in the comments were you&#8217;ve used this.</p>
<p>Related posts:<ol>
<li><a href='http://www.cozmoslabs.com/961-exclude-posts-from-wordpress-navigation-in-thematic/' rel='bookmark' title='Exclude posts from WordPress Navigation in Thematic'>Exclude posts from WordPress Navigation in Thematic</a></li>
<li><a href='http://www.cozmoslabs.com/311-green-anyone-try-commune-thematic-child-theme/' rel='bookmark' title='&lt;span style=&quot;color:#7fae52&quot;&gt;Green anyone?&lt;/span&gt; Try Commune &#8211; Thematic Child Theme!'><span style="color:#7fae52">Green anyone?</span> Try Commune &#8211; Thematic Child Theme!</a></li>
<li><a href='http://www.cozmoslabs.com/1298-cozy-child-theme/' rel='bookmark' title='Cozy Child Theme'>Cozy Child Theme</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://www.cozmoslabs.com/557-thematic-featured-posts/feed/</wfw:commentRss>
		<slash:comments>28</slash:comments>
		</item>
	</channel>
</rss>

