<?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>Design-Notes &#187; Wordpress</title>
	<atom:link href="http://design-notes.info/topics/tutorial/wordpress/feed/" rel="self" type="application/rss+xml" />
	<link>http://design-notes.info</link>
	<description>Design-Notes</description>
	<lastBuildDate>Wed, 23 Jun 2010 16:08:45 +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>Thematic Child Theme Snippets</title>
		<link>http://design-notes.info/tutorial/wordpress/thematic-child-theme-snippets/</link>
		<comments>http://design-notes.info/tutorial/wordpress/thematic-child-theme-snippets/#comments</comments>
		<pubDate>Tue, 21 Jul 2009 17:56:37 +0000</pubDate>
		<dc:creator>alexandra</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[Thematic]]></category>

		<guid isPermaLink="false">http://design-notes.info/?p=1981</guid>
		<description><![CDATA[After developed a couple of thematic child themes I think its time to collect a few snippets (for function.php) for future use. Hope you find them useful too.
Action hook and filter are very powerful in building thematic child themes. Before you go ahead and copy past things please make sure you have some level of [...]]]></description>
			<content:encoded><![CDATA[<p>After developed a couple of <strong>thematic child themes </strong>I think its time to collect a few snippets (for function.php) for future use. Hope you find them useful too.</p>
<p>Action hook and filter are very powerful in building thematic child themes. Before you go ahead and copy past things please make sure you have some level of understanding on <a href="http://codex.wordpress.org/Conditional_Tags">conditional tag</a>, <a href="http://themeshaper.com/action-hooks-wordpress-child-themes/">thematic action hook</a> and filter.</p>
<ul>You may be interested in the following related posts:</p>
<li><a href="http://design-notes.info/tutorial/wordpress/how-i-made-a-wordpress-child-theme-with-thematic-1/">how I made a wordpress Child theme with thematic (1) </a></li>
<li><a href="http://design-notes.info/tutorial/wordpress/how-i-made-a-wordpress-child-theme-with-thematic-2/">how I made a wordpress child theme with thematic (2) </a></li>
<li><a href="http://design-notes.info/download/free-wordpress-theme-audry-release/">Free Wordpress theme Audry release </a></li>
</ul>
<hr/>
NOTE: I will keep updating this post, and you are welcome to give suggestion.</p>
<h2>Add Javascript at head section</h2>
<p>This example shows how to add javascripts and link files in your child theme directory if it is home page.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">function my_in_head(){
if(is_home()){?&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> get_stylesheet_directory_uri<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>/js/jeasing.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> get_stylesheet_directory_uri<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>/js/cycle.js&quot;&gt;&lt;/script&gt;	&lt;script type=&quot;text/javascript&quot;&gt;   
&nbsp;
&lt;script type=&quot;text/javascript&quot;&gt;
//your scripts
&lt;/script&gt;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#125;</span>
add_action<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'wp_head'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'my_in_head'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<h2>Add a search in header</h2>
<p>Many sites demand the search at header section</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> add_search<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
<span style="color: #b1b100;">include</span> <span style="color: #009900;">&#40;</span>TEMPLATEPATH <span style="color: #339933;">.</span> <span style="color: #0000ff;">'/searchform.php'</span><span style="color: #009900;">&#41;</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_header'</span><span style="color: #339933;">,</span><span style="color: #0000ff;">'add_search'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<h2>Have an empty post footer</h2>
<p>Sometimes it is good to leave the post footer empty. You can use this filter to empty any other sections as you like</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">add_filter<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'thematic_postfooter'</span><span style="color: #339933;">,</span><span style="color: #0000ff;">'my_postfooter'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">function</span> my_postfooter<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
<span style="color: #666666; font-style: italic;">//nothing</span>
<span style="color: #009900;">&#125;</span>	
add_filter<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'thematic_postfooter'</span><span style="color: #339933;">,</span><span style="color: #0000ff;">'my_postfooter'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<h2>Add custom section for certain pages</h2>
<p>This snippet adds a div (deco) below the site header</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> add_deco<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>is_page<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">||</span>is_single<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">'&lt;div id=&quot;deco&quot;&gt;&lt;/div&gt;'</span><span style="color: #339933;">;</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#125;</span>
add_action<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'thematic_belowheader'</span><span style="color: #339933;">,</span><span style="color: #0000ff;">'add_deco'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>




ADD TO<a href="#" onclick="javascript:(function(){EN_CLIP_HOST='http://www.evernote.com';try{var x=document.createElement('SCRIPT');x.type='text/javascript';x.src=EN_CLIP_HOST+'/public/bookmarkClipper.js?'+(new Date().getTime()/100000);document.getElementsByTagName('head')[0].appendChild(x);}catch(e){location.href=EN_CLIP_HOST+'/clip.action?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title);}})();"><img src="http://img44.imageshack.us/img44/3714/picture4p.png" alt="Add To Evernote" /></a>  If this helps, why not tell your friends?


	<a rel="nofollow"  target="_blank" href="http://reddit.com/submit?url=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fthematic-child-theme-snippets%2F&amp;title=Thematic%20Child%20Theme%20Snippets" title="Reddit"><img src="http://design-notes.info/wp-content/plugins/sociable/images/reddit.png" title="Reddit" alt="Reddit" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://delicious.com/post?url=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fthematic-child-theme-snippets%2F&amp;title=Thematic%20Child%20Theme%20Snippets&amp;notes=After%20developed%20a%20couple%20of%20thematic%20child%20themes%20I%20think%20its%20time%20to%20collect%20a%20few%20snippets%20%28for%20function.php%29%20for%20future%20use.%20Hope%20you%20find%20them%20useful%20too.%0D%0A%0D%0AAction%20hook%20and%20filter%20are%20very%20powerful%20in%20building%20thematic%20child%20themes.%20Before%20you%20g" title="del.icio.us"><img src="http://design-notes.info/wp-content/plugins/sociable/images/delicious.png" title="del.icio.us" alt="del.icio.us" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fthematic-child-theme-snippets%2F&amp;title=Thematic%20Child%20Theme%20Snippets" title="StumbleUpon"><img src="http://design-notes.info/wp-content/plugins/sociable/images/stumbleupon.png" title="StumbleUpon" alt="StumbleUpon" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://www.facebook.com/share.php?u=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fthematic-child-theme-snippets%2F&amp;t=Thematic%20Child%20Theme%20Snippets" title="Facebook"><img src="http://design-notes.info/wp-content/plugins/sociable/images/facebook.png" title="Facebook" alt="Facebook" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://technorati.com/faves?add=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fthematic-child-theme-snippets%2F" title="Technorati"><img src="http://design-notes.info/wp-content/plugins/sociable/images/technorati.png" title="Technorati" alt="Technorati" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://www.designfloat.com/submit.php?url=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fthematic-child-theme-snippets%2F&amp;title=Thematic%20Child%20Theme%20Snippets" title="Design Float"><img src="http://design-notes.info/wp-content/plugins/sociable/images/designfloat.png" title="Design Float" alt="Design Float" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://identi.ca/notice/new?status_textarea=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fthematic-child-theme-snippets%2F" title="Identi.ca"><img src="http://design-notes.info/wp-content/plugins/sociable/images/identica.png" title="Identi.ca" alt="Identi.ca" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://www.friendfeed.com/share?title=Thematic%20Child%20Theme%20Snippets&amp;link=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fthematic-child-theme-snippets%2F" title="FriendFeed"><img src="http://design-notes.info/wp-content/plugins/sociable/images/friendfeed.png" title="FriendFeed" alt="FriendFeed" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://buzz.yahoo.com/submit/?submitUrl=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fthematic-child-theme-snippets%2F&amp;submitHeadline=Thematic%20Child%20Theme%20Snippets&amp;submitSummary=After%20developed%20a%20couple%20of%20thematic%20child%20themes%20I%20think%20its%20time%20to%20collect%20a%20few%20snippets%20%28for%20function.php%29%20for%20future%20use.%20Hope%20you%20find%20them%20useful%20too.%0D%0A%0D%0AAction%20hook%20and%20filter%20are%20very%20powerful%20in%20building%20thematic%20child%20themes.%20Before%20you%20g&amp;submitCategory=science&amp;submitAssetType=text" title="Yahoo! Buzz"><img src="http://design-notes.info/wp-content/plugins/sociable/images/yahoobuzz.png" title="Yahoo! Buzz" alt="Yahoo! Buzz" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://ping.fm/ref/?link=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fthematic-child-theme-snippets%2F&amp;title=Thematic%20Child%20Theme%20Snippets&amp;body=After%20developed%20a%20couple%20of%20thematic%20child%20themes%20I%20think%20its%20time%20to%20collect%20a%20few%20snippets%20%28for%20function.php%29%20for%20future%20use.%20Hope%20you%20find%20them%20useful%20too.%0D%0A%0D%0AAction%20hook%20and%20filter%20are%20very%20powerful%20in%20building%20thematic%20child%20themes.%20Before%20you%20g" title="Ping.fm"><img src="http://design-notes.info/wp-content/plugins/sociable/images/ping.png" title="Ping.fm" alt="Ping.fm" class="sociable-hovers" /></a>


<br/><br/>]]></content:encoded>
			<wfw:commentRss>http://design-notes.info/tutorial/wordpress/thematic-child-theme-snippets/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Integrate Minishowcase Gallery Into Wordpress</title>
		<link>http://design-notes.info/tutorial/wordpress/integrate-minishowcase-gallery-into-wordpress/</link>
		<comments>http://design-notes.info/tutorial/wordpress/integrate-minishowcase-gallery-into-wordpress/#comments</comments>
		<pubDate>Tue, 07 Jul 2009 14:29:56 +0000</pubDate>
		<dc:creator>alexandra</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[Ajax]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[Gallery]]></category>

		<guid isPermaLink="false">http://design-notes.info/?p=1827</guid>
		<description><![CDATA[After using WordPress for a year, I have tried many hacks and tips, and discovered many fun features myself. Here I&#8217;m going to show you how to integrate an Ajax gallery called minishowcase into WordPress.
minishowcase is a small and simple php/javascript online photo gallery, powered by AJAX that allows you to easily show your images [...]]]></description>
			<content:encoded><![CDATA[<p>After using WordPress for a year, I have tried many hacks and tips, and discovered many fun features myself. Here I&#8217;m going to show you how to integrate an Ajax gallery called <a href="http://minishowcase.net/" target="_blank">minishowcase</a> into WordPress.</p>
<blockquote><p>minishowcase is a small and simple php/javascript online photo gallery, powered by AJAX that allows you to easily show your images online, without complex databases or coding, allowing to have an up-and-running gallery in a few minutes.</p></blockquote>
<p>The official  version of minishowcase <strong>does not</strong> detect photos in sub folder. You need to download another version called <strong>minishowcase-scubabeer.zip</strong> if you want to modify your own, alternatively you can download the modified version I m using.</p>
<p>This is the <a href="http://minishowcase.net/community/comments.php?DiscussionID=325&amp;page=1" target="_blank">link</a> you can download the minishowcase that detects sub folders, you can also check up the result<a href="http://www.kakafans.net/gallery/" target="_blank"> here </a> or <a href="http://design-notes.info/download/minishowcase.zip">download</a> the version I modified.</p>
<p>Sample gallery<img src="http://design-notes.info/wp-content/uploads/2009/07/Picture-2-1024x490.png" alt="Picture 2" title="Picture 2" width="600"  class="alignnone size-large wp-image-1834" /></p>
<ul>You may be interested in the following related posts:</p>
<li><a href="http://design-notes.info/tutorial/jquery-tutorial/how-to-creat-a-feature-article-slide-show-with-thumbnails-and-indicator/">How to create a Feature Article slide show with thumbnails and indicator</a></li>
<li><a href="http://design-notes.info/tutorial/wordpress/integrate-feature-article-content-slide-show-into-wordpress/">integrate feature article content slide show into wordpress </a></li>
<li><a href="http://design-notes.info/resources/java-scripts/13-simple-gallery-scripts/">13 Excellent Gallery/Slider Scripts<br />
</a></li>
</ul>
<hr />
<ol><strong>Issues:</strong></p>
<li>A website that already have thousands of photos before installing WordPress. You need to display those files along with the photos in wordpress</li>
<li>You would like to display all your photos in the Media Gallery on a separate professional photographer looking page</li>
</ol>
<p><strong>Solution: </strong>modified version of minishowcase Ajax gallery</p>
<ol><strong>Features:</strong></p>
<li>A script detects all photos in <strong>uploads</strong> folder of WordPress automatically.</li>
<li><strong>Exclude</strong> thumbnails and small photos generated in wordpress in the gallery</li>
<li>Display your photos <strong>professionally</strong></li>
<li>Can be modified to have a <strong>similar layout</strong> as your main site.</li>
</ol>
<p>For those would like to get your hands dirty, these is how to modify minishowcase-scubabeer.zip. For those would like to use my version directly, you can drump to &#8220;what&#8217;s next&#8221; section at the bottom of the page to learn how to install it. </p>
<p>One disadvantage of minishowcase is the gallery folder is fixed (called galleries) which locates inside minishowcase root folder. I need to change this limitation to have it detect the<strong> uploads folder</strong> in my wordpress.</p>
<h2>Change photo directory</h2>
<p>I opened <strong>Ajax.gateway.php</strong> under library folder and change the folder directory from $base_path/galleries/$id/ to $base_path/../wp-content/uploads/$id/ . There are<strong> five</strong> places to change in this file. Then do the same thing for <strong>ajax.functions.js </strong>and you need to change four places for this one. The third file you need to change is index.php at root folder. There are <strong>two</strong> lines need to be changed. Its quite simple so far only search and replace.<br />
<img src="http://design-notes.info/wp-content/uploads/2009/07/Picture-21.png" alt="Integrate Minishowcase Gallery Into Wordpress" title="Picture 2" width="578" height="201" class="alignnone size-full wp-image-1836" /></p>
<h2>Exclude the thumb nail and small photo generated by Wordpress</h2>
<p>Locate this code from ajax.gateway.php</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">	<span style="color: #666666; font-style: italic;">// open directory and parse file list</span>
		<span style="color: #000088;">$num</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span>
		<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$dh</span> <span style="color: #339933;">=</span> <span style="color: #990000;">opendir</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$dir</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #666666; font-style: italic;">// iterate over file list &amp; output all filenames</span>
			<span style="color: #b1b100;">while</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$filename</span> <span style="color: #339933;">=</span> <span style="color: #990000;">readdir</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$dh</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">!==</span> <span style="color: #009900; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #000088;">$pinfo</span> <span style="color: #339933;">=</span> <span style="color: #990000;">pathinfo</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$filename</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span><span style="color: #990000;">strpos</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$filename</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;_&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">!==</span> <span style="color: #cc66cc;">0</span><span style="color: #009900;">&#41;</span>
				<span style="color: #339933;">&amp;&amp;</span> <span style="color: #009900;">&#40;</span><span style="color: #990000;">strpos</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$filename</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;.&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">!==</span> <span style="color: #cc66cc;">0</span><span style="color: #009900;">&#41;</span>
				<span style="color: #339933;">&amp;&amp;</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><span style="color: #990000;">in_array</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$filename</span><span style="color: #339933;">,</span> <span style="color: #000088;">$hidden_files</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
				<span style="color: #339933;">&amp;&amp;</span> <span style="color: #009900;">&#40;</span><span style="color: #990000;">in_array</span><span style="color: #009900;">&#40;</span><span style="color: #990000;">strToLower</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$pinfo</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">&quot;extension&quot;</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><span style="color: #000088;">$settings</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'allowed_extensions'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
				<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
					<span style="color: #000088;">$all_thumbs</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$filename</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span>
			<span style="color: #009900;">&#125;</span>
			<span style="color: #666666; font-style: italic;">// close directory</span>
			<span style="color: #990000;">closedir</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$dh</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span></pre></div></div>

<p>and replace it with this longer version which is saying if the file&#8217;s name contains 150&#215;150 or 300xsth or sthx300, it will not be displayed.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">	<span style="color: #666666; font-style: italic;">// open directory and parse file list</span>
		<span style="color: #000088;">$num</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span>
		<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$dh</span> <span style="color: #339933;">=</span> <span style="color: #990000;">opendir</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$dir</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #666666; font-style: italic;">// iterate over file list &amp; output all filenames</span>
			<span style="color: #b1b100;">while</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$filename</span> <span style="color: #339933;">=</span> <span style="color: #990000;">readdir</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$dh</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">!==</span> <span style="color: #009900; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #000088;">$pinfo</span> <span style="color: #339933;">=</span> <span style="color: #990000;">pathinfo</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$filename</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span><span style="color: #990000;">strpos</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$filename</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;_&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">!==</span> <span style="color: #cc66cc;">0</span><span style="color: #009900;">&#41;</span>
				<span style="color: #339933;">&amp;&amp;</span> <span style="color: #009900;">&#40;</span><span style="color: #990000;">strpos</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$filename</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;.&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">!==</span> <span style="color: #cc66cc;">0</span><span style="color: #009900;">&#41;</span>
				<span style="color: #339933;">&amp;&amp;</span> <span style="color: #009900;">&#40;</span><span style="color: #990000;">strpos</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$filename</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;150x150&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #cc66cc;">0</span><span style="color: #009900;">&#41;</span>
				<span style="color: #339933;">&amp;&amp;</span> <span style="color: #009900;">&#40;</span><span style="color: #990000;">strpos</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$filename</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;300x&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #cc66cc;">0</span><span style="color: #009900;">&#41;</span>
				<span style="color: #339933;">&amp;&amp;</span> <span style="color: #009900;">&#40;</span><span style="color: #990000;">strpos</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$filename</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;x300&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #cc66cc;">0</span><span style="color: #009900;">&#41;</span>
				<span style="color: #339933;">&amp;&amp;</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><span style="color: #990000;">in_array</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$filename</span><span style="color: #339933;">,</span> <span style="color: #000088;">$hidden_files</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
				<span style="color: #339933;">&amp;&amp;</span> <span style="color: #009900;">&#40;</span><span style="color: #990000;">in_array</span><span style="color: #009900;">&#40;</span><span style="color: #990000;">strToLower</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$pinfo</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">&quot;extension&quot;</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><span style="color: #000088;">$settings</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'allowed_extensions'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
				<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
					<span style="color: #000088;">$all_thumbs</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$filename</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span>
			<span style="color: #009900;">&#125;</span>
			<span style="color: #666666; font-style: italic;">// close directory</span>
			<span style="color: #990000;">closedir</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$dh</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span></pre></div></div>

<p>All done!!</p>
<h2>What&#8217;s next</h2>
<p>Configure your gallery settings according to <strong>Instructions.htm</strong>. You can also stylize it to have a similar look of your main site(for this part please read the instruction of minishowcase) Upload the modified minishowcase into the same level as your wp-content. <img src="http://design-notes.info/wp-content/uploads/2009/07/Picture-3.png" alt="Picture 3" title="Picture 3" width="176" height="434" class="alignnone size-full wp-image-1840" /><br />
Copy _info.txt and index.php in galleries folder to uploads folder.<br />
<img src="http://design-notes.info/wp-content/uploads/2009/07/Picture-4.png" alt="Picture 4" title="Picture 4" width="403" height="307" class="alignnone size-full wp-image-1841" /><img src="http://design-notes.info/wp-content/uploads/2009/07/Picture-5.png" alt="Picture 5" title="Picture 5" width="394" height="222" class="alignnone size-full wp-image-1842" /><br />
Your gallery URL will be http://yourdomain/minishocase<br />
if you change minihsowcase root folder name. The URL of your gallery will be http://yourdomain/yourfoldername  .  have fun!!</p>



ADD TO<a href="#" onclick="javascript:(function(){EN_CLIP_HOST='http://www.evernote.com';try{var x=document.createElement('SCRIPT');x.type='text/javascript';x.src=EN_CLIP_HOST+'/public/bookmarkClipper.js?'+(new Date().getTime()/100000);document.getElementsByTagName('head')[0].appendChild(x);}catch(e){location.href=EN_CLIP_HOST+'/clip.action?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title);}})();"><img src="http://img44.imageshack.us/img44/3714/picture4p.png" alt="Add To Evernote" /></a>  If this helps, why not tell your friends?


	<a rel="nofollow"  target="_blank" href="http://reddit.com/submit?url=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fintegrate-minishowcase-gallery-into-wordpress%2F&amp;title=Integrate%20Minishowcase%20Gallery%20Into%20Wordpress" title="Reddit"><img src="http://design-notes.info/wp-content/plugins/sociable/images/reddit.png" title="Reddit" alt="Reddit" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://delicious.com/post?url=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fintegrate-minishowcase-gallery-into-wordpress%2F&amp;title=Integrate%20Minishowcase%20Gallery%20Into%20Wordpress&amp;notes=After%20using%20WordPress%20for%20a%20year%2C%20I%20have%20tried%20many%20hacks%20and%20tips%2C%20and%20discovered%20many%20fun%20features%20myself.%20Here%20I%27m%20going%20to%20show%20you%20how%20to%20integrate%20an%20Ajax%20gallery%20called%20minishowcase%20into%20WordPress.%0D%0Aminishowcase%20is%20a%20small%20and%20simple%20php%2Fjavas" title="del.icio.us"><img src="http://design-notes.info/wp-content/plugins/sociable/images/delicious.png" title="del.icio.us" alt="del.icio.us" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fintegrate-minishowcase-gallery-into-wordpress%2F&amp;title=Integrate%20Minishowcase%20Gallery%20Into%20Wordpress" title="StumbleUpon"><img src="http://design-notes.info/wp-content/plugins/sociable/images/stumbleupon.png" title="StumbleUpon" alt="StumbleUpon" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://www.facebook.com/share.php?u=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fintegrate-minishowcase-gallery-into-wordpress%2F&amp;t=Integrate%20Minishowcase%20Gallery%20Into%20Wordpress" title="Facebook"><img src="http://design-notes.info/wp-content/plugins/sociable/images/facebook.png" title="Facebook" alt="Facebook" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://technorati.com/faves?add=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fintegrate-minishowcase-gallery-into-wordpress%2F" title="Technorati"><img src="http://design-notes.info/wp-content/plugins/sociable/images/technorati.png" title="Technorati" alt="Technorati" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://www.designfloat.com/submit.php?url=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fintegrate-minishowcase-gallery-into-wordpress%2F&amp;title=Integrate%20Minishowcase%20Gallery%20Into%20Wordpress" title="Design Float"><img src="http://design-notes.info/wp-content/plugins/sociable/images/designfloat.png" title="Design Float" alt="Design Float" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://identi.ca/notice/new?status_textarea=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fintegrate-minishowcase-gallery-into-wordpress%2F" title="Identi.ca"><img src="http://design-notes.info/wp-content/plugins/sociable/images/identica.png" title="Identi.ca" alt="Identi.ca" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://www.friendfeed.com/share?title=Integrate%20Minishowcase%20Gallery%20Into%20Wordpress&amp;link=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fintegrate-minishowcase-gallery-into-wordpress%2F" title="FriendFeed"><img src="http://design-notes.info/wp-content/plugins/sociable/images/friendfeed.png" title="FriendFeed" alt="FriendFeed" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://buzz.yahoo.com/submit/?submitUrl=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fintegrate-minishowcase-gallery-into-wordpress%2F&amp;submitHeadline=Integrate%20Minishowcase%20Gallery%20Into%20Wordpress&amp;submitSummary=After%20using%20WordPress%20for%20a%20year%2C%20I%20have%20tried%20many%20hacks%20and%20tips%2C%20and%20discovered%20many%20fun%20features%20myself.%20Here%20I%27m%20going%20to%20show%20you%20how%20to%20integrate%20an%20Ajax%20gallery%20called%20minishowcase%20into%20WordPress.%0D%0Aminishowcase%20is%20a%20small%20and%20simple%20php%2Fjavas&amp;submitCategory=science&amp;submitAssetType=text" title="Yahoo! Buzz"><img src="http://design-notes.info/wp-content/plugins/sociable/images/yahoobuzz.png" title="Yahoo! Buzz" alt="Yahoo! Buzz" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://ping.fm/ref/?link=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fintegrate-minishowcase-gallery-into-wordpress%2F&amp;title=Integrate%20Minishowcase%20Gallery%20Into%20Wordpress&amp;body=After%20using%20WordPress%20for%20a%20year%2C%20I%20have%20tried%20many%20hacks%20and%20tips%2C%20and%20discovered%20many%20fun%20features%20myself.%20Here%20I%27m%20going%20to%20show%20you%20how%20to%20integrate%20an%20Ajax%20gallery%20called%20minishowcase%20into%20WordPress.%0D%0Aminishowcase%20is%20a%20small%20and%20simple%20php%2Fjavas" title="Ping.fm"><img src="http://design-notes.info/wp-content/plugins/sociable/images/ping.png" title="Ping.fm" alt="Ping.fm" class="sociable-hovers" /></a>


<br/><br/>]]></content:encoded>
			<wfw:commentRss>http://design-notes.info/tutorial/wordpress/integrate-minishowcase-gallery-into-wordpress/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
		<item>
		<title>Make A Dynamic Page Accordion Menu With jQuery</title>
		<link>http://design-notes.info/tutorial/wordpress/accordion-menu/</link>
		<comments>http://design-notes.info/tutorial/wordpress/accordion-menu/#comments</comments>
		<pubDate>Thu, 25 Jun 2009 17:14:47 +0000</pubDate>
		<dc:creator>alexandra</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[JQuery]]></category>

		<guid isPermaLink="false">http://design-notes.info/?p=1680</guid>
		<description><![CDATA[There are many ways to add an flexible accordion menu to your web page. Most of them use div or paragraph but in this post I&#8217;m going to use unordered list and jQuery toggle to make an accordion menu.The most important information here is how to toggle list and how to hide/show the related page [...]]]></description>
			<content:encoded><![CDATA[<p>There are many ways to add an flexible accordion menu to your web page. Most of them use div or paragraph but in this post I&#8217;m going to use <strong>unordered list and jQuery toggle</strong> to make an accordion menu.The most important information here is <strong>how to toggle list and how to hide/show the related page to viewer</strong>. I explained here specifically on dynamic page display with <strong>WordPress</strong>, you can always take the same theory and apply in other situations.</p>
<ol>Features:	</p>
<li>Work in Wordpress</li>
<li>Accordion Slide</li>
<li>Show only top level page list when visiting top level pages</li>
<li>Show current page&#8217;s child page</li>
<li>Show allpages when visiting child page</li>
</ol>
<h2>Wordpress Code to display page list</h2>
<p>I got this code from <a href="http://codex.wordpress.org/Template_Tags/wp_list_pages">wordpress.org </a></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;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">post_parent</span><span style="color: #009900;">&#41;</span>
  <span style="color: #000088;">$children</span> <span style="color: #339933;">=</span> wp_list_pages<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;title_li=&amp;child_of=&quot;</span><span style="color: #339933;">.</span><span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">post_parent</span><span style="color: #339933;">.</span><span style="color: #0000ff;">&quot;&amp;echo=0&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #b1b100;">else</span>
  <span style="color: #000088;">$children</span> <span style="color: #339933;">=</span> wp_list_pages<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;title_li=&amp;child_of=&quot;</span><span style="color: #339933;">.</span><span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ID</span><span style="color: #339933;">.</span><span style="color: #0000ff;">&quot;&amp;echo=0&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$children</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
  &lt;ul&gt;
  <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> <span style="color: #000088;">$children</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
  &lt;/ul&gt;
  <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #009900;">&#125;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<p>The code displays all pages. This is the html code generated by Wordpress</p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;div id=&quot;page-list&quot;&gt;&lt;ul&gt;
&lt;li class=&quot;page_item page-item-1611&quot;&gt;&lt;a href=&quot;http://design-notes.info/archives/&quot; title=&quot;Archives&quot;&gt;Archives&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;page_item page-item-742&quot;&gt;&lt;a href=&quot;http://design-notes.info/blogroll/&quot; title=&quot;Blogroll&quot;&gt;Blogroll&lt;/a&gt;
&lt;ul&gt;
&lt;li class=&quot;page_item page-item-1683&quot;&gt;&lt;a href=&quot;http://design-notes.info/blogroll/this-is-a-demo-page/&quot; title=&quot;This is a demo page&quot;&gt;This is a demo page&lt;/a&gt;&lt;/li&gt;
&nbsp;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li class=&quot;page_item page-item-1096&quot;&gt;&lt;a href=&quot;http://design-notes.info/linking/&quot; title=&quot;linking&quot;&gt;linking&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;page_item page-item-113&quot;&gt;&lt;a href=&quot;http://design-notes.info/about/&quot; title=&quot;About&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;</pre></div></div>

<h2>Javascripts</h2>
<p>Now what we need to do is to create accordion with jQuery&#8217;s toggle function and make it dynamically display the page you want your reader to see. Wordpress&#8217;s &#8220;current_page_item&#8221; class is very useful here. I used it on line 5 to list parent pages and again on line 9 to show its child pages.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
</pre></td><td class="code"><pre class="java" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #006633;">ready</span><span style="color: #009900;">&#40;</span>function<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span><span style="color: #666666; font-style: italic;">//hide child page</span>
$<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'#page-list ul li.page_item ul'</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #666666; font-style: italic;">//when navigate to a child page show all pages</span>
$<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'#page-list ul li.current_page_item'</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">parent</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;ul&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">show</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #666666; font-style: italic;">//show page list when toggle</span>
$<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'#page-list ul li.active ul'</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">show</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #666666; font-style: italic;">//show cerrent page's child page</span>
$<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'#page-list ul li.current_page_item ul'</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">show</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	 $<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'#page-list ul li'</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">click</span><span style="color: #009900;">&#40;</span>function<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> 
$<span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;active&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                    $<span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">children</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'ul'</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">slideToggle</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;slow&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
            <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
&nbsp;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<h2>CSS</h2>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #cc00cc;">#page-list</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;">clear</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: #933;">20px</span> <span style="color: #cc66cc;">0</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">10px</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;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">relative</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#page-list</span> ul <span style="color: #00AA00;">&#123;</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;">margin</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
	<span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#page-list</span> ul li<span style="color: #00AA00;">&#123;</span>
<span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span> <span style="color: #933;">10px</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">10px</span><span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #933;">2px</span> <span style="color: #cc66cc;">0</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;">cursor</span><span style="color: #00AA00;">:</span><span style="color: #993333;">pointer</span><span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#ccc</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#page-list</span> ul li ul li<span style="color: #00AA00;">&#123;</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: #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;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">relative</span><span style="color: #00AA00;">;</span>
&nbsp;
<span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#page-list</span> ul li ul li a<span style="color: #00AA00;">&#123;</span>
	<span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#page-list</span> ul li a<span style="color: #00AA00;">&#123;</span>
<span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">3px</span> <span style="color: #933;">5px</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;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">150px</span><span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#f4f4f4</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<h2>Conclusion</h2>
<p>I first displayed all pages then hide or show them dynamically with jQuery. Its quite handy than using php alone. You can check out the demo page list on the sidebar by <strong>navigating to pages</strong>. I made a couple of demo pages for you too. </p>



ADD TO<a href="#" onclick="javascript:(function(){EN_CLIP_HOST='http://www.evernote.com';try{var x=document.createElement('SCRIPT');x.type='text/javascript';x.src=EN_CLIP_HOST+'/public/bookmarkClipper.js?'+(new Date().getTime()/100000);document.getElementsByTagName('head')[0].appendChild(x);}catch(e){location.href=EN_CLIP_HOST+'/clip.action?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title);}})();"><img src="http://img44.imageshack.us/img44/3714/picture4p.png" alt="Add To Evernote" /></a>  If this helps, why not tell your friends?


	<a rel="nofollow"  target="_blank" href="http://reddit.com/submit?url=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Faccordion-menu%2F&amp;title=Make%20A%20Dynamic%20Page%20Accordion%20Menu%20With%20jQuery" title="Reddit"><img src="http://design-notes.info/wp-content/plugins/sociable/images/reddit.png" title="Reddit" alt="Reddit" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://delicious.com/post?url=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Faccordion-menu%2F&amp;title=Make%20A%20Dynamic%20Page%20Accordion%20Menu%20With%20jQuery&amp;notes=There%20are%20many%20ways%20to%20add%20an%20flexible%20accordion%20menu%20to%20your%20web%20page.%20Most%20of%20them%20use%20div%20or%20paragraph%20but%20in%20this%20post%20I%27m%20going%20to%20use%20unordered%20list%20and%20jQuery%20toggle%20to%20make%20an%20accordion%20menu.The%20most%20important%20information%20here%20is%20how%20to%20toggl" title="del.icio.us"><img src="http://design-notes.info/wp-content/plugins/sociable/images/delicious.png" title="del.icio.us" alt="del.icio.us" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Faccordion-menu%2F&amp;title=Make%20A%20Dynamic%20Page%20Accordion%20Menu%20With%20jQuery" title="StumbleUpon"><img src="http://design-notes.info/wp-content/plugins/sociable/images/stumbleupon.png" title="StumbleUpon" alt="StumbleUpon" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://www.facebook.com/share.php?u=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Faccordion-menu%2F&amp;t=Make%20A%20Dynamic%20Page%20Accordion%20Menu%20With%20jQuery" title="Facebook"><img src="http://design-notes.info/wp-content/plugins/sociable/images/facebook.png" title="Facebook" alt="Facebook" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://technorati.com/faves?add=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Faccordion-menu%2F" title="Technorati"><img src="http://design-notes.info/wp-content/plugins/sociable/images/technorati.png" title="Technorati" alt="Technorati" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://www.designfloat.com/submit.php?url=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Faccordion-menu%2F&amp;title=Make%20A%20Dynamic%20Page%20Accordion%20Menu%20With%20jQuery" title="Design Float"><img src="http://design-notes.info/wp-content/plugins/sociable/images/designfloat.png" title="Design Float" alt="Design Float" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://identi.ca/notice/new?status_textarea=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Faccordion-menu%2F" title="Identi.ca"><img src="http://design-notes.info/wp-content/plugins/sociable/images/identica.png" title="Identi.ca" alt="Identi.ca" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://www.friendfeed.com/share?title=Make%20A%20Dynamic%20Page%20Accordion%20Menu%20With%20jQuery&amp;link=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Faccordion-menu%2F" title="FriendFeed"><img src="http://design-notes.info/wp-content/plugins/sociable/images/friendfeed.png" title="FriendFeed" alt="FriendFeed" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://buzz.yahoo.com/submit/?submitUrl=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Faccordion-menu%2F&amp;submitHeadline=Make%20A%20Dynamic%20Page%20Accordion%20Menu%20With%20jQuery&amp;submitSummary=There%20are%20many%20ways%20to%20add%20an%20flexible%20accordion%20menu%20to%20your%20web%20page.%20Most%20of%20them%20use%20div%20or%20paragraph%20but%20in%20this%20post%20I%27m%20going%20to%20use%20unordered%20list%20and%20jQuery%20toggle%20to%20make%20an%20accordion%20menu.The%20most%20important%20information%20here%20is%20how%20to%20toggl&amp;submitCategory=science&amp;submitAssetType=text" title="Yahoo! Buzz"><img src="http://design-notes.info/wp-content/plugins/sociable/images/yahoobuzz.png" title="Yahoo! Buzz" alt="Yahoo! Buzz" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://ping.fm/ref/?link=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Faccordion-menu%2F&amp;title=Make%20A%20Dynamic%20Page%20Accordion%20Menu%20With%20jQuery&amp;body=There%20are%20many%20ways%20to%20add%20an%20flexible%20accordion%20menu%20to%20your%20web%20page.%20Most%20of%20them%20use%20div%20or%20paragraph%20but%20in%20this%20post%20I%27m%20going%20to%20use%20unordered%20list%20and%20jQuery%20toggle%20to%20make%20an%20accordion%20menu.The%20most%20important%20information%20here%20is%20how%20to%20toggl" title="Ping.fm"><img src="http://design-notes.info/wp-content/plugins/sociable/images/ping.png" title="Ping.fm" alt="Ping.fm" class="sociable-hovers" /></a>


<br/><br/>]]></content:encoded>
			<wfw:commentRss>http://design-notes.info/tutorial/wordpress/accordion-menu/feed/</wfw:commentRss>
		<slash:comments>32</slash:comments>
		</item>
		<item>
		<title>how I made a wordpress child theme with thematic (2)</title>
		<link>http://design-notes.info/tutorial/wordpress/how-i-made-a-wordpress-child-theme-with-thematic-2/</link>
		<comments>http://design-notes.info/tutorial/wordpress/how-i-made-a-wordpress-child-theme-with-thematic-2/#comments</comments>
		<pubDate>Tue, 19 May 2009 03:45:09 +0000</pubDate>
		<dc:creator>alexandra</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[Thematic]]></category>

		<guid isPermaLink="false">http://design-notes.info/?p=1298</guid>
		<description><![CDATA[After getting the child theme&#8217;s index.php done, from previous theme development experiences, I imagine you already know what I need to do for single.php and page.php. Nothing fancy, copy, past and delete the extra.
single.php
Change

&#60;?php the_excerpt&#40;&#41;; ?&#62;

to

&#60;?php the_content&#40;&#41;; ?&#62;

Add this line to support multiple pagination.

&#60;?php wp_link_pages&#40;'before=&#60;div class=&#34;page-link&#34;&#62;' .__&#40;'Pages:', 'thematic'&#41; . '&#38;after=&#60;/div&#62;'&#41; ?&#62;

Then I add comments template [...]]]></description>
			<content:encoded><![CDATA[<p>After <a href="http://design-notes.info/tutorial/wordpress/how-i-made-a-wordpress-child-theme-with-thematic-1/">getting the child theme&#8217;s index.php done</a>, from previous theme development experiences, I imagine you already know what I need to do for single.php and page.php. Nothing fancy, <strong>copy, past and delete the extra.</strong></p>
<h2>single.php</h2>
<p>Change</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> 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></pre></div></div>

<p>to</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> the_content<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></pre></div></div>

<p>Add this line to support <strong>multiple pagination.</strong></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> wp_link_pages<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'before=&lt;div class=&quot;page-link&quot;&gt;'</span> <span style="color: #339933;">.</span>__<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Pages:'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'thematic'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">'&amp;after=&lt;/div&gt;'</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<p>Then I add comments template after page navigation</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> comments_template<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">''</span><span style="color: #339933;">,</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<p>Switch all widget area&#8217;s name to single</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> get_sidebar<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'index-bottom'</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<p>to</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> get_sidebar<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'single-bottom'</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<h2>page.php</h2>
<p>Apart from changing the widget area name again, I only added one extra line. Because the default thematic theme have a drop down menu design for sub pages which does not go well with my textured theme, I added this extra line for <strong>sub pages </strong>under post title.</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: #000088;">$children</span> <span style="color: #339933;">=</span> wp_list_pages<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'title_li=&amp;child_of='</span><span style="color: #339933;">.</span><span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ID</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'&amp;echo=0'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$children</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> <span style="color: #000088;">$children</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: #009900;">&#125;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<h2>Footer.php</h2>
<p>Only simple copy, past add &#8220;subsidiary&#8221; widget area.</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: #000000; font-weight: bold;">global</span> <span style="color: #000088;">$options</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">foreach</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$options</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$value</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>get_settings<span style="color: #009900;">&#40;</span> <span style="color: #000088;">$value</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'id'</span><span style="color: #009900;">&#93;</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">===</span> <span style="color: #009900; font-weight: bold;">FALSE</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #000088;">$$value</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'id'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$value</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'std'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span>
    <span style="color: #b1b100;">else</span> <span style="color: #009900;">&#123;</span> <span style="color: #000088;">$$value</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'id'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> get_settings<span style="color: #009900;">&#40;</span> <span style="color: #000088;">$value</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'id'</span><span style="color: #009900;">&#93;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span>
    &lt;/div&gt;&lt;!-- #main --&gt;
&nbsp;
<span style="color: #000000; font-weight: bold;">&lt;?php</span> thematic_abovefooter<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;
	&lt;div id=&quot;footer_bg&quot;&gt;
	&lt;div id=&quot;footer&quot;&gt;
        <span style="color: #000000; font-weight: bold;">&lt;?php</span> get_sidebar<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'subsidiary'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
        &lt;div id=&quot;siteinfo&quot;&gt;        
    		<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #666666; font-style: italic;">/* footer text set in theme options */</span> <span style="color: #b1b100;">echo</span> do_shortcode<span style="color: #009900;">&#40;</span>__<span style="color: #009900;">&#40;</span><span style="color: #990000;">stripslashes</span><span style="color: #009900;">&#40;</span>thematic_footertext<span style="color: #009900;">&#40;</span><span style="color: #000088;">$thm_footertext</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'thematic'</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>
		&lt;/div&gt;&lt;!-- #siteinfo --&gt;
	&lt;/div&gt;&lt;!-- #footer --&gt;
	&lt;/div&gt;&lt;!-- #footer_bg --&gt;
&nbsp;
<span style="color: #000000; font-weight: bold;">&lt;?php</span> thematic_belowfooter<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;
&lt;/div&gt;&lt;!-- #wrapper .hfeed --&gt;
&nbsp;
<span style="color: #000000; font-weight: bold;">&lt;?php</span> wp_footer<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">&lt;?php</span> thematic_after<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></pre></div></div>

<p>Finally, all done. the theme is free for downloading soon.</p>



ADD TO<a href="#" onclick="javascript:(function(){EN_CLIP_HOST='http://www.evernote.com';try{var x=document.createElement('SCRIPT');x.type='text/javascript';x.src=EN_CLIP_HOST+'/public/bookmarkClipper.js?'+(new Date().getTime()/100000);document.getElementsByTagName('head')[0].appendChild(x);}catch(e){location.href=EN_CLIP_HOST+'/clip.action?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title);}})();"><img src="http://img44.imageshack.us/img44/3714/picture4p.png" alt="Add To Evernote" /></a>  If this helps, why not tell your friends?


	<a rel="nofollow"  target="_blank" href="http://reddit.com/submit?url=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fhow-i-made-a-wordpress-child-theme-with-thematic-2%2F&amp;title=how%20I%20made%20a%20wordpress%20child%20theme%20with%20thematic%20%282%29%20" title="Reddit"><img src="http://design-notes.info/wp-content/plugins/sociable/images/reddit.png" title="Reddit" alt="Reddit" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://delicious.com/post?url=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fhow-i-made-a-wordpress-child-theme-with-thematic-2%2F&amp;title=how%20I%20made%20a%20wordpress%20child%20theme%20with%20thematic%20%282%29%20&amp;notes=After%20getting%20the%20child%20theme%27s%20index.php%20done%2C%20from%20previous%20theme%20development%20experiences%2C%20I%20imagine%20you%20already%20know%20what%20I%20need%20to%20do%20for%20single.php%20and%20page.php.%20Nothing%20fancy%2C%20copy%2C%20past%20and%20delete%20the%20extra.%0D%0Asingle.php%0D%0AChange%0D%0Ato%0D%0A%0D%0AAdd%20this" title="del.icio.us"><img src="http://design-notes.info/wp-content/plugins/sociable/images/delicious.png" title="del.icio.us" alt="del.icio.us" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fhow-i-made-a-wordpress-child-theme-with-thematic-2%2F&amp;title=how%20I%20made%20a%20wordpress%20child%20theme%20with%20thematic%20%282%29%20" title="StumbleUpon"><img src="http://design-notes.info/wp-content/plugins/sociable/images/stumbleupon.png" title="StumbleUpon" alt="StumbleUpon" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://www.facebook.com/share.php?u=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fhow-i-made-a-wordpress-child-theme-with-thematic-2%2F&amp;t=how%20I%20made%20a%20wordpress%20child%20theme%20with%20thematic%20%282%29%20" title="Facebook"><img src="http://design-notes.info/wp-content/plugins/sociable/images/facebook.png" title="Facebook" alt="Facebook" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://technorati.com/faves?add=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fhow-i-made-a-wordpress-child-theme-with-thematic-2%2F" title="Technorati"><img src="http://design-notes.info/wp-content/plugins/sociable/images/technorati.png" title="Technorati" alt="Technorati" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://www.designfloat.com/submit.php?url=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fhow-i-made-a-wordpress-child-theme-with-thematic-2%2F&amp;title=how%20I%20made%20a%20wordpress%20child%20theme%20with%20thematic%20%282%29%20" title="Design Float"><img src="http://design-notes.info/wp-content/plugins/sociable/images/designfloat.png" title="Design Float" alt="Design Float" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://identi.ca/notice/new?status_textarea=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fhow-i-made-a-wordpress-child-theme-with-thematic-2%2F" title="Identi.ca"><img src="http://design-notes.info/wp-content/plugins/sociable/images/identica.png" title="Identi.ca" alt="Identi.ca" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://www.friendfeed.com/share?title=how%20I%20made%20a%20wordpress%20child%20theme%20with%20thematic%20%282%29%20&amp;link=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fhow-i-made-a-wordpress-child-theme-with-thematic-2%2F" title="FriendFeed"><img src="http://design-notes.info/wp-content/plugins/sociable/images/friendfeed.png" title="FriendFeed" alt="FriendFeed" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://buzz.yahoo.com/submit/?submitUrl=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fhow-i-made-a-wordpress-child-theme-with-thematic-2%2F&amp;submitHeadline=how%20I%20made%20a%20wordpress%20child%20theme%20with%20thematic%20%282%29%20&amp;submitSummary=After%20getting%20the%20child%20theme%27s%20index.php%20done%2C%20from%20previous%20theme%20development%20experiences%2C%20I%20imagine%20you%20already%20know%20what%20I%20need%20to%20do%20for%20single.php%20and%20page.php.%20Nothing%20fancy%2C%20copy%2C%20past%20and%20delete%20the%20extra.%0D%0Asingle.php%0D%0AChange%0D%0Ato%0D%0A%0D%0AAdd%20this&amp;submitCategory=science&amp;submitAssetType=text" title="Yahoo! Buzz"><img src="http://design-notes.info/wp-content/plugins/sociable/images/yahoobuzz.png" title="Yahoo! Buzz" alt="Yahoo! Buzz" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://ping.fm/ref/?link=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fhow-i-made-a-wordpress-child-theme-with-thematic-2%2F&amp;title=how%20I%20made%20a%20wordpress%20child%20theme%20with%20thematic%20%282%29%20&amp;body=After%20getting%20the%20child%20theme%27s%20index.php%20done%2C%20from%20previous%20theme%20development%20experiences%2C%20I%20imagine%20you%20already%20know%20what%20I%20need%20to%20do%20for%20single.php%20and%20page.php.%20Nothing%20fancy%2C%20copy%2C%20past%20and%20delete%20the%20extra.%0D%0Asingle.php%0D%0AChange%0D%0Ato%0D%0A%0D%0AAdd%20this" title="Ping.fm"><img src="http://design-notes.info/wp-content/plugins/sociable/images/ping.png" title="Ping.fm" alt="Ping.fm" class="sociable-hovers" /></a>


<br/><br/>]]></content:encoded>
			<wfw:commentRss>http://design-notes.info/tutorial/wordpress/how-i-made-a-wordpress-child-theme-with-thematic-2/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>how I made a wordpress Child theme with thematic (1)</title>
		<link>http://design-notes.info/tutorial/wordpress/how-i-made-a-wordpress-child-theme-with-thematic-1/</link>
		<comments>http://design-notes.info/tutorial/wordpress/how-i-made-a-wordpress-child-theme-with-thematic-1/#comments</comments>
		<pubDate>Sun, 17 May 2009 14:27:28 +0000</pubDate>
		<dc:creator>alexandra</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[featured]]></category>
		<category><![CDATA[Thematic]]></category>

		<guid isPermaLink="false">http://design-notes.info/?p=1253</guid>
		<description><![CDATA[Thematic is a  WordPress Theme Framework that makes theme developing much easier. As WordPress gets more features, the theme release check list is getting longer too.  Its getting harder to rewrite 13 php files  (sometimes even more) for every theme. This post shows how I made a child theme based on thematic. [...]]]></description>
			<content:encoded><![CDATA[<p>Thematic is a  <a href="http://themeshaper.com/thematic/">WordPress Theme Framework</a> that makes theme developing much easier. As WordPress gets more features, the theme release check list is getting longer too.  Its getting harder to rewrite 13 php files  (sometimes even more) for every theme. This post shows how I made a<strong> child theme based on thematic</strong>. If you have developed your own theme before you will find this is easy to understand, if you haven&#8217;t I suggest you read a few <a href="http://www.google.com/search?q=wordpress+theme+development+tutorials&#038;ie=utf-8&#038;oe=utf-8&#038;aq=t&#038;rls=org.mozilla:en-US:official&#038;client=firefox-a">wordpress theme development tutorials</a> before reading this one. For those who still don&#8217;t know <a href="http://themeshaper.com/">Thematic</a> I suggest you go to their web site to have a brief look first.</p>
<p>Lately I got a free theme &#8220;audry&#8221; from PSDthemes. They let me develop it first before it is available for downloading to the public. They are so awesome! As I starting to develop the theme, I found myself coping and pasting from my old theme all the time which is tedious so I decided to give Thematic a try. At the beginning it did not give me a very good impression. When I started reading previous theme&#8217;s code, I see <strong>&#8216;thematic&#8217; everywhere</strong>. Do I really have to type &#8216;thematic &#8216; a million times to get a theme done? the answer is<strong> NO</strong>. This is how a million thematic <strong>appeared</strong></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> previous_posts_link<span style="color: #009900;">&#40;</span>__<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Newer posts &lt;span class=&quot;meta-nav&quot;&gt;&amp;raquo;&lt;/span&gt;'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'thematic'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<p><code>__('string')</code> is <strong>used to prepare code for translation</strong>. So the normal code we learned from wordpress.org will work just fine.</p>
<p>Now I am going to show you how thematic simplified my job.</p>
<p>You can have a look at the finished theme on the <a href="http://alexandratong.com/wordpress" target="_blank">Demo Site</a></p>
<h2>Things to ignore</h2>
<p>As I did this theme under thematic, there are some files I <strong>do not</strong> need to do at all.</p>
<ul>
<li>header.php</li>
<li>sidebar.php</li>
</ul>
<h2>The normal &#8216;While&#8217; loop</h2>
<p>I read a couple of posts on <a href="http://themeshaper.com/filters-wordpress-child-themes/">Themeshaper website</a> and found out that when doing a child theme in Wordpress, there is not much difference in php coding. What we used and learned from developing a normal theme works the same way as I did the child theme.  It only made my code shorter.</p>
<p>Here is a comparison.</p>
<h3>a full loop</h3>

<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;">if</span> <span style="color: #009900;">&#40;</span>have_posts<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: #000000; font-weight: bold;">?&gt;</span>
  <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">while</span> <span style="color: #009900;">&#40;</span>have_posts<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> the_post<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>
  &lt;div class=&quot;post&quot;&gt;
    &lt;div class=&quot;post-title&quot;&gt;
      &lt;div class=&quot;post-cat&quot;&gt;
        <span style="color: #000000; font-weight: bold;">&lt;?php</span> the_category<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">''</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
      &lt;/div&gt;
      &lt;h1&gt;&lt;a href=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_permalink<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot; rel=&quot;bookmark&quot; title=&quot;Permanent Link to <span style="color: #000000; font-weight: bold;">&lt;?php</span> the_title_attribute<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>&quot;&gt;
        <span style="color: #000000; font-weight: bold;">&lt;?php</span> the_title<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>
        &lt;/a&gt;&lt;/h1&gt;
      &lt;span class=&quot;post-author&quot;&gt; written by
      <span style="color: #000000; font-weight: bold;">&lt;?php</span> the_author<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>
      &lt;/span&gt; &lt;span class=&quot;post-time&quot;&gt;
      <span style="color: #000000; font-weight: bold;">&lt;?php</span> the_time<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'F jS, Y'</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
      &lt;/span&gt; &lt;span class=&quot;post-comments&quot;&gt;
      <span style="color: #000000; font-weight: bold;">&lt;?php</span> comments_number<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'no comment'</span><span style="color: #339933;">,</span><span style="color: #0000ff;">'1 comment'</span><span style="color: #339933;">,</span><span style="color: #0000ff;">'% comments'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
      &lt;/span&gt; &lt;span class=&quot;post-edit&quot;&gt;
        <span style="color: #000000; font-weight: bold;">&lt;?php</span> edit_post_link<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'edit'</span><span style="color: #339933;">,</span><span style="color: #0000ff;">''</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;/span&gt;&lt;/div&gt;
    &lt;div class=&quot;entry&quot;&gt;
     <span style="color: #000000; font-weight: bold;">&lt;?php</span> the_content<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #000000; font-weight: bold;">?&gt;</span>
      &lt;p class=&quot;postmeta  metadata&quot;&gt; &lt;span class=&quot;post-tag&quot;&gt;
        <span style="color: #000000; font-weight: bold;">&lt;?php</span> the_tags<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Tagged with: '</span><span style="color: #339933;">,</span><span style="color: #0000ff;">' &amp;bull; '</span><span style="color: #339933;">,</span><span style="color: #0000ff;">'&lt;br /&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
        &lt;/span&gt; &lt;span class=&quot;post-twitter&quot;&gt; &lt;a href=&quot;http://twitter.com/home?status=Currently reading <span style="color: #000000; font-weight: bold;">&lt;?php</span> the_permalink<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>&quot; title=&quot;Click to send this page to Twitter!&quot; target=&quot;_blank&quot;&gt;Share on Twitter&lt;/a&gt;&lt;/span&gt; &lt;span class=&quot;post-followresponses&quot;&gt; &lt;a href=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> comments_rss_link<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'RSS 2.0'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot; title=&quot;Comment RSS&quot; target=&quot;_blank&quot;&gt; Follow responses&lt;/a&gt;&lt;/span&gt;
        <span style="color: #000000; font-weight: bold;">&lt;?php</span>
<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'open'</span> <span style="color: #339933;">==</span> <span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">comment_status</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'open'</span> <span style="color: #339933;">==</span> <span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ping_status</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
<span style="color: #666666; font-style: italic;">// Both Comments and Pings are open</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span>
        &lt;span class=&quot;post-leaverespond&quot;&gt; &lt;a href=&quot;#respond&quot; title=&quot;To comment form&quot; target=&quot;_blank&quot;&gt;leave a response&lt;/a&gt;&lt;/span&gt;&lt;span class=&quot;post-trackback&quot;&gt;&lt;a href=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> trackback_url<span style="color: #009900;">&#40;</span>display<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot; title=&quot;Trackback&quot; target=&quot;_blank&quot;&gt;Trackback&lt;/a&gt; &lt;/span&gt;
        <span style="color: #000000; font-weight: bold;">&lt;?php</span> 
<span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">elseif</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'open'</span> <span style="color: #339933;">==</span> <span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">comment_status</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'open'</span> <span style="color: #339933;">==</span> <span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ping_status</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
<span style="color: #666666; font-style: italic;">// Only Pings are Open </span>
<span style="color: #000000; font-weight: bold;">?&gt;</span>
        Responses are currently closed, but you can &lt;a href=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> trackback_url<span style="color: #009900;">&#40;</span>display<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span> &quot;&gt;Trackback&lt;/a&gt; from your own site.
        <span style="color: #000000; font-weight: bold;">&lt;?php</span>
<span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">elseif</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'open'</span> <span style="color: #339933;">==</span> <span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">comment_status</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #339933;">!</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'open'</span> <span style="color: #339933;">==</span> <span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ping_status</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> 
<span style="color: #666666; font-style: italic;">// Comments are open, Pings are not </span>
<span style="color: #000000; font-weight: bold;">?&gt;</span>
        You can skip to the end and leave a response. Pinging is currently not allowed.
        <span style="color: #000000; font-weight: bold;">&lt;?php</span>
<span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">elseif</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'open'</span> <span style="color: #339933;">==</span> <span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">comment_status</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #339933;">!</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'open'</span> <span style="color: #339933;">==</span> <span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ping_status</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> 
<span style="color: #666666; font-style: italic;">// Neither Comments, nor Pings are open </span>
<span style="color: #000000; font-weight: bold;">?&gt;</span>
        Both comments and pings are currently closed.
        <span style="color: #000000; font-weight: bold;">&lt;?php</span> 
<span style="color: #009900;">&#125;</span> 
edit_post_link<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Edit'</span><span style="color: #339933;">,</span><span style="color: #0000ff;">''</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;/div&gt;
  &lt;/div&gt;
  <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">endwhile</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
  &lt;div class=&quot;navigation&quot;&gt; &lt;span class=&quot;previous-entries&quot;&gt;
    <span style="color: #000000; font-weight: bold;">&lt;?php</span> next_posts_link<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Older Entries'</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
    &lt;/span&gt; &lt;span class=&quot;next-entries&quot;&gt;
    <span style="color: #000000; font-weight: bold;">&lt;?php</span> previous_posts_link<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Newer Entries'</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
    &lt;/span&gt; &lt;/div&gt;
  <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">else</span> <span style="color: #339933;">:</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
  &lt;h2&gt;Not Found&lt;/h2&gt;
  &lt;p&gt;Sorry, but you are looking for something that isn't here.&lt;/p&gt;
  <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">endif</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<h3>Thematic Child theme loop</h3>

<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;">while</span> <span style="color: #009900;">&#40;</span>have_posts<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> the_post<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>
      <span style="color: #000000; font-weight: bold;">&lt;?php</span> thematic_postheader<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>
      <span style="color: #000000; font-weight: bold;">&lt;?php</span> the_content<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>
    <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">endwhile</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
 &lt;div class=&quot;navigation clear&quot;&gt; &lt;span class=&quot;nav-next&quot;&gt;
      <span style="color: #000000; font-weight: bold;">&lt;?php</span> next_posts_link<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'older posts'</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
      &lt;/span&gt; &lt;span class=&quot;nav-previous&quot;&gt;
      <span style="color: #000000; font-weight: bold;">&lt;?php</span> previous_posts_link<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'newer posts'</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
      &lt;/span&gt;  &lt;/div&gt;</pre></div></div>

<p>As you can see, it is significantly shorter. This is <strong>why</strong>:<br />
<strong> </strong></p>
<ul>
<li><strong>thematic_postheader=title+author+time+&#8230;</strong></li>
<li><strong>thematic_postfooter=tag+comments+&#8230;</strong></li>
</ul>
<p><strong></strong><br />
Also, I can choose what is in the post footer and post header. By default, <strong>time and  author</strong> are in post header while <strong>comments number, categories and tags</strong> are in the post footer.</p>
<div id="attachment_1262" class="wp-caption alignnone" style="width: 510px"><img class="size-full wp-image-1262" title="make a theme based on thematic" src="http://design-notes.info/wp-content/uploads/2009/05/picture-32.png" alt="thematic" width="500" /><p class="wp-caption-text">thematic</p></div>
<h2>The secret is in the functions.php</h2>
<p>To have customized look,I have to apply a few filters. You can go to  <a href="http://codex.wordpress.org/Plugin_API/Filter_Reference">WordPress filter reference </a>and thematic<a href="http://themeshaper.com/thematic/guide/?page_id=12"> filter hooks page</a> for references. Of course, if your desired theme look is very close to the default thematic look, you don&#8217;t have to change anything apart from CSS,but my theme is graphically a lot richer than default thematic theme, so I had to make a few changes.</p>
<p>Anyway, what is a <strong>filter.</strong>? Let&#8217;s forget about thematic for now. <strong>Filter is widely used in Wordpress theming</strong>.</p>
<p><strong>Here is an example:</strong></p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> my_excerpt<span style="color: #009900;">&#40;</span><span style="color: #000088;">$text</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
   <span style="color: #b1b100;">return</span> <span style="color: #990000;">str_replace</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'[...]'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'&lt;a class=&quot;readmore&quot; href=&quot;'</span><span style="color: #339933;">.</span> get_permalink<span style="color: #009900;">&#40;</span><span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ID</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">'&quot;&gt;'</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">'Read More'</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">'&lt;/a&gt;'</span><span style="color: #339933;">,</span> <span style="color: #000088;">$text</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
add_filter<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'the_excerpt'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'my_excerpt'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p><strong>WordPress passes required content to filter before echoing it out</strong>. I just passed all exerpt to this filter and filtered out the stupid[...] with &#8216;Read More&#8217;.</p>
<p>Now back to thematic, here are some examples for changing the post footer:<br />
This will give you an empty post footer.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> my_postfooter<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
<span style="color: #009900;">&#125;</span>
add_filter<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'thematic_postfooter'</span><span style="color: #339933;">,</span><span style="color: #0000ff;">'my_postfooter'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>This will display all the tags of the post.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> my_postfooter<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #b1b100;">echo</span> the_tags<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
add_filter<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'thematic_postfooter'</span><span style="color: #339933;">,</span><span style="color: #0000ff;">'my_postfooter'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Then I tried to stylize it:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> my_postfooter<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
	<span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">'&lt;big class=&quot;tags&quot;&gt;'</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'Tagged with: '</span><span style="color: #339933;">;</span>
	<span style="color: #000088;">$posttag</span><span style="color: #339933;">.=</span> the_tags<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">'&lt;/big&gt;'</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #009900;">&#125;</span>
add_filter<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'thematic_postfooter'</span><span style="color: #339933;">,</span><span style="color: #0000ff;">'my_postfooter'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Now I can make the desired loop by filtering unwanted content. When this is done, 80% of my work is finished</p>
<h2>Add the head foot and sidebar</h2>
<p>Before get_header, I copied and pasted <strong>this piece of code </strong>to my theme. It is associated with thematic theme option and controls the number of widgets and footer notes. No point to change it.</p>
<p>Then I simply put<strong> get_header, get_sidebar, the skinny loop,  get_footer,</strong> and this piece of <strong>navigation code</strong> in the index.php file</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"> &lt;div class=&quot;navigation clear&quot;&gt; &lt;span class=&quot;nav-next&quot;&gt;
      <span style="color: #000000; font-weight: bold;">&lt;?php</span> next_posts_link<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'older posts'</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
      &lt;/span&gt; &lt;span class=&quot;nav-previous&quot;&gt;
      <span style="color: #000000; font-weight: bold;">&lt;?php</span> previous_posts_link<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'newer posts'</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
      &lt;/span&gt;  &lt;/div&gt;</pre></div></div>

<p>Then I put a few more<strong> wigetized area</strong> as they are features in Thematic.<br />
This sits before the first post on a page:</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> get_sidebar<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'index-top'</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<p><img class="alignnone size-medium wp-image-1274" title="how I made a wordpress Child theme with thematic" src="http://design-notes.info/wp-content/uploads/2009/05/picture-42-300x139.png" alt="how I made a wordpress Child theme with thematic" width="300" height="139" /><br />
This sits before endwhile:</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;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$count</span><span style="color: #339933;">==</span><span style="color: #000088;">$thm_insert_position</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span><span style="color: #000000; font-weight: bold;">&lt;?php</span> get_sidebar<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'index-insert'</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span><span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #009900;">&#125;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #000088;">$count</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$count</span> <span style="color: #339933;">+</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<p><img class="alignnone size-medium wp-image-1275" title="how I made a wordpress Child theme with thematic" src="http://design-notes.info/wp-content/uploads/2009/05/picture-52-300x135.png" alt="how I made a wordpress Child theme with thematic" width="300" height="135" /><br />
This is after endwhile:</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> get_sidebar<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'index-bottom'</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<p><img class="alignnone size-medium wp-image-1276" title="picture-62" src="http://design-notes.info/wp-content/uploads/2009/05/picture-62-300x147.png" alt="picture-62" width="300" height="147" /></p>
<h2>CSS</h2>
<p>For CSS, the only different thing I did was add &#8216;Template: thematic&#8217;. The post on <a href="http://themeshaper.com/modular-css-wordpress-child-themes/">themeshaper.com</a> also suggests to import other thematic reset css files, but I m happy with the reset file I m using.</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #808080; font-style: italic;">/*
Theme Name: audry
Author: Alexandra tong and PSDthemes.com
Template: thematic
Version: 0.1
*/</span></pre></div></div>

<h2>Reset default files</h2>
<p>After getting index.php done I duplicated them and rename it as category.php,tag.php,author.php,date.php otherwise the default file in the parent theme will be used. The Child theme like commune used default parent files, but my theme structure is very different from the default.</p>
<h2>Final note</h2>
<p>In the next post I will show you how I changed page.php and single.php. If you think php filter is not very easy to understand I suggest you go to <a href="http://www.w3schools.com/php/filter_callback.asp">w3c&#8217;s online tutorial</a>. The Audry theme will be available for <strong>downloading</strong> soon.</p>



ADD TO<a href="#" onclick="javascript:(function(){EN_CLIP_HOST='http://www.evernote.com';try{var x=document.createElement('SCRIPT');x.type='text/javascript';x.src=EN_CLIP_HOST+'/public/bookmarkClipper.js?'+(new Date().getTime()/100000);document.getElementsByTagName('head')[0].appendChild(x);}catch(e){location.href=EN_CLIP_HOST+'/clip.action?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title);}})();"><img src="http://img44.imageshack.us/img44/3714/picture4p.png" alt="Add To Evernote" /></a>  If this helps, why not tell your friends?


	<a rel="nofollow"  target="_blank" href="http://reddit.com/submit?url=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fhow-i-made-a-wordpress-child-theme-with-thematic-1%2F&amp;title=how%20I%20made%20a%20wordpress%20Child%20theme%20with%20thematic%20%281%29" title="Reddit"><img src="http://design-notes.info/wp-content/plugins/sociable/images/reddit.png" title="Reddit" alt="Reddit" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://delicious.com/post?url=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fhow-i-made-a-wordpress-child-theme-with-thematic-1%2F&amp;title=how%20I%20made%20a%20wordpress%20Child%20theme%20with%20thematic%20%281%29&amp;notes=Thematic%20is%20a%20%20WordPress%20Theme%20Framework%20that%20makes%20theme%20developing%20much%20easier.%20As%20WordPress%20gets%20more%20features%2C%20the%20theme%20release%20check%20list%20is%20getting%20longer%20too.%20%20Its%20getting%20harder%20to%20rewrite%2013%20php%20files%20%20%28sometimes%20even%20more%29%20for%20every%20theme." title="del.icio.us"><img src="http://design-notes.info/wp-content/plugins/sociable/images/delicious.png" title="del.icio.us" alt="del.icio.us" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fhow-i-made-a-wordpress-child-theme-with-thematic-1%2F&amp;title=how%20I%20made%20a%20wordpress%20Child%20theme%20with%20thematic%20%281%29" title="StumbleUpon"><img src="http://design-notes.info/wp-content/plugins/sociable/images/stumbleupon.png" title="StumbleUpon" alt="StumbleUpon" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://www.facebook.com/share.php?u=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fhow-i-made-a-wordpress-child-theme-with-thematic-1%2F&amp;t=how%20I%20made%20a%20wordpress%20Child%20theme%20with%20thematic%20%281%29" title="Facebook"><img src="http://design-notes.info/wp-content/plugins/sociable/images/facebook.png" title="Facebook" alt="Facebook" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://technorati.com/faves?add=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fhow-i-made-a-wordpress-child-theme-with-thematic-1%2F" title="Technorati"><img src="http://design-notes.info/wp-content/plugins/sociable/images/technorati.png" title="Technorati" alt="Technorati" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://www.designfloat.com/submit.php?url=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fhow-i-made-a-wordpress-child-theme-with-thematic-1%2F&amp;title=how%20I%20made%20a%20wordpress%20Child%20theme%20with%20thematic%20%281%29" title="Design Float"><img src="http://design-notes.info/wp-content/plugins/sociable/images/designfloat.png" title="Design Float" alt="Design Float" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://identi.ca/notice/new?status_textarea=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fhow-i-made-a-wordpress-child-theme-with-thematic-1%2F" title="Identi.ca"><img src="http://design-notes.info/wp-content/plugins/sociable/images/identica.png" title="Identi.ca" alt="Identi.ca" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://www.friendfeed.com/share?title=how%20I%20made%20a%20wordpress%20Child%20theme%20with%20thematic%20%281%29&amp;link=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fhow-i-made-a-wordpress-child-theme-with-thematic-1%2F" title="FriendFeed"><img src="http://design-notes.info/wp-content/plugins/sociable/images/friendfeed.png" title="FriendFeed" alt="FriendFeed" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://buzz.yahoo.com/submit/?submitUrl=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fhow-i-made-a-wordpress-child-theme-with-thematic-1%2F&amp;submitHeadline=how%20I%20made%20a%20wordpress%20Child%20theme%20with%20thematic%20%281%29&amp;submitSummary=Thematic%20is%20a%20%20WordPress%20Theme%20Framework%20that%20makes%20theme%20developing%20much%20easier.%20As%20WordPress%20gets%20more%20features%2C%20the%20theme%20release%20check%20list%20is%20getting%20longer%20too.%20%20Its%20getting%20harder%20to%20rewrite%2013%20php%20files%20%20%28sometimes%20even%20more%29%20for%20every%20theme.&amp;submitCategory=science&amp;submitAssetType=text" title="Yahoo! Buzz"><img src="http://design-notes.info/wp-content/plugins/sociable/images/yahoobuzz.png" title="Yahoo! Buzz" alt="Yahoo! Buzz" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://ping.fm/ref/?link=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fhow-i-made-a-wordpress-child-theme-with-thematic-1%2F&amp;title=how%20I%20made%20a%20wordpress%20Child%20theme%20with%20thematic%20%281%29&amp;body=Thematic%20is%20a%20%20WordPress%20Theme%20Framework%20that%20makes%20theme%20developing%20much%20easier.%20As%20WordPress%20gets%20more%20features%2C%20the%20theme%20release%20check%20list%20is%20getting%20longer%20too.%20%20Its%20getting%20harder%20to%20rewrite%2013%20php%20files%20%20%28sometimes%20even%20more%29%20for%20every%20theme." title="Ping.fm"><img src="http://design-notes.info/wp-content/plugins/sociable/images/ping.png" title="Ping.fm" alt="Ping.fm" class="sociable-hovers" /></a>


<br/><br/>]]></content:encoded>
			<wfw:commentRss>http://design-notes.info/tutorial/wordpress/how-i-made-a-wordpress-child-theme-with-thematic-1/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>integrate feature article content slide show into wordpress</title>
		<link>http://design-notes.info/tutorial/wordpress/integrate-feature-article-content-slide-show-into-wordpress/</link>
		<comments>http://design-notes.info/tutorial/wordpress/integrate-feature-article-content-slide-show-into-wordpress/#comments</comments>
		<pubDate>Fri, 01 May 2009 08:19:20 +0000</pubDate>
		<dc:creator>alexandra</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[JQuery]]></category>
		<category><![CDATA[Slide show]]></category>
		<category><![CDATA[Tutorial]]></category>

		<guid isPermaLink="false">http://design-notes.info/?p=1069</guid>
		<description><![CDATA[As I promised in the previous post on How to create a Feature Article slide show with thumbnails and indicator I m going to integrate this into WordPress. Here is a live example at one of my projects http://www.kakafans.net/

To use the particular file I release for downloading in this post you have to

write a post [...]]]></description>
			<content:encoded><![CDATA[<p>As I promised in the previous post on<a title="Permanent Link to How to creat a Feature Article slide show with thumbnails and indicator" rel="bookmark" href="../tutorial/jquery-tutorial/how-to-creat-a-feature-article-slide-show-with-thumbnails-and-indicator/"> How to create a Feature Article slide show with thumbnails and indicator</a> I m going to integrate this into WordPress. Here is a <strong>live example </strong>at one of my projects <a href="http://www.kakafans.net/" target="_blank">http://www.kakafans.net/</a></p>
<p><img src="http://design-notes.info/wp-content/uploads/2009/05/picture-110.png" alt="integrate feature article slider into wordpress" title="integrate feature article slider into wordpress" width="549" height="427" class="alignnone size-full wp-image-1399" /></p>
<h3>To use the particular file I release for downloading in this post you have to</h3>
<ol>
<li>write a post you want to put in the gallery</li>
<li>tag it with &#8220;photo&#8221;</li>
<li>make a custom field called article_image</li>
<li>put image url into the custom field</li>
</ol>
<h2>This is how I made it</h2>
<h3>First get featured posts with tag</h3>
<p>What this snippet does is getting <strong>10</strong> posts with<strong> the tag</strong> named photo</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span>
<span style="color: #000088;">$feature_posts</span> <span style="color: #339933;">=</span> get_posts<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'tag=photo&amp;numberposts=10&amp;orderby=post_name&amp;order=DSC'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">foreach</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$feature_posts</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$post</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> setup_postdata<span style="color: #009900;">&#40;</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></pre></td></tr></table></div>

<h3>Use custom field to get image URL</h3>
<p>This code fetches the url you put in <strong>custom field</strong> called <strong>article_image</strong>, and put them in an array called<strong> image</strong></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: #000088;">$image</span> <span style="color: #339933;">=</span> get_post_meta<span style="color: #009900;">&#40;</span><span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ID</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'image'</span><span style="color: #339933;">,</span> <span style="color: #009900; font-weight: bold;">TRUE</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: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$image</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
  &lt;img src=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> <span style="color: #000088;">$image</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot; alt=&quot;Alt Text&quot; /&gt;
  <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #009900;">&#125;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
  <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #666666; font-style: italic;">//get article_image (custom field) ?&gt;</span>
  <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #000088;">$image</span> <span style="color: #339933;">=</span> get_post_meta<span style="color: #009900;">&#40;</span><span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ID</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'article_image'</span><span style="color: #339933;">,</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<h3>Code from previous tutorial</h3>
<p>Now this part should look familiar to you if you have read my previous post on <a href="http://design-notes.info/tutorial/jquery-tutorial/how-to-creat-a-feature-article-slide-show-with-thumbnails-and-indicator/">making a content slideshow</a>.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">&lt;div class=&quot;bigimg&quot; title=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_title<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>&quot; id=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> <span style="color: #000088;">$image</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot; name=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> <span style="color: #000088;">$image</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot; alt=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_title<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>&quot;&gt; &lt;a href=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_permalink<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot;&gt;&lt;img src=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> <span style="color: #000088;">$image</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot; alt=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_title<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>&quot; class=&quot;change&quot;/&gt;&lt;/a&gt; &lt;/div&gt;
<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>

<h3>Putting all php code together</h3>
<p>This is the php file, I called it gallery.php</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">&lt;div id=&quot;feature_gallery&quot; class=&quot;clear&quot;&gt;
<span style="color: #000000; font-weight: bold;">&lt;?php</span>
<span style="color: #000088;">$feature_posts</span> <span style="color: #339933;">=</span> get_posts<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'tag=photo&amp;numberposts=10&amp;orderby=post_name&amp;order=DSC'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">foreach</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$feature_posts</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$post</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> setup_postdata<span style="color: #009900;">&#40;</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>
&nbsp;
  <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #000088;">$image</span> <span style="color: #339933;">=</span> get_post_meta<span style="color: #009900;">&#40;</span><span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ID</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'image'</span><span style="color: #339933;">,</span> <span style="color: #009900; font-weight: bold;">TRUE</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: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$image</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
  &lt;img src=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> <span style="color: #000088;">$image</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot; alt=&quot;Alt Text&quot; /&gt;
  <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #009900;">&#125;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
  <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #666666; font-style: italic;">//get article_image (custom field) ?&gt;</span>
  <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #000088;">$image</span> <span style="color: #339933;">=</span> get_post_meta<span style="color: #009900;">&#40;</span><span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ID</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'article_image'</span><span style="color: #339933;">,</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
  &lt;div class=&quot;bigimg&quot; title=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_title<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>&quot; id=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> <span style="color: #000088;">$image</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot; name=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> <span style="color: #000088;">$image</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot; alt=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_title<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>&quot;&gt; &lt;a href=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_permalink<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot;&gt;&lt;img src=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> <span style="color: #000088;">$image</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot; alt=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_title<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>&quot; class=&quot;change&quot;/&gt;&lt;/a&gt; &lt;/div&gt;
<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>
&lt;div id=&quot;output&quot;&gt;&lt;/div&gt;
&nbsp;
&lt;/div&gt;</pre></div></div>

<h3>JavaScript File</h3>
<p>This is the same javascript file from previous tutorial. The only changes I have made are: <strong>1. I took out  $(&#8216;body&#8217;).addClass(&#8216;hasJS&#8217;); 2. I put thumbnail url in id attribute instead of title.</strong> I didn&#8217;t use &#8220;output&#8221; in my example, cause it is not necessary for that site but if you want to use it you can put <strong>excerpt </strong>or<strong> title</strong> in &#8220;title&#8221; attribute and it will display at your output div.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> 
&nbsp;
    <span style="color: #006600; font-style: italic;">// homepage cycles</span>
    $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#feature_gallery .bigimg'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">wrapAll</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'
&lt;div class=&quot;bigimgs&quot;&gt;'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">parents</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#feature_gallery'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">prepend</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'
&lt;ul id=&quot;feature_gallery_pager&quot; class=&quot;menu&quot;&gt;'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">cycle</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
        fx<span style="color: #339933;">:</span><span style="color: #3366CC;">'scrollLeft'</span><span style="color: #339933;">,</span>
        easing<span style="color: #339933;">:</span> <span style="color: #3366CC;">'swing'</span><span style="color: #339933;">,</span>
        inDelay<span style="color: #339933;">:</span>    <span style="color: #CC0000;">250</span><span style="color: #339933;">,</span>
        drop<span style="color: #339933;">:</span>       <span style="color: #CC0000;">40</span><span style="color: #339933;">,</span>
        timeout<span style="color: #339933;">:</span>    <span style="color: #CC0000;">5000</span><span style="color: #339933;">,</span>
        pause<span style="color: #339933;">:</span>      <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">,</span>
		before<span style="color: #339933;">:</span>  onBefore<span style="color: #339933;">,</span>
        slideExpr<span style="color: #339933;">:</span> <span style="color: #3366CC;">'.bigimg'</span><span style="color: #339933;">,</span>
        pager<span style="color: #339933;">:</span>      <span style="color: #3366CC;">'#feature_gallery_pager'</span><span style="color: #339933;">,</span>
        pagerAnchorBuilder<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>idx<span style="color: #339933;">,</span> slide<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> 
&nbsp;
            <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #3366CC;">'
	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img class=&quot;thumb&quot; src=&quot;'</span><span style="color: #339933;">+</span>slide.<span style="color: #660066;">id</span><span style="color: #339933;">+</span><span style="color: #3366CC;">'&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/li&gt;'</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span> 
&nbsp;
    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
$<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#feature_gallery_pager'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">jcarousel</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
        <span style="color: #000066;">scroll</span><span style="color: #339933;">:</span><span style="color: #CC0000;">1</span>
    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> onBefore<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#output'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Scrolling image:
&quot;</span> <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">title</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span> 
&nbsp;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;&lt;/</span>ul<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;/</span>div<span style="color: #339933;">&gt;</span></pre></div></div>

<h3>linking files</h3>
<p><strong>Last step</strong>, link the js file in head section and include your <strong>gallery.php</strong> file wherever you want the slide show to appear in your theme.</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;">include</span> <span style="color: #009900;">&#40;</span>TEMPLATEPATH <span style="color: #339933;">.</span> <span style="color: #0000ff;">'/gallery.php'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<p>You can download the gallery.php and gallery.js file <a href="http://design-notes.info/download/gallery.zip">here</a><br />
Please feel free to change the file for your convenience. I will try to make it into a plugin when I have time.</p>



ADD TO<a href="#" onclick="javascript:(function(){EN_CLIP_HOST='http://www.evernote.com';try{var x=document.createElement('SCRIPT');x.type='text/javascript';x.src=EN_CLIP_HOST+'/public/bookmarkClipper.js?'+(new Date().getTime()/100000);document.getElementsByTagName('head')[0].appendChild(x);}catch(e){location.href=EN_CLIP_HOST+'/clip.action?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title);}})();"><img src="http://img44.imageshack.us/img44/3714/picture4p.png" alt="Add To Evernote" /></a>  If this helps, why not tell your friends?


	<a rel="nofollow"  target="_blank" href="http://reddit.com/submit?url=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fintegrate-feature-article-content-slide-show-into-wordpress%2F&amp;title=integrate%20feature%20article%20content%20slide%20show%20into%20wordpress" title="Reddit"><img src="http://design-notes.info/wp-content/plugins/sociable/images/reddit.png" title="Reddit" alt="Reddit" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://delicious.com/post?url=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fintegrate-feature-article-content-slide-show-into-wordpress%2F&amp;title=integrate%20feature%20article%20content%20slide%20show%20into%20wordpress&amp;notes=As%20I%20promised%20in%20the%20previous%20post%20on%20How%20to%20create%20a%20Feature%20Article%20slide%20show%20with%20thumbnails%20and%20indicator%20I%20m%20going%20to%20integrate%20this%20into%20WordPress.%20Here%20is%20a%20live%20example%20at%20one%20of%20my%20projects%20http%3A%2F%2Fwww.kakafans.net%2F%0D%0A%0D%0A%0D%0ATo%20use%20the%20particula" title="del.icio.us"><img src="http://design-notes.info/wp-content/plugins/sociable/images/delicious.png" title="del.icio.us" alt="del.icio.us" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fintegrate-feature-article-content-slide-show-into-wordpress%2F&amp;title=integrate%20feature%20article%20content%20slide%20show%20into%20wordpress" title="StumbleUpon"><img src="http://design-notes.info/wp-content/plugins/sociable/images/stumbleupon.png" title="StumbleUpon" alt="StumbleUpon" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://www.facebook.com/share.php?u=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fintegrate-feature-article-content-slide-show-into-wordpress%2F&amp;t=integrate%20feature%20article%20content%20slide%20show%20into%20wordpress" title="Facebook"><img src="http://design-notes.info/wp-content/plugins/sociable/images/facebook.png" title="Facebook" alt="Facebook" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://technorati.com/faves?add=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fintegrate-feature-article-content-slide-show-into-wordpress%2F" title="Technorati"><img src="http://design-notes.info/wp-content/plugins/sociable/images/technorati.png" title="Technorati" alt="Technorati" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://www.designfloat.com/submit.php?url=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fintegrate-feature-article-content-slide-show-into-wordpress%2F&amp;title=integrate%20feature%20article%20content%20slide%20show%20into%20wordpress" title="Design Float"><img src="http://design-notes.info/wp-content/plugins/sociable/images/designfloat.png" title="Design Float" alt="Design Float" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://identi.ca/notice/new?status_textarea=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fintegrate-feature-article-content-slide-show-into-wordpress%2F" title="Identi.ca"><img src="http://design-notes.info/wp-content/plugins/sociable/images/identica.png" title="Identi.ca" alt="Identi.ca" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://www.friendfeed.com/share?title=integrate%20feature%20article%20content%20slide%20show%20into%20wordpress&amp;link=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fintegrate-feature-article-content-slide-show-into-wordpress%2F" title="FriendFeed"><img src="http://design-notes.info/wp-content/plugins/sociable/images/friendfeed.png" title="FriendFeed" alt="FriendFeed" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://buzz.yahoo.com/submit/?submitUrl=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fintegrate-feature-article-content-slide-show-into-wordpress%2F&amp;submitHeadline=integrate%20feature%20article%20content%20slide%20show%20into%20wordpress&amp;submitSummary=As%20I%20promised%20in%20the%20previous%20post%20on%20How%20to%20create%20a%20Feature%20Article%20slide%20show%20with%20thumbnails%20and%20indicator%20I%20m%20going%20to%20integrate%20this%20into%20WordPress.%20Here%20is%20a%20live%20example%20at%20one%20of%20my%20projects%20http%3A%2F%2Fwww.kakafans.net%2F%0D%0A%0D%0A%0D%0ATo%20use%20the%20particula&amp;submitCategory=science&amp;submitAssetType=text" title="Yahoo! Buzz"><img src="http://design-notes.info/wp-content/plugins/sociable/images/yahoobuzz.png" title="Yahoo! Buzz" alt="Yahoo! Buzz" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://ping.fm/ref/?link=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fintegrate-feature-article-content-slide-show-into-wordpress%2F&amp;title=integrate%20feature%20article%20content%20slide%20show%20into%20wordpress&amp;body=As%20I%20promised%20in%20the%20previous%20post%20on%20How%20to%20create%20a%20Feature%20Article%20slide%20show%20with%20thumbnails%20and%20indicator%20I%20m%20going%20to%20integrate%20this%20into%20WordPress.%20Here%20is%20a%20live%20example%20at%20one%20of%20my%20projects%20http%3A%2F%2Fwww.kakafans.net%2F%0D%0A%0D%0A%0D%0ATo%20use%20the%20particula" title="Ping.fm"><img src="http://design-notes.info/wp-content/plugins/sociable/images/ping.png" title="Ping.fm" alt="Ping.fm" class="sociable-hovers" /></a>


<br/><br/>]]></content:encoded>
			<wfw:commentRss>http://design-notes.info/tutorial/wordpress/integrate-feature-article-content-slide-show-into-wordpress/feed/</wfw:commentRss>
		<slash:comments>18</slash:comments>
		</item>
		<item>
		<title>Using WMD editor at comment area in WordPress</title>
		<link>http://design-notes.info/tutorial/wordpress/using-wmd-editor-at-comment-area-in-wordpress/</link>
		<comments>http://design-notes.info/tutorial/wordpress/using-wmd-editor-at-comment-area-in-wordpress/#comments</comments>
		<pubDate>Thu, 30 Apr 2009 12:45:54 +0000</pubDate>
		<dc:creator>alexandra</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[Plugin]]></category>

		<guid isPermaLink="false">http://design-notes.info/?p=1016</guid>
		<description><![CDATA[Recently someone asked me how to get WMD editor plug-in work with WordPress. It took me a while too, because the author&#8217;s explanation isn&#8217;t very clear.
WMD is a simple, lightweight HTML editor for blog comments, forum posts, and basic content management. You can add WMD to any textarea with one line of code. Add live [...]]]></description>
			<content:encoded><![CDATA[<p>Recently someone asked me how to get WMD editor plug-in work with WordPress. It took me a while too, because the author&#8217;s explanation isn&#8217;t very clear.</p>
<blockquote><p>WMD is a simple, lightweight HTML editor for blog comments, forum posts, and basic content management. You can add WMD to any textarea with one line of code. Add live preview with one line more. WMD works in nearly all modern browsers, and is now completely free to use.</p></blockquote>
<p>Yes, good explanation. Wait a minute, you did say exactly<strong> which line</strong> of code adds WMD editor to text area.Then I had to go to WMD&#8217;s site, download their files and found a &#8220;read me&#8221; file.</p>
<blockquote><p>By default, WMD will turn the first text area on your page into an editor.</p></blockquote>
<p>So the editor should turn up automatically. The reason it doesn&#8217;t sometimes, could be because of other plug-ins like wp_super cache. You have to clear the cached pages.<br />
If it still does not work add this line before &lt;/body&gt;</p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;"> &lt;script src=&quot;http://yourdomain.com/wp-ccontent/plugins/wmd/wmd.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre></div></div>

<p>If the WMD editor appeared at a wrong place, you put this class at the textarea:</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">class<span style="color: #00AA00;">=</span>”wmd-ignore”</pre></div></div>

<p>To view live preview put this in comment.php</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>h2 <span style="color: #000000; font-weight: bold;">class</span><span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;previewtitle&quot;</span><span style="color: #339933;">&gt;</span>Live Comment Preview<span style="color: #339933;">&lt;/</span>h2<span style="color: #339933;">&gt;</span></pre></div></div>




ADD TO<a href="#" onclick="javascript:(function(){EN_CLIP_HOST='http://www.evernote.com';try{var x=document.createElement('SCRIPT');x.type='text/javascript';x.src=EN_CLIP_HOST+'/public/bookmarkClipper.js?'+(new Date().getTime()/100000);document.getElementsByTagName('head')[0].appendChild(x);}catch(e){location.href=EN_CLIP_HOST+'/clip.action?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title);}})();"><img src="http://img44.imageshack.us/img44/3714/picture4p.png" alt="Add To Evernote" /></a>  If this helps, why not tell your friends?


	<a rel="nofollow"  target="_blank" href="http://reddit.com/submit?url=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fusing-wmd-editor-at-comment-area-in-wordpress%2F&amp;title=Using%20WMD%20editor%20at%20comment%20area%20in%20WordPress" title="Reddit"><img src="http://design-notes.info/wp-content/plugins/sociable/images/reddit.png" title="Reddit" alt="Reddit" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://delicious.com/post?url=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fusing-wmd-editor-at-comment-area-in-wordpress%2F&amp;title=Using%20WMD%20editor%20at%20comment%20area%20in%20WordPress&amp;notes=Recently%20someone%20asked%20me%20how%20to%20get%20WMD%20editor%20plug-in%20work%20with%20WordPress.%20It%20took%20me%20a%20while%20too%2C%20because%20the%20author%27s%20explanation%20isn%27t%20very%20clear.%0D%0AWMD%20is%20a%20simple%2C%20lightweight%20HTML%20editor%20for%20blog%20comments%2C%20forum%20posts%2C%20and%20basic%20content%20manage" title="del.icio.us"><img src="http://design-notes.info/wp-content/plugins/sociable/images/delicious.png" title="del.icio.us" alt="del.icio.us" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fusing-wmd-editor-at-comment-area-in-wordpress%2F&amp;title=Using%20WMD%20editor%20at%20comment%20area%20in%20WordPress" title="StumbleUpon"><img src="http://design-notes.info/wp-content/plugins/sociable/images/stumbleupon.png" title="StumbleUpon" alt="StumbleUpon" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://www.facebook.com/share.php?u=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fusing-wmd-editor-at-comment-area-in-wordpress%2F&amp;t=Using%20WMD%20editor%20at%20comment%20area%20in%20WordPress" title="Facebook"><img src="http://design-notes.info/wp-content/plugins/sociable/images/facebook.png" title="Facebook" alt="Facebook" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://technorati.com/faves?add=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fusing-wmd-editor-at-comment-area-in-wordpress%2F" title="Technorati"><img src="http://design-notes.info/wp-content/plugins/sociable/images/technorati.png" title="Technorati" alt="Technorati" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://www.designfloat.com/submit.php?url=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fusing-wmd-editor-at-comment-area-in-wordpress%2F&amp;title=Using%20WMD%20editor%20at%20comment%20area%20in%20WordPress" title="Design Float"><img src="http://design-notes.info/wp-content/plugins/sociable/images/designfloat.png" title="Design Float" alt="Design Float" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://identi.ca/notice/new?status_textarea=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fusing-wmd-editor-at-comment-area-in-wordpress%2F" title="Identi.ca"><img src="http://design-notes.info/wp-content/plugins/sociable/images/identica.png" title="Identi.ca" alt="Identi.ca" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://www.friendfeed.com/share?title=Using%20WMD%20editor%20at%20comment%20area%20in%20WordPress&amp;link=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fusing-wmd-editor-at-comment-area-in-wordpress%2F" title="FriendFeed"><img src="http://design-notes.info/wp-content/plugins/sociable/images/friendfeed.png" title="FriendFeed" alt="FriendFeed" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://buzz.yahoo.com/submit/?submitUrl=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fusing-wmd-editor-at-comment-area-in-wordpress%2F&amp;submitHeadline=Using%20WMD%20editor%20at%20comment%20area%20in%20WordPress&amp;submitSummary=Recently%20someone%20asked%20me%20how%20to%20get%20WMD%20editor%20plug-in%20work%20with%20WordPress.%20It%20took%20me%20a%20while%20too%2C%20because%20the%20author%27s%20explanation%20isn%27t%20very%20clear.%0D%0AWMD%20is%20a%20simple%2C%20lightweight%20HTML%20editor%20for%20blog%20comments%2C%20forum%20posts%2C%20and%20basic%20content%20manage&amp;submitCategory=science&amp;submitAssetType=text" title="Yahoo! Buzz"><img src="http://design-notes.info/wp-content/plugins/sociable/images/yahoobuzz.png" title="Yahoo! Buzz" alt="Yahoo! Buzz" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://ping.fm/ref/?link=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fusing-wmd-editor-at-comment-area-in-wordpress%2F&amp;title=Using%20WMD%20editor%20at%20comment%20area%20in%20WordPress&amp;body=Recently%20someone%20asked%20me%20how%20to%20get%20WMD%20editor%20plug-in%20work%20with%20WordPress.%20It%20took%20me%20a%20while%20too%2C%20because%20the%20author%27s%20explanation%20isn%27t%20very%20clear.%0D%0AWMD%20is%20a%20simple%2C%20lightweight%20HTML%20editor%20for%20blog%20comments%2C%20forum%20posts%2C%20and%20basic%20content%20manage" title="Ping.fm"><img src="http://design-notes.info/wp-content/plugins/sociable/images/ping.png" title="Ping.fm" alt="Ping.fm" class="sociable-hovers" /></a>


<br/><br/>]]></content:encoded>
			<wfw:commentRss>http://design-notes.info/tutorial/wordpress/using-wmd-editor-at-comment-area-in-wordpress/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>30+ Wordpress snippets collection (1)</title>
		<link>http://design-notes.info/tutorial/wordpress/wordpress-snippets-collection/</link>
		<comments>http://design-notes.info/tutorial/wordpress/wordpress-snippets-collection/#comments</comments>
		<pubDate>Fri, 20 Feb 2009 21:38:29 +0000</pubDate>
		<dc:creator>alexandra</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[Recommended]]></category>
		<category><![CDATA[Snippets]]></category>

		<guid isPermaLink="false">http://localhost:8888/wordpress/?p=94</guid>
		<description><![CDATA[Its painful to look everywhere for a little piece of code. Here I listed 30+commonly used snippets. Hope this helps people develop their themes.]]></description>
			<content:encoded><![CDATA[<p>Its painful to look everywhere for a little piece of code. Here I listed 30 commonly used snippets. Hope this helps people develop their themes.<br />
<strong><br />
</strong></p>
<h2><strong>Header</strong></h2>
<p><strong></strong></p>
<h3>Meta</h3>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> bloginfo<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'html_type'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>; charset=<span style="color: #000000; font-weight: bold;">&lt;?php</span> bloginfo<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'charset'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot; /&gt;
&lt;meta name=&quot;generator&quot; content=&quot;WordPress <span style="color: #000000; font-weight: bold;">&lt;?php</span> bloginfo<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'version'</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>

<h3>Dynamic title</h3>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">&lt;title&gt;
<span style="color: #000000; font-weight: bold;">&lt;?php</span>
<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>is_home<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
<span style="color: #b1b100;">echo</span> bloginfo<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'name'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">elseif</span> <span style="color: #009900;">&#40;</span>is_404<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
<span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">'404 Not Found'</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">elseif</span> <span style="color: #009900;">&#40;</span>is_category<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
<span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">'Category:'</span><span style="color: #339933;">;</span> wp_title<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">elseif</span> <span style="color: #009900;">&#40;</span>is_search<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
<span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">'Search Results'</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">elseif</span> <span style="color: #009900;">&#40;</span> is_day<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">||</span> is_month<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">||</span> is_year<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
<span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">'Archives:'</span><span style="color: #339933;">;</span> wp_title<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #009900;">&#123;</span>
<span style="color: #b1b100;">echo</span> wp_title<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span>
&lt;/title&gt;</pre></div></div>

<h3>Link file:</h3>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">&lt;script type=&quot;text/javascript&quot; src=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> bloginfo<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'template_directory'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">.</span><span style="color: #0000ff;">'/lib/jquery-1.3.2.js'</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot;&gt;&lt;/script&gt;</pre></div></div>

<h3>RSS</h3>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">&lt;div id=&quot;rss&quot;&gt; &lt;a href=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> bloginfo<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'rss2_url'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot; title=&quot;Subscribe to us&quot;&gt;&lt;/a&gt; &lt;/div&gt;</pre></div></div>

<h3>List parent category only:</h3>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span> wp_list_categories<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'sort_column=menu_order&amp;depth=1&amp;title_li='</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<h3>Display child category:</h3>

<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;">if</span> <span style="color: #009900;">&#40;</span>is_category<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>wp_list_categories<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'orderby=id&amp;show_count=0&amp;title_li=0&amp;child_of='</span><span style="color: #339933;">.</span><span style="color: #000088;">$cat</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<h3>List pages</h3>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span> wp_list_pages<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'title_li=&amp;depth=1'</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<h3>Display subpage:</h3>

<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: #000088;">$children</span> <span style="color: #339933;">=</span> wp_list_pages<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'title_li=&amp;child_of='</span><span style="color: #339933;">.</span><span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ID</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'&amp;echo=0'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$children</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> <span style="color: #000088;">$children</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: #009900;">&#125;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>is_category<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>wp_list_categories<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'orderby=id&amp;show_count=0&amp;title_li=0&amp;child_of='</span><span style="color: #339933;">.</span><span style="color: #000088;">$cat</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<h2>Index</h2>
<h3>The Loop</h3>

<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;">if</span> <span style="color: #009900;">&#40;</span>have_posts<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: #000000; font-weight: bold;">?&gt;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">while</span> <span style="color: #009900;">&#40;</span>have_posts<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> the_post<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;
.......
&nbsp;
<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">endwhile</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
&nbsp;
&lt;div class=&quot;navigation&quot;&gt; &lt;span class=&quot;previous-entries&quot;&gt;
<span style="color: #000000; font-weight: bold;">&lt;?php</span> next_posts_link<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Older Entries'</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
&lt;/span&gt; &lt;span class=&quot;next-entries&quot;&gt;
<span style="color: #000000; font-weight: bold;">&lt;?php</span> previous_posts_link<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Newer Entries'</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
&lt;/span&gt; &lt;/div&gt;
<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">else</span> <span style="color: #339933;">:</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
&lt;h2&gt;Not Found&lt;/h2&gt;
&lt;p&gt;Sorry, but you are looking for something that isn't here.&lt;/p&gt;
<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">endif</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<h3>Post title plus permarlink</h3>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">&lt;h1&gt;&lt;a href=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_permalink<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot; rel=&quot;bookmark&quot; title=&quot;Permanent Link to <span style="color: #000000; font-weight: bold;">&lt;?php</span> the_title_attribute<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>&quot;&gt;
<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_title<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>
&lt;/a&gt;&lt;/h1&gt;</pre></div></div>

<h3>Display date categories and comment counts</h3>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span> the_time<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'F jS, Y'</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_category<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">','</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
<span style="color: #000000; font-weight: bold;">&lt;?php</span> comments_number<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'no comment'</span><span style="color: #339933;">,</span><span style="color: #0000ff;">'1 comment'</span><span style="color: #339933;">,</span><span style="color: #0000ff;">'% comments'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<h3>Edit post</h3>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span> edit_post_link<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'edit'</span><span style="color: #339933;">,</span><span style="color: #0000ff;">''</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></pre></div></div>

<h3>Display highlight images with excerpt. This code displays random thumbnail images from media gallery.</h3>
<p><a id="anchor" href="#"></a></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: #000088;">$args</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span>
<span style="color: #0000ff;">'post_type'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'attachment'</span><span style="color: #339933;">,</span>
<span style="color: #0000ff;">'numberposts'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #339933;">-</span><span style="color: #cc66cc;">1</span><span style="color: #339933;">,</span>
<span style="color: #0000ff;">'post_status'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #009900; font-weight: bold;">null</span><span style="color: #339933;">,</span>
<span style="color: #0000ff;">'post_parent'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ID</span><span style="color: #339933;">,</span>
<span style="color: #0000ff;">'orderby'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'rand'</span>
<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$attachments</span> <span style="color: #339933;">=</span> get_posts<span style="color: #009900;">&#40;</span><span style="color: #000088;">$args</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$noimages</span> <span style="color: #339933;">=</span> <span style="color: #990000;">count</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$attachments</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$attachments</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
<span style="color: #b1b100;">foreach</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$attachments</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$attachment</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
<span style="color: #000088;">$alttxt</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$attachment</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">post_title</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$imgid</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$attachment</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ID</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$fileurl</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$attachment</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">guid</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000088;">$meta</span> <span style="color: #339933;">=</span> wp_get_attachment_metadata<span style="color: #009900;">&#40;</span><span style="color: #000088;">$imgid</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$imgw</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$meta</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'sizes'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'thumbnail'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'width'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$imgh</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$meta</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'sizes'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'thumbnail'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'height'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000088;">$imgext</span> <span style="color: #339933;">=</span> <span style="color: #990000;">substr</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$fileurl</span><span style="color: #339933;">,</span> <span style="color: #339933;">-</span><span style="color: #cc66cc;">4</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$fileurl</span> <span style="color: #339933;">=</span> <span style="color: #990000;">substr</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$fileurl</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">,</span> <span style="color: #339933;">-</span><span style="color: #cc66cc;">4</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$fileurl</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$fileurl</span><span style="color: #339933;">.</span><span style="color: #0000ff;">&quot;-&quot;</span><span style="color: #339933;">.</span><span style="color: #000088;">$imgw</span><span style="color: #339933;">.</span><span style="color: #0000ff;">&quot;x&quot;</span><span style="color: #339933;">.</span><span style="color: #000088;">$imgh</span><span style="color: #339933;">.</span><span style="color: #000088;">$imgext</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// construct the image</span>
<span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">&quot;&lt;img src='&quot;</span><span style="color: #339933;">.</span><span style="color: #000088;">$fileurl</span><span style="color: #339933;">.</span><span style="color: #0000ff;">&quot;' alt='&quot;</span><span style="color: #339933;">.</span><span style="color: #000088;">$alttxt</span><span style="color: #339933;">.</span><span style="color: #0000ff;">&quot;' class='alignleft highlightimg' /&gt;&quot;</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">break</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
the_excerpt<span style="color: #009900;">&#40;</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></pre></div></div>

<h3>Display tags</h3>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span> the_tags<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Tagged with: '</span><span style="color: #339933;">,</span><span style="color: #0000ff;">' &amp;bull; '</span><span style="color: #339933;">,</span><span style="color: #0000ff;">'&lt;br /&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<h3>Spread the word on twitter</h3>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">&lt;a href=&quot;http://twitter.com/home?status=Currently reading <span style="color: #000000; font-weight: bold;">&lt;?php</span> the_permalink<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>&quot; title=&quot;Click to send this page to Twitter!&quot; target=&quot;_blank&quot;&gt;Twitter&lt;/a&gt;</pre></div></div>

<h3>Comment RSS</h3>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">&lt;a href=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> comments_rss_link<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'RSS 2.0'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot; title=&quot;Comment RSS&quot; target=&quot;_blank&quot;&gt; Follow responses&lt;/a&gt;</pre></div></div>

<h3>Jump to comment form</h3>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>a href<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;#respond&quot;</span> title<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;To comment form&quot;</span> target<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;_blank&quot;</span><span style="color: #339933;">&gt;</span>leave a response<span style="color: #339933;">&lt;/</span>a<span style="color: #339933;">&gt;</span></pre></div></div>

<h3>Trackback</h3>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">&lt;a href=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> trackback_url<span style="color: #009900;">&#40;</span>display<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot; title=&quot;Trackback&quot; target=&quot;_blank&quot;&gt;Trackback&lt;/a&gt;</pre></div></div>

<h2>Sidebar</h2>
<h3>Dynamic Sidebar</h3>

<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;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #339933;">!</span><span style="color: #990000;">function_exists</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'dynamic_sidebar'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">||</span> <span style="color: #339933;">!</span>dynamic_sidebar<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'right-sidebar'</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>
&nbsp;
<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">endif</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<h3>Your own tag cloud code: the texts varies from 8px to 36px</h3>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"> &lt;h2&gt;Tags&lt;/h2&gt;
<span style="color: #000000; font-weight: bold;">&lt;?php</span> wp_tag_cloud<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'smallest=8&amp;largest=36&amp;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<h3>Monthly Archive</h3>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"> <span style="color: #000000; font-weight: bold;">&lt;?php</span> wp_get_archives<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'type=monthly'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<h2>Footer</h2>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">&lt;div id=&quot;footer&quot;&gt;
&lt;div class=&quot;foot&quot;&gt;© Copryright
<span style="color: #000000; font-weight: bold;">&lt;?php</span> bloginfo<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'title'</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
. All Rights Reserved.&lt;/div&gt;
<span style="color: #000000; font-weight: bold;">&lt;?php</span> wp_footer<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>
&lt;/div&gt;</pre></div></div>

<h2>Other</h2>
<h3>Display certain page named &#8216;About&#8217;</h3>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span>
query_posts<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'pagename=about'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<h3>Include custom file</h3>

<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;">include</span> <span style="color: #009900;">&#40;</span>TEMPLATEPATH <span style="color: #339933;">.</span> <span style="color: #0000ff;">'/sidebar2.php'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<h3>Get posts in category 1 from out side a loop and store them as &#8216;feature posts&#8217;</h3>

<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: #000088;">$feature_posts</span> <span style="color: #339933;">=</span> get_posts<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'category=1&amp;numberposts=5&amp;orderby=post_name&amp;order=DSC'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">foreach</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$feature_posts</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$post</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> setup_postdata<span style="color: #009900;">&#40;</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>
&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>

<h3>Get custom field(image url in this case):</h3>

<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: #000088;">$image</span> <span style="color: #339933;">=</span> get_post_meta<span style="color: #009900;">&#40;</span><span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ID</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'image'</span><span style="color: #339933;">,</span> <span style="color: #009900; font-weight: bold;">TRUE</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: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$image</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
&lt;img src=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> <span style="color: #000088;">$image</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot; alt=&quot;Alt Text&quot; /&gt;
<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #009900;">&#125;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #666666; font-style: italic;">//get article_image (custom field) ?&gt;</span>
<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #000088;">$image</span> <span style="color: #339933;">=</span> get_post_meta<span style="color: #009900;">&#40;</span><span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ID</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'article_image'</span><span style="color: #339933;">,</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
&lt;a href=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_permalink<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot;&gt;&lt;img src=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> <span style="color: #000088;">$image</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot; alt=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_title<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>&quot; /&gt;&lt;/a&gt;</pre></div></div>

<h3>List Radom Posts</h3>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">&lt;ul&gt;
&nbsp;
<span style="color: #000000; font-weight: bold;">&lt;?php</span>
<span style="color: #000088;">$rand_posts</span> <span style="color: #339933;">=</span> get_posts<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'numberposts=10&amp;orderby=rand'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">foreach</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$rand_posts</span> <span style="color: #b1b100;">as</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>
&lt;li&gt;&lt;a href=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_permalink<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>&quot;&gt;
<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_title<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>
&lt;/a&gt;
<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_time<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'M d Y'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
&lt;/li&gt;
<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>
&lt;/a&gt;
&lt;/ul&gt;</pre></div></div>

<h3>List Posts in Category 1 and offset 1</h3>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">&lt;ul&gt;
&nbsp;
<span style="color: #000000; font-weight: bold;">&lt;?php</span>
<span style="color: #000000; font-weight: bold;">global</span> <span style="color: #000088;">$post</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$myposts</span> <span style="color: #339933;">=</span> get_posts<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'numberposts=10&amp;offset=1&amp;category=1'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">foreach</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$myposts</span> <span style="color: #b1b100;">as</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>
&lt;li&gt;&lt;a href=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_permalink<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>&quot;&gt;
<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_title<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>
&lt;/a&gt;
<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_time<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'M d Y'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
&lt;/li&gt;
<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>
&lt;/a&gt;
&lt;/ul&gt;</pre></div></div>

<h3>List posts with certain tag</h3>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">&lt;ul&gt;
&nbsp;
<span style="color: #000000; font-weight: bold;">&lt;?php</span>
<span style="color: #000088;">$myposts</span> <span style="color: #339933;">=</span> get_posts<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'numberposts=10&amp;tag=yourtagname'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">foreach</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$myposts</span> <span style="color: #b1b100;">as</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>
&lt;li&gt;&lt;a href=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_permalink<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>&quot;&gt;
<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_title<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>
&lt;/a&gt;
<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_time<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'M d Y'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
&lt;/li&gt;
<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>
&lt;/a&gt;
&lt;/ul&gt;</pre></div></div>

<h3>List posts by dates (time followed by posts title):</h3>
<p>It is good to use in date.php:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">&lt;li&gt;
<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_time<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'d.m.y'</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span> | &lt;a href=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_permalink<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>&quot;&gt;<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_title<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>&lt;/a&gt;
&nbsp;
&lt;/li&gt;</pre></div></div>

<h2>Images</h2>
<h3>list all image attachments</h3>

<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;">if</span> <span style="color: #009900;">&#40;</span> have_posts<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: #b1b100;">while</span> <span style="color: #009900;">&#40;</span> have_posts<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> the_post<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;
&lt;ul&gt;<span style="color: #000000; font-weight: bold;">&lt;?php</span>
<span style="color: #000088;">$post_parent</span> <span style="color: #339933;">=</span> get_post<span style="color: #009900;">&#40;</span><span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ID</span><span style="color: #339933;">,</span> ARRAY_A<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$parent</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$post_parent</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'post_parent'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000088;">$attachments</span> <span style="color: #339933;">=</span> get_children<span style="color: #009900;">&#40;</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'post_parent'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #000088;">$post_id</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'post_type'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'attachment'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'orderby'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'menu_order ASC, ID'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'order'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'DESC'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">foreach</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$attachments</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$id</span> <span style="color: #339933;">=&gt;</span> <span style="color: #000088;">$attachment</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span>
<span style="color: #b1b100;">echo</span> wp_get_attachment_link<span style="color: #009900;">&#40;</span><span style="color: #000088;">$id</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'thumbnail'</span><span style="color: #339933;">,</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">endforeach</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span>
&lt;/ul&gt;
<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;">else</span><span style="color: #339933;">:</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
&lt;p&gt;<span style="color: #000000; font-weight: bold;">&lt;?php</span> _e<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Sorry, no posts matched your criteria.'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&lt;/p&gt;
<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">endif</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<h2>Functions</h2>
<h3>Register sidebars with names</h3>

<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;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #990000;">function_exists</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'register_sidebars'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span>
register_sidebar<span style="color: #009900;">&#40;</span><span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span>
<span style="color: #0000ff;">'name'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'sidebar'</span><span style="color: #339933;">,</span>
<span style="color: #0000ff;">'before_widget'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'&lt;li id=&quot;%1$s&quot; class=&quot;widget %2$s&quot;&gt;'</span><span style="color: #339933;">,</span>
<span style="color: #0000ff;">'after_widget'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">&quot;&lt;/li&gt;&quot;</span><span style="color: #339933;">,</span>
<span style="color: #0000ff;">'before_title'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">&quot;&lt;h3 class=&quot;</span>widgettitle<span style="color: #0000ff;">&quot;&gt;&quot;</span><span style="color: #339933;">,</span>
<span style="color: #0000ff;">'after_title'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">&quot;&lt;/h3&gt;&quot;</span><span style="color: #339933;">,</span>
<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
register_sidebar<span style="color: #009900;">&#40;</span><span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span>
<span style="color: #0000ff;">'name'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'yourname1'</span><span style="color: #339933;">,</span>
<span style="color: #0000ff;">'before_widget'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'&lt;li id=&quot;%1$s&quot; class=&quot;widget %2$s&quot;&gt;'</span><span style="color: #339933;">,</span>
<span style="color: #0000ff;">'after_widget'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">&quot;&lt;/li&gt;&quot;</span><span style="color: #339933;">,</span>
<span style="color: #0000ff;">'before_title'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">&quot;&lt;h3 class=&quot;</span>widgettitle<span style="color: #0000ff;">&quot;&gt;&quot;</span><span style="color: #339933;">,</span>
<span style="color: #0000ff;">'after_title'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">&quot;&lt;/h3&gt;&quot;</span><span style="color: #339933;">,</span>
<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
register_sidebar<span style="color: #009900;">&#40;</span><span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span>
<span style="color: #0000ff;">'name'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'sidebar2'</span><span style="color: #339933;">,</span>
<span style="color: #0000ff;">'before_widget'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'&lt;li id=&quot;%1$s&quot; class=&quot;widget %2$s&quot;&gt;'</span><span style="color: #339933;">,</span>
<span style="color: #0000ff;">'after_widget'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">&quot;&lt;/li&gt;&quot;</span><span style="color: #339933;">,</span>
<span style="color: #0000ff;">'before_title'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">&quot;&lt;h3 class=&quot;</span>widgettitle<span style="color: #0000ff;">&quot;&gt;&quot;</span><span style="color: #339933;">,</span>
<span style="color: #0000ff;">'after_title'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">&quot;&lt;/h3&gt;&quot;</span><span style="color: #339933;">,</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></pre></div></div>

<p>Code resources</p>
<ul>
<li><a href="http://www.smashingmagazine.com/" target="_blank">Smashing magazine</a></li>
<li><a href="http://www.bloggingtips.com/" target="_blank">Blogging tips</a></li>
<li>Wordpress.org</li>
</ul>



ADD TO<a href="#" onclick="javascript:(function(){EN_CLIP_HOST='http://www.evernote.com';try{var x=document.createElement('SCRIPT');x.type='text/javascript';x.src=EN_CLIP_HOST+'/public/bookmarkClipper.js?'+(new Date().getTime()/100000);document.getElementsByTagName('head')[0].appendChild(x);}catch(e){location.href=EN_CLIP_HOST+'/clip.action?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title);}})();"><img src="http://img44.imageshack.us/img44/3714/picture4p.png" alt="Add To Evernote" /></a>  If this helps, why not tell your friends?


	<a rel="nofollow"  target="_blank" href="http://reddit.com/submit?url=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fwordpress-snippets-collection%2F&amp;title=30%2B%20Wordpress%20snippets%20collection%20%281%29" title="Reddit"><img src="http://design-notes.info/wp-content/plugins/sociable/images/reddit.png" title="Reddit" alt="Reddit" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://delicious.com/post?url=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fwordpress-snippets-collection%2F&amp;title=30%2B%20Wordpress%20snippets%20collection%20%281%29&amp;notes=Its%20painful%20to%20look%20everywhere%20for%20a%20little%20piece%20of%20code.%20Here%20I%20listed%2030%2Bcommonly%20used%20snippets.%20Hope%20this%20helps%20people%20develop%20their%20themes." title="del.icio.us"><img src="http://design-notes.info/wp-content/plugins/sociable/images/delicious.png" title="del.icio.us" alt="del.icio.us" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fwordpress-snippets-collection%2F&amp;title=30%2B%20Wordpress%20snippets%20collection%20%281%29" title="StumbleUpon"><img src="http://design-notes.info/wp-content/plugins/sociable/images/stumbleupon.png" title="StumbleUpon" alt="StumbleUpon" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://www.facebook.com/share.php?u=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fwordpress-snippets-collection%2F&amp;t=30%2B%20Wordpress%20snippets%20collection%20%281%29" title="Facebook"><img src="http://design-notes.info/wp-content/plugins/sociable/images/facebook.png" title="Facebook" alt="Facebook" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://technorati.com/faves?add=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fwordpress-snippets-collection%2F" title="Technorati"><img src="http://design-notes.info/wp-content/plugins/sociable/images/technorati.png" title="Technorati" alt="Technorati" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://www.designfloat.com/submit.php?url=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fwordpress-snippets-collection%2F&amp;title=30%2B%20Wordpress%20snippets%20collection%20%281%29" title="Design Float"><img src="http://design-notes.info/wp-content/plugins/sociable/images/designfloat.png" title="Design Float" alt="Design Float" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://identi.ca/notice/new?status_textarea=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fwordpress-snippets-collection%2F" title="Identi.ca"><img src="http://design-notes.info/wp-content/plugins/sociable/images/identica.png" title="Identi.ca" alt="Identi.ca" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://www.friendfeed.com/share?title=30%2B%20Wordpress%20snippets%20collection%20%281%29&amp;link=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fwordpress-snippets-collection%2F" title="FriendFeed"><img src="http://design-notes.info/wp-content/plugins/sociable/images/friendfeed.png" title="FriendFeed" alt="FriendFeed" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://buzz.yahoo.com/submit/?submitUrl=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fwordpress-snippets-collection%2F&amp;submitHeadline=30%2B%20Wordpress%20snippets%20collection%20%281%29&amp;submitSummary=Its%20painful%20to%20look%20everywhere%20for%20a%20little%20piece%20of%20code.%20Here%20I%20listed%2030%2Bcommonly%20used%20snippets.%20Hope%20this%20helps%20people%20develop%20their%20themes.&amp;submitCategory=science&amp;submitAssetType=text" title="Yahoo! Buzz"><img src="http://design-notes.info/wp-content/plugins/sociable/images/yahoobuzz.png" title="Yahoo! Buzz" alt="Yahoo! Buzz" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="http://ping.fm/ref/?link=http%3A%2F%2Fdesign-notes.info%2Ftutorial%2Fwordpress%2Fwordpress-snippets-collection%2F&amp;title=30%2B%20Wordpress%20snippets%20collection%20%281%29&amp;body=Its%20painful%20to%20look%20everywhere%20for%20a%20little%20piece%20of%20code.%20Here%20I%20listed%2030%2Bcommonly%20used%20snippets.%20Hope%20this%20helps%20people%20develop%20their%20themes." title="Ping.fm"><img src="http://design-notes.info/wp-content/plugins/sociable/images/ping.png" title="Ping.fm" alt="Ping.fm" class="sociable-hovers" /></a>


<br/><br/>]]></content:encoded>
			<wfw:commentRss>http://design-notes.info/tutorial/wordpress/wordpress-snippets-collection/feed/</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
	</channel>
</rss>
