<?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"
	>

<channel>
	<title>Developer Tutorials' Webmaster Blog &#187; photshop</title>
	<atom:link href="http://www.developertutorials.com/blog/tag/photshop/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.developertutorials.com/blog</link>
	<description>Keeping webmasters up-to-date on technology.</description>
	<pubDate>Tue, 02 Sep 2008 14:59:45 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.6.2</generator>
	<language>en</language>
			<item>
		<title>Designing and Coding a Wordpress Theme From Scratch (Part 9)</title>
		<link>http://www.developertutorials.com/blog/php/designing-and-coding-a-wordpress-theme-from-scratch-part-9-159/</link>
		<comments>http://www.developertutorials.com/blog/php/designing-and-coding-a-wordpress-theme-from-scratch-part-9-159/#comments</comments>
		<pubDate>Wed, 30 Apr 2008 21:16:42 +0000</pubDate>
		<dc:creator>JonGos</dc:creator>
		
		<category><![CDATA[PHP]]></category>

		<category><![CDATA[Photoshop]]></category>

		<category><![CDATA[WordPress]]></category>

		<category><![CDATA[code]]></category>

		<category><![CDATA[Design]]></category>

		<category><![CDATA[layout]]></category>

		<category><![CDATA[photshop]]></category>

		<category><![CDATA[theme]]></category>

		<guid isPermaLink="false">http://www.developertutorials.com/blog/php/designing-and-coding-a-wordpress-theme-from-scratch-part-9-159/</guid>
		<description><![CDATA[Going From Photoshop to XHTML to Wordpress Theme.  In this multi-part series I'll detail how to create and design a Wordpress theme in Photoshop and take it from just an idea to fully coded.
]]></description>
			<content:encoded><![CDATA[<p><a target="_blank" href="http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-2-144/">Part 2</a> - &#8220;Layout And Structure&#8221; and &#8220;Designing Wordpress Themes in Photoshop&#8221;<br />
<a target="_blank" href="http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-3-146/">Part 3</a> - &#8220;Photoshop to XHTML in 24 Hours&#8221;<br />
<a target="_blank" href="http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-4-147/">Part 4</a> - &#8220;Cleaning Up Your XHTML&#8221;<br />
<a target="_blank" href="http://www.developertutorials.com/blog/javascript/designing-and-coding-a-wordpress-theme-from-scratch-part-5-149/">Part 5</a> - &#8220;Preloading Images with Javascript and CSS&#8221;<br />
<a target="_blank" href="http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-6-151/">Part 6</a> - &#8220;Marking Up is Hard to Do&#8221; and &#8220;The Anatomy of a Wordpress Theme&#8221;<br />
<a target="_blank" href="http://www.developertutorials.com/blog/php/designing-and-coding-a-wordpress-theme-from-scratch-part-7-153/">Part 7</a> - &#8220;Beginning with PHP for Wordpress&#8221;<br />
<a target="_blank" href="http://www.developertutorials.com/blog/php/designing-and-coding-a-wordpress-theme-from-scratch-part-8-154/">Part 8</a> - &#8220;Putting the Press in Wordpress with PHP&#8221;</p>
<p>Because Wordpress is fundamentally a PHP system we can add a few snippets of code to make our header, footer and sidebar files dynamic. </p>
<p><b>Marking Up Header.php</b></p>
<p>Your blog header file usually contains the title of your site linked to the homepage.  In an HTML page we would simply add text or place an image and link to the homepage using &lt;a href=&#8221;"&gt;&lt;/a&gt;.  The key to making our Wordpress theme, however, is we need to make all our links relative so that the end user can install the theme and use it with their own unique site with as little fuss as possible.  It should <i>just work</i>.</p>
<p><span id="more-159"></span></p>
<p>How is this done?  We use PHP requests to request and print the blog title allowing it to be dynamically relative to the database.</p>
<p>The code for a text blog title:</p>
<pre>
	&lt;div class="blogtitle"&gt;&lt;a href="&lt;?php bloginfo('url'); ?&gt;/"&gt;
	&lt;?php bloginfo('name'); ?&gt;&lt;/a&gt;&lt;/div&gt;
</pre>
<p>The code for an image blog title:</p>
<pre>
	&lt;div class="blogtitle"&gt;&lt;a href="&lt;?php bloginfo('url'); ?&gt;/"&gt;
	&lt;img src="your/image/path.jpg" title="&lt;?php bloginfo('name'); ?&gt;" /&gt;
	&lt;/a&gt;&lt;/div&gt;
</pre>
<p>These are the only two codes we need to place in our header.php file.  In my case I needed to request other PHP documents that are meant to be displayed before the document continues: the sidebar and the center rotating headline areas. I this did using this code:</p>
<pre>
	&lt;?php require('yourphpfile.php'); ?&gt;
	&lt;?php get_sidebar(); ?&gt;
</pre>
<p>Still confused?  The image below contains a region map of my theme&#8217;s <strong>index.php</strong> as it displays in a browser.  The red region represents &#8220;header.php&#8221;, the purple region represents &#8220;center.php&#8221;, the blue region represents &#8220;sidebar.php&#8221; and the green is the post area, the code for which is contained in index.php.  </p>
<p><img src="http://farm3.static.flickr.com/2198/2454229161_0db7a57ec1.jpg"></p>
<p>Because the format of my blog is unique to my design this may not apply to your own design, I just want to make sure everything is throughly explained so that when you download my theme in <a href="http://www.developertutorials.com/blog/php/designing-and-…cratch-part-10designing-and-coding-a-wordpress-theme-from-scratch-part-10-160/" target="_blank" title="photoshop to wordpress">Part 10</a> you&#8217;ll understand how everything works.</p>
<p><b>Marking Up Footer.php</b></p>
<p>Footer.php is even easier because there&#8217;s no crucial PHP requests that need to go here to make it function.  This means it can be entirely HTML or you can add a dynamic request for the blog title like you did above.  You may want to try something like this:</p>
<pre>
	&lt;div class="footer"&gt;©2008 &lt;a href="&lt;?php bloginfo('url'); ?&gt;/"&gt;
	&lt;?php bloginfo('name'); ?&gt;&lt;/a&gt;&lt;/div&gt;
</pre>
<p>&#8230;which would simply display the copyright and year followed by the blog title.</p>
<p><b>Marking Up Sidebar.php</b></p>
<p>Sidebar.php is essentially the same in that it can contain nothing more than HTML or it can also contain PHP queries.  Here are some popular PHP queries often used in sidebar.php:</p>
<pre>
	&lt;strong&gt;Display the Blogroll:&lt;/strong&gt;
	&lt;?php get_links_list(); ?&gt;

	&lt;strong&gt;Display the pages of the site:&lt;/strong&gt;
	&lt;?php wp_list_pages('title_li=&lt;h2&gt;Pages&lt;/h2&gt;'); ?&gt;

	&lt;strong&gt;Display the site's categories:&lt;/strong&gt;
	&lt;?php wp_list_cats(); ?&gt;
</pre>
<p>I recommend reading <a href="http://codex.wordpress.org/Customizing_Your_Sidebar" target="_blank">&#8220;Customizing Your Sidebar&#8221;</a> if you&#8217;d like to explore your options a bit more.  In <a href="http://www.developertutorials.com/blog/php/designing-and-…cratch-part-10designing-and-coding-a-wordpress-theme-from-scratch-part-10-160/" target="_blank" title="photoshop to wordpress theme">Part 10</a> we&#8217;ll create the other pages of our theme and then we&#8217;ll learn all about<a href="http://www.developertutorials.com/blog/php/packaging-a-wordpress-theme-for-distribution-162/" target="_blank" title="Packaging a Wordpress Theme for Distribution">&#8220;Packaging a Wordpress Theme for Distribution&#8221;</a></p>
<!-- Social Bookmarks BEGIN -->
<div class="social_bookmark" style="float:left;">
<div class="d159" style="overflow:hidden">
<div id="socialstyles"><a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://del.icio.us/post?url=http://www.developertutorials.com/blog/php/designing-and-coding-a-wordpress-theme-from-scratch-part-9-159/&amp;title=Designing+and+Coding+a+Wordpress+Theme+From+Scratch+%28Part+9%29" title="Add to&nbsp;Del.icio.us">Del.icio.us</a></div><div id="socialstyles"><a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://digg.com/submit?phase=2&amp;url=http://www.developertutorials.com/blog/php/designing-and-coding-a-wordpress-theme-from-scratch-part-9-159/&amp;title=Designing+and+Coding+a+Wordpress+Theme+From+Scratch+%28Part+9%29" title="Add to&nbsp;Digg This">Digg This</a></div><div id="socialstyles"><a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.stumbleupon.com/submit.php?url=http://www.developertutorials.com/blog/php/designing-and-coding-a-wordpress-theme-from-scratch-part-9-159/&amp;title=Designing+and+Coding+a+Wordpress+Theme+From+Scratch+%28Part+9%29" title="Add to&nbsp;Stumble">Stumble</a></div></div>
</div>
<!-- Social Bookmarks END -->
]]></content:encoded>
			<wfw:commentRss>http://www.developertutorials.com/blog/php/designing-and-coding-a-wordpress-theme-from-scratch-part-9-159/feed/</wfw:commentRss>
		</item>
	</channel>
</rss>
