It just so happens that are a few projects in this space already….

ThemeDreamer is plug-in extension for DreamWeaver that allows users to open Wordpress themes in the DreamWeaver environment and edit them as if they were normal XHTML. It’s a truly powerful extension and only serves to make me question more why Adobe insists on ignoring this market. Something like this should be built right in!

Yvoschaap’s WpThemeGen is probably the most popular app in this space. It allows users to create Wordpress themes online and then download them for use immediately! If Adobe were particularly smart they’d be looking into this space too, web based graphic design apps are about to explode. Just ask A.viary

WPpal.com is the competitor to Yvoschaap’s web app. It’s somewhat versatile allowing you to upload and suggest themes for inclusion in the editor but is by no means a solution for a power user.

While all these solutions are great for amateurs, advanced users still dream of the day where there will be a DreamWeaver-like application for Wordpress and other CMS’.

So far I’ve released two themes: Tech Blogger and Unstandard Remix). A third, my first completely original theme, is still in development but I released it early for the sake of my tutorial.

What do you need to do when you’re releasing your first theme be it modified or bespoke? Here’s a checklist:

• Include a readme.txt file. This file should contain installation instructions, release info and any notes you want the reader to be aware of before using your theme. It really sucks when novices are downloading themes only to be 100% confused by what they’ve downloaded. It only means that they may delete your theme and download another one that they can more easily digest. If your goal is maximum adoption, that’s not the route you want to go.
• Test it. Think of every scenario you can possibly remember from your own blog use. Try to be the use, do all the things that you think no one would ever do because (rest assured) that person is out there. Are all your links functioning? Are all your pages displaying correctly? If not, is your 404.php page popping up when it should? Make sure you’ve thought of EVERY possible scenario before you release your theme. I can’t tell you how annoying it is download a theme that you like only to spend the next few hours debugging it to make it truly functional.



• Organize it. You want your theme to be well organized so that it doesn’t take any longer than necessary to install and use it. Put your actual theme in a parent folder labeled ‘theme’ so the user can just drag and drop. Place any plug-ins or widgets your theme uses in a parent folder called ‘plugins’ so that the user can do the same. If you’re including .psd label those in a folder that tells the user what it is.
• Compress it. You’ll be hard-pressed to find a file host that makes it easy to share uncompressed folders. This is because a folder is a directory and if you upload it virtually any service online it will be treated like a directory (if accepted at all). Compress the file as either a .zip, .sit, .gzip or .tar.gz file. This will make the files faster to download and it will allow the user to download with one click instead of several
• Publish it. Where will your theme live online? Do you want it on your own web server or do you want it hosted on at repository like themes.wordpress.net? I prefer to use repositories or file hosting services like mediafire.com
• Announce it. Unless a lot of people read your bog or visit your website, there’s no way for people to know what you’ve done. If you’ve posted your theme to a repository like themes.wordpress.net then the job is already done. However, you should tell your friends and submit it to some other sites so that the world is aware.

So far we’ve made a ton of progress with our theme design. We designed it in Photoshop, we converted to XHTML and then we began the somewhat tedious task of adding PHP. Now that we’ve created index.php, header.php, footer.php and sidebar.php, we can move on to creating the rest of the theme.

In “The Anatomy of a Wordpress Theme” we noted that Wordpress needs certain files for your theme to function properly. Here’s that list again:

1. 404 Template = 404.php
2. Archive Template = archive.php
3. Archive Index Page = archives.php
4. Comments Template = comments.php
5. Footer Template = footer.php
6. Header Template = header.php
7. Links = links.php
8. Main Template = index.php
9. Page Template = page.php
10. Popup Comments Template = comments-popup.php
11. Post Template = single.php
12. Search Form = searchform.php
13. Search Template = search.php
14. Sidebar Template = sidebar.php
15. Stylesheet = style.css

As you may have noticed, the items listed in bold are the only items we’ve created in our lessons thus far and there is still a lot of work to be done! Anything struck through is optional therefore this lesson won’t cover it but I have linked to pages where you can read about them on your own. While I can’t go into complete detail I will highlight some major points about each and then I’ll give you links to four sites that break the process down in detail and more thoroughly:

single.php

Single.php is the file referenced when someone clicks on the permalink for one of your posts. Thus it is the template for displaying a single post on your blog. On most blogs single.php an index.php are very similar except that in addition to querying <? the content(); ?> we also have to query the comments page. We do this just before we close the loop with:

	<?php comments_template(); ?>

page.php

Page.php is the template for any page in your theme that doesn’t have it’s own .php template or that is not a blog entry. This is also the template for the static “Pages” that you create within the Wordpress Admin panel. It is usually also just like index.php except that it doesn’t include the loop or the_content().

links.php

Ignores Page content and instead displays your links using get_links_list.

404.php

Where you users land when they follow a bad link on your blog or click through to something that’s been removed. Codex offers some advice….

While you work hard to make sure that every link actually goes to a specific web page on your site, there is always a chance that a link clicked will slam dunk and become a famous 404 ERROR PAGE NOT FOUND. Some errors are avoidable, you should regularly check and double check all your links. Also, if you are deleting a popular but out-of-date post, consider deleting the body of the post, and replacing it with a link referring visitors to the new page.

This concludes “Designing and Coding a Wordpress theme from Scratch” . This guide was written as a starting point and a reference guide I can always be contacted at jongos [at] gmail if you are having trouble or need advice. Alternatively I’ve compiled a list of resources that I often reference when creating themes below.

In this tutorial I mentioned a theme that I was developing quite a bit. You can download it along with the PSD used to create it here. Keep in mind that the version you’re downloading is an early beta release. It’s bulky, clunky, not very pretty under the covers and has a mind of it’s own so I’m dubbing it the Rosie O Donnell release. Feel free to give me feedback on it, use it to double check your own code, or modify it to suit your needs.

DOWNLOAD THE AQUA MARINA WORDPRESS THEME

Stepping_Into_Templates
HTML to XHTML
So You Want To Create Wordpress Themes
From XHTML/CSS to Wordpress
Tamba2’s Guide
Slizing a Wordpress Theme

Because Wordpress is fundamentally a PHP system we can add a few snippets of code to make our header, footer and sidebar files dynamic.

Marking Up Header.php

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 <a href=”"></a>. 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 just work.

How is this done? We use PHP requests to request and print the blog title allowing it to be dynamically relative to the database.

The code for a text blog title:

	<div class="blogtitle"><a href="<?php bloginfo('url'); ?>/">
	<?php bloginfo('name'); ?></a></div>

The code for an image blog title:

	<div class="blogtitle"><a href="<?php bloginfo('url'); ?>/">
	<img src="your/image/path.jpg" title="<?php bloginfo('name'); ?>" />
	</a></div>

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:

	<?php require('yourphpfile.php'); ?>
	<?php get_sidebar(); ?>

Still confused? The image below contains a region map of my theme’s index.php as it displays in a browser. The red region represents “header.php”, the purple region represents “center.php”, the blue region represents “sidebar.php” and the green is the post area, the code for which is contained in index.php.

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 Part 10 you’ll understand how everything works.

Marking Up Footer.php

Footer.php is even easier because there’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:

	<div class="footer">©2008 <a href="<?php bloginfo('url'); ?>/">
	<?php bloginfo('name'); ?></a></div>

…which would simply display the copyright and year followed by the blog title.

Marking Up Sidebar.php

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:

	<strong>Display the Blogroll:</strong>
	<?php get_links_list(); ?>

	<strong>Display the pages of the site:</strong>
	<?php wp_list_pages('title_li=<h2>Pages</h2>'); ?>

	<strong>Display the site's categories:</strong>
	<?php wp_list_cats(); ?>

I recommend reading “Customizing Your Sidebar” if you’d like to explore your options a bit more. In Part 10 we’ll create the other pages of our theme and then we’ll learn all about“Packaging a Wordpress Theme for Distribution”

Wordpress is a state-of-the-art publishing platform with a focus on aesthetics, web standards, and usability as the makers proudly proclaim at wordpress.org. The keyword there being ‘publishing’ and the most important part of the Wordpress publishing engine is the element that allows content to be published online easily and automatically. This element is called the the loop.

While I can’t get into all the operational mechanics of how Wordpress works here, I can refer you to a page that does offer more in depth analysis (here). What is important to this tutorial is that the Wordpress theme we designed in Photoshop needs this PHP function (along with a few others) to correctly fetch content from the database. Let’s examine four critical functions:

<?php query_posts();?>
Requests the database of content, should be placed near the top of index.php
just after the request <?php get_header(); ?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
this is The Loop and it should be placed prior to
where you want your content to print

<?php the_content(''); ?>
Calls and prints the content of your blog according to the settings in the
admin section or php functions called before it.  This should be placed wherever
you want your blog posts to go within the <div> tags.

<?php endif; ?>
Closes the loop.

Using the code from Part 7 as an example:

<?php get_header(); ?>
<?php query_posts();?>

    </div>

	<div id="post">
	  <div class="entry">
	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

		<div class="posts">
	<?php the_excerpt(''); ?>
     		</div>   

	<?php endif; ?>
	  </div>
     </div>

<?php get_footer(); ?>

You may notice that the <div> tags with id and class=”posts”elements. These are styling anything they contain. My id=”post” is printing my photoshoped content area. The area with id=”class” is formating how my content will be formated. Do I want to justify text? Do I want to use a text-transform on the first letter? Change the color of text? All those types of styles should be applied to this class to be passed on to the text inside the container.

These three lines alone are essentially all you need for index.php in your theme. However, you’ll notice that we’re missing a few important items. We need to call and style the posts name, permalink, and meta data individually. This means we need to add the following:

<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
Requests the post tile and links to it. Place this before the post content.

<?php the_time('F j, Y'); ?> at <?php the_time('g:i a'); ?>
<?php comments_popup_link('| No Comments', '| 1 Comment;', '| % Comments;'); ?>
Requests various types of information related to the post.  Place this just after the previous line.

<?php the_category(', ') ?> <?php the_tags('| Tags: ', ', ', ''); ?>
<?php edit_post_link('| Edit', '', ''); ?></p>
This calls the footer meta information for each individual post.
Place this after the content but before you close the loop.

After placing these codes my index.php looks something like this:

<?php get_header(); ?>
<?php query_posts("showposts=2");?>

	<div id="post">
	<div class="entry">
		<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

   	<span class="postname"><a href="<?php the_permalink() ?>"><?php
 the_title(); ?></a></span>

    	<p class="postinfo">

		<?php the_time('F j, Y'); ?> at <?php the_time('g:i a'); ?> <?
php comments_popup_link('| No Comments', '| 1 Comment;', '| % Comments;'); ?></p>

	<div class="posts">
    		<?php the_content(''); ?>
         	<p class="postinfo">Posted in <?php the_category(', ') ?> <?php
 the_tags('| Tags: ', ', ', ''); ?> <?php edit_post_link('| Edit', '', ''); ?>
</p>

     	</div>   

		<?php endif; ?>
	</div>
	</div>

    		<?php get_footer(); ?>

In Part 9 we’ll be discussing how to correctly markup header.php, footer.php and footer.php and in Part 10 we’ll create the other pages Wordpress needs.

Part 1 - “Tools For The Task” and “Preparation”
Part 2 - “Layout And Structure” and “Designing Wordpress Themes in Photoshop”
Part 3 - “Photoshop to XHTML in 24 Hours”
Part 4 - “Cleaning Up Your XHTML”
Part 5 - “Preloading Images with Javascript and CSS”
Part 6 - “Marking Up is Hard to Do” and “The Anatomy of a Wordpress Theme”

• First we’ll duplicate index.html and rename the copy index.php. We’re only keeping the original .html file for reference to make sure that the finished PHP operates and looks the same.
• Let’s open index.php in our text editor. Right now it’s just a .html renamed .php. Our job is to make make it true PHP.
• Go ahead and create some more blank documents in your theme folder. Let’s call them header.php, footer.php and sidebar.php (if you have a side bar in your theme). We’re going to divide the HTML into the major sections and make each section it’s own PHP file to be marked up separately.
• Cut everything that you consider the header of your document. Make sure all tags are closed. Below you’ll find an example of my code which is really irrelevant, your own code will look and function differently based on your unique design. Still, for the sake of a working example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Wonderful World of Web Design!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="scripts/preload.js"></script>
</head>

<body>
<div id="container">
	<div id="header">
    <div class="description">The Blog Title</span></div>
	</div>
    <div id="header-nav"><div class="content">
    <a href="">ADVERTISE</a>  |
    <a href="">CONTACT</a>  |
    <a href="">RSS</a></div></div>
    <div id="spacer1"></div>
    <div id="upper-menu"><div class="navigation">
    <a href="">HOME</a>
    <a href="">NEWS</a>
    <a href="">BLOG</a>
    <a href="">HIRE ME</a>
    <a href="">PORTFOLIO</a>
    <a href="">QUESTIONS</a>
    <a href="">LINKS</a>
    <a href="">POPULAR</a>
    </div>

    </div>
	<div id="right-top"></div>

 <!-- End header.php -->

• Paste your header information in to header.php. Do the same for sidebar and your footer, cutting the code from index.php and pasting it in the corresponding file.
• I use comment tags like <!– End header.php –> to write notes that help me remember what’s going on in my code.
• If you do this correctly you’ll be left with a pretty sparse index.php document. All that should be left is some That’s good because now we’re going to tell index.php where to find all the information we just moved. We do this with PHP functions like so:

<?php get_phpdocumentname(); ?>

This get_ function does exactly what it sounds like it goes and fetches a requested document and displays the contents of that document in the area requested. My index.php document looked like this:

<?php get_header(); ?>

    </div>

	<div id="post">
	  <div class="entry">

		<div class="posts">
     		</div>   

	  </div>
	</div>

<?php get_footer(); ?>

• Ofcourse, for now we’ll leave the body <div>’s empty. This is where our content will eventually go.

  You’ll notice that I have no sidebar, that’s because I call for it in the header.php document instead. Why? Because browsers read code from top to bottom and I want page to request the header and side bars to first before requesting the body.

  In the next lesson we’ll start to analyze the PHP functions needed to request and display the dynamic content of a Wordpress theme.

  Del.icio.us

  Digg This

  Stumble
  ]]> http://www.developertutorials.com/blog/php/designing-and-coding-a-wordpress-theme-from-scratch-part-7-153/feed/ http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-6-151/ http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-6-151/#comments Tue, 29 Apr 2008 12:37:31 +0000 JonGos http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-6-151/ This is the sixth post in series about creating Wordpress themes with your Photoshop designs. You may want to review before we continue….

  Part 1 - “Tools For The Task” and “Preparation”
  Part 2 - “Layout And Structure” and “Designing Wordpress Themes in Photoshop”
  Part 3 - “Photoshop to XHTML in 24 Hours”
  Part 4 - “Cleaning Up Your XHTML”
  Part 5 - “Preloading Images with Javascript and CSS”

  ---

  Marking Up Is Hard To Do

  Wikipedia defines the term markup as a set of annotations to text that describe how it is to be structured, laid out, or formatted. When we say we’re going to ‘mark something up’ it means we’re formatting the document so that it can be read correctly by machines. Hypertext Markup Language (HTML) is the most common form. That can be marked up to Extensible Hyper-text Markup Language (XHTML) and beyond that to PHP to become dynamic.

  Now that we’ve got our basic html layout design we can begin the hard work the transition from HTML to PHP.

  Anatomy of a WordPress Theme

  Before we get ahead of ourselves let’s analyze exactly what Wordpress is expecting from a theme. The Wordpress engine works primarily using separate PHP files for the different components of the core engine. The various parts of your theme will simply call for various parts of the core engine to display content. This makes it easy for you to style sections individually. It also can allow for some incredibly complex themes that are built on the Wordpress engine. Themes like the The Unstandard by Derek Punsalan and Redoable are great examples of how to rethink the Wordpress theme impressively.

  Fundamentally, the WordPress Theme system is a way to “skin” your weblog. Yet, it is more than just a “skin.” Skinning your site implies that only the design is changed. WordPress Themes can provide much more control over the look and presentation of the material on your website.

  A WordPress Theme is a collection of files that work together to produce a graphical interface with an underlying unifying design for a weblog. These files are called template files. A theme modifies the way the site is displayed, without modifying the underlying software. Themes may include customized template files, image files (*.jpg, *.gif), style sheets (*.css), custom Pages, as well as any necessary code files (*.php).

  Here are the things Wordpress looks for a theme file:

  1. 404 Template = 404.php
  2. Archive Template = archive.php
  3. Archive Index Page = archives.php
  4. Comments Template = comments.php
  5. Footer Template = footer.php
  6. Header Template = header.php
  7. Links = links.php
  8. Main Template = index.php
  9. Page Template = page.php
  10. Popup Comments Template = comments-popup.php
  11. Post Template = single.php
  12. Search Form = searchform.php
  13. Search Template = search.php
  14. Sidebar Template = sidebar.php
  15. Stylesheet = style.css

  For the most part, if you’re missing any of these parts your theme either won’t work or won’t fully function the way Wordpress wants it to. So far the only thing we’ve completed is stylesheet.css so where do the rest come from? In Part 7 we’ll create index.php and start marking up our XHTML to PHP.

  Del.icio.us

  Digg This

  Stumble
  ]]> http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-6-151/feed/ http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-4-147/ http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-4-147/#comments Mon, 28 Apr 2008 21:23:17 +0000 JonGos http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-4-147/ You’ve gone from Photoshop PSD to slices to XHTML using Parts 1, 2, and 3 but if the end result is a Wordpress theme the majority of the work still has to be done. First of all it’s important to understand one bit of the operational mechanics of Wordpress. Wordpress looks for certain information the header of a file called style.css, this is how it can tell themes apart. Here’s a better explanation from Codex:

  In addition to CSS style information for your theme, the stylesheet, style.css must provide details about the Theme in the form of comments. No two Themes are allowed to have the same details listed in their comment headers, as this will lead to problems in the Theme selection dialog. If you make your own Theme by copying an existing one, make sure you change this information first.

  Thus, we need to separate our inline CSS and put it in a separate file called style.css

  Cleaning up Your XHTML

  Let’s start by creating a blank document called style.css in the same directory as your HTML file. Open the CSS file and add the following information:

  /*
  Theme Name: your-themes-name
  Theme URI: the-theme's-homepage
  Description: a-brief-description
  Author: your-name
  Author URI: your-URI
  Template: use-this-to-define-a-parent-theme--optional
  Version: a-number-optional
  
  General comments/License Statement if any.
  */

  like so

  

  Now let’s open the HTML file the Photoshop created for us which should look something like this.
  The inline document is essentially divided for us already because everything between the <style> and </style> tags is going to be cut out of our html document and pasted into the CSS document just after the heading we just added. Let’s do that now, copy the style data out of the HTML document and into the CSS document and make sure that you close the tags once you’ve done so.

  The resulting HTML file should now look like this:

  

  and the CSS file like this:

  

  Got it? Now lets do some major cleaning. Now that we’ve removed the style from our HTML we need to add it back. We’re going to replace the empty <style> tags with the following line:

  <link rel="stylesheet" href="style.css" type="text/css" media="screen" />

  This line is telling our document some very useful information:

  1. rel - the relationship of the linked document to the current document
  2. href - the url to the linked document
  3. type - the MIME (Multipurpose Internet Mail Extension) type of the target URL
  4. media - denotes on which device the document is meant to be displayed

  or the translation for humans: “Hello, the text file that lives at this URL is a stylesheet that was made for use with documents that would be displayed on computer monitors and screens.”

  We have to do this because we’ve taken out the style information but since we still want to style our HTML document we have to tell it where the style information now lives. Next we want to empty all our <div> tags.

  Since all our our photoshop images are essentially background images any line from our HTML document that looks like this:

     <div id="aqua-01_">
  	<img id="yourfilename_01" src="yourfilename_01.png" width="549"
                    height="126" alt="" />
     </div>
  

  Should be changed to look like this:

  	<div id="aqua-01_">
  	</div>
  

  But only when you change the corresponding ID container the CSS document to look like this:

  	#aqua-01_ {
  	position:absolute;
  	left:0px;
  	top:0px;
  	width:549px;
  	height:126px;
  	background:url(images/aqua_01.png);
  	}
  

  What we’ve done is taken the image out of the <div> container in our HTML document and placed in the corresponding ID container in CSS. This is important because now we can put other things like text or other images into the HTML files <div> container. This will also allow our page to structure itself properly even if a few images are slow to load.

  Finally we want to take anything that is an image and place it in a folder called “img” or “images”. If you look at the code above I’m telling the CSS to look for image files in a folder called “images”. We want to do this for organizational purposes. Of course this is entirely optional but it’s good practice and somewhat of an organizational standard.

  Are you still confused?
  Download these files and examine them to see if you can figure out what I did to make the page render properly.

  In the next lesson we’re going learn how to optimize our page for speed using javascript. Sweating yet? Don’t worry we’re already a lot closer than when we started!

  Del.icio.us

  Digg This

  Stumble
  ]]> http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-4-147/feed/ http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-2-144/ http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-2-144/#comments Mon, 28 Apr 2008 18:05:02 +0000 JonGos http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-2-144/ Designing your first Wordpress theme may seem incredibly ambitious at first but it’s really not that hard. It may help your understanding of Wordpress if you find a theme you like and disect or remix it. This is how I learned to code and one of my first attempt was a variation of Derek Punsalan’s theme The Unstandard.In Part 1 I talked a bit about the tools you’ll need and how to get prepared. Now that you’ve done that we’re going to get started.

  Layout and Structure

  This post by 37 Signals is an incredibly detailed account of how to organize information and using sketches to design for the web. I highly recommend taking a break to read it. As mentioned in the post sketching out the general layout of your site will help you. For my design I started with this sketch:

  

  Let’s compare the sketch to the finished theme:

  

  As you can see my marked up design remains fundamentally similar to the original concept sketch.

  Designing WordPress Themes in Photoshop

  We’ve got our sketch, lets open up Photoshop and start designing. Since every design is different, I won’t bother explaining every single choice I made, instead I’m going to give you some tips on laying out your design so that it can be successfully marked up for the web.

  1. 1. Work to a grid. I don’t necessarily mean the grid that you get when you type Command+’ but rather working to a structurally sound grid that corresponds to the golden ratio or the rule of thirds. This is because Photoshop has to ’slice’ your resulting design into rectangles and if you keep it in mind while you design, that can be done easily at the end.

  In the above picture you can see that I worked to a grid that I created using guides. As my design progressed, the grid got incredibly convoluted but these lines correspond in some way to the layout and skeleton of the site. I’d say this is even more important for minimal designs like my own.

  

  2. 2. The fewer the slices the better. So when you finish your design you’ll slice it into sectors that will then be marked up to xhtml and subsequently php to create your theme. This the last thing you want is a 100 different areas to code separately. If you study the image below you’ll see that I had about 16 ’sliced areas’.

     

     Try not to have more than 20. Why? Because each of these slices are images that have to be downloaded and displayed when someone visits your website. The more images, the slower the load time will be for people with slower connections. Although in Part 5 I’ll show you how to optimize your image based website for speed, it’s better practice to have fewer slices.

  3. 3. Make each content area it’s own slice. I can’t stress how important this is! For someone new to XHTML it can be incredibly hard to figure out how to float < div > tags so that content areas remain separate. The laymans solution? Don’t bother! If all your content is contained in < div > ’s for a specific image or ’slice’ you won’t have to.

     Another reason to do this is that if you have a content area that is divided into slices that cut up the content space, you’re going to have a much harder time trying to make the content display correctly over two background images.

  4. 4. Work in color proof mode. When I’m designing for the web I’ve learned to work entirely, start to finish, in color proof mode (command+Y for Mac / control+y for Pc). This is because colors in Photoshop can be deceiving and if you aren’t using websafe colors, you need to make sure everything translates as you want it to. I explained this in more detail in a previous article here.
  5. 5. Think in 3D.Your design should not be thought of as a flat surface. It has depth and the things that are different elevations should be treated the same. For instance, if you have text or images ontop of content areas in your design, you may want to call on them in the stylesheet instead of leaving ‘flat’ as part of the background images. Thus all stylized text like your header text or social bookmarking links should be images that are displayed with CSS. This is the second and topmost layer of your design with the layout existing below

  Got all that? Let’s move on to Part 3 - Photoshop to XHTML in 24 Hours!

  Del.icio.us

  Digg This

  Stumble
  ]]> http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-2-144/feed/ http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-1-143/ http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-1-143/#comments Mon, 28 Apr 2008 18:04:35 +0000 JonGos http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-1-143/ In this multi-part series I’ll detail how to create and design a Wordpress theme from nothing more than your imagination using Photoshop, CSS, XHTML and PHP. Before you continue you should look over other tutorials “Working with Wordpress Offline Like A Pro and “Color Proofing Photoshop” as some of the topics discussed there will come up in this tutorial like working offline to develop themes, and proofing your colors so that they translate accurately for the web. At the end of the entire series I’ll allow you to download the fully developed theme with the PSD, and theme-files including stylesheets, and javascript.

  Tools for the Task

  For clarification, here are all the tools I used in the making of this theme:

  • A text editor like jEdit for hardcoding
  • Photoshop CS3
  • Wordpress 2.5
  • MAMP
  • Color Schemer Studio
  • Firefox + Web Developer Extension (for Local Validation)
  • NetRenderer (to see how your theme looks across browsers)

  You don’t have to use the same tools, those are just the ones I use in my workflow.

  Preparation

  It’s important to remember these three things as well:

  1. Take your time. If this is your first attempt at a wordpress theme, you’ll make a lot of mistakes. Just learn from them, the first time is never the best.
  2. Use W3schools.com religiously! Why do people validate code, to maximize the exposure of their work. Learning to validate as you go will improve the quality of the work you produce and eventually make you faster.
  3. Ask a lot of questions. If you get stuck please feel free to come back to this column and post questions as comments. Alternatively you can e-mail me at jongos [at] gmail to seek out additional advice but since I like to make information public, if you email me privately your questions may be posted here to help others.

  The End Result:

  

  Like what you see? Without further adieu let’s get started.

  Del.icio.us
  Digg This
  Stumble
  ]]> http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-1-143/feed/