For today’s news we have collected our favorites design and development related freebies from the the past week and thought they were that good, that we simply had to share them with our readers.

“Buddycons” – Vector Social Media Icons

The icon set is called “Buddycons” and includes 126 vector social media icons. Included in the set are PNG versions of all 126 icons in both circular and rounded variations as well as a vector source file for easy resizing. The icons are free to use for personal and commercial usage, however, redistribution is not allowed.
“Buddycons” – Vector Social Media Icons

Free PSD Templates: vCard Personal Portfolio Minisite

This PSD design comes in 4 pages: Homepage (About), Works (Portfolio), Portfolio Pop-Up, and Contact.
All the pages are in Photoshop (.PSD) format with all layers neatly organized in layer groups for easy identification and editing of the logo, text and graphics.
Free PSD Templates: vCard Personal Portfolio Minisite

Modernist: Free WordPress Theme with Focus on Typography

This theme supports widgets, is SEO optimized and has clean and documented code. It loads very quickly, and has various WordPress 3.0 features. Works in IE 6+ and all versions of Safari/Firefox/Opera. The theme is absolutely free to use in private and commerical projects.
Modernist: Free WordPress Theme with Focus on Typography

Typominima: Free typography based minimal WordPress theme

Typominima is a free typography based, gorgeous, minimal WordPress theme fit for the writer inside you.
Typominima: Free typography based minimal WordPress theme

Coda Shortcuts Cheat Sheet (PDF)

Coda Shortcuts Cheat Sheet (PDF)

By Paul Andrew (Speckyboyand speckyboy@twitter).

WordPress 3.0 should have been with us by now, but due to a few bugs and glitches it is now going to be released at some point in the next few weeks.

There are big changes in this new WP version, with a lot of exciting features like multi-site and custom post types. Brace yourselves, its coming!

In today’s news we have collected the best resources to give you the low-down on WordPress 3.0.

List of WordPress Version 3.0 Enhancements and Fixes

This is the official list of the many enhancements and fixes you can expect with the imminent release of WordPress 3.0.
List of WordPress Version 3.0 Enhancements and Fixes

WordPress 3.0: The 5 Most Important New Features

The list of new features in WordPress 3.0 isn’t very long in comparison to previous releases. However, the changes that are coming will certainly have a significant impact, particularly if you use WordPress as a CMS. Here is a rundown of the most important new features arriving in version 3.0.
WordPress 3.0: The 5 Most Important New Features

WordPress 3.0: Ultimate Guide to New Features

In this article, from SixRevisions, they will give you a head start for 3.0s release, and will walk you through the notable new features of WordPress 3.0.
WordPress 3.0: Ultimate Guide to New Features

By Paul Andrew (Speckyboy and speckyboy@twitter).

The design of most WordPress powered sites will always have a fair few similarities and traits. Sometimes you may have to look a little bit closer, but the tell tale signs will be there, and they will be shouting: “I am a WordPress site!“. Of course not all WP sites are like that, there are some that will dare to break the mold, dare to extend it to its CMS limits, and create a site design unique and inspiring. Below you will find three showcases that show such sites.

40 WordPress-Powered Websites With Awesome Designs

40 WordPress-Powered Websites With Awesome Designs

Exceptional Web Sites Built on WordPress

Exceptional Web Sites Built on WordPress

30 Insanely Awesome Websites using WordPress as a CMS

30 Insanely Awesome Websites using WordPress as a CMS

By Paul Andrew (Speckyboy and speckyboy@twitter).

As the web matures, there is an ever greater need and requirement for web designers and developers to grasp and learn any new technological advancements. With the new CSS3 properties, HTML5s advancement, WordPress rapidly approaching version 3.0 and with the recent release of the iPad, the demand on the developer has never been greater.

For today’s news round-up we have a small, but useful collection of newly released developer tools and apps that can assist you during this learning curve.

CSSDesk – Dynamic CSS Sandbox

CSS desk is a new and useful tool that allows you to test and experiment with CSS and HTML.
CSSDesk – Dynamic CSS Sandbox

The HTML5 test – How well does your browser support HTML5?

The HTML5 test grades your current browser and depending on how well it performs will awards it a score out of 160. The score is calculated by testing for the many new features of HTML5. Each feature is worth one or more points. In some cases the tests go beyond the specification.
The HTML5 test – How well does your browser support HTML5?

iPad Peek

iPad Peek is a nifty tool that lets you see how any website will be rendered on the iPad. Click on the top border to switch from landscape to portrait mode.
iPad Peek

Elastic WordPress Theme Editor

Elastic is a visual theme editor and theme engine for WordPress that takes a new approach to WordPress theme development. Have a look at the video below.
Elastic WordPress Theme Editor

By Paul Andrew (Speckyboy and speckyboy@twitter).

Everyday new WordPress themes are freely released, the difficulty is not finding fresh themes, the hardest part is finding high quality themes. In this news round-up we have collected the themes are we feel are of a premium quality, but of course, are available for free.

Light Folio Theme

The theme has a unique, simple design that would be a perfectly fit for your personal blogs, portfolios, business site and can also be used a unique magazine-style-blog.
Light Folio Theme

UpSide: A Free WordPress Theme

The UpSide Theme is a free WordPress theme that is best suited for personal blogs. The WordPress theme comes with 5 color schemes and 2 different layouts that you can set up on the theme’s options page in the WordPress Admin panel.
UpSide: A Free WordPress Theme

New WordPress Theme: Koi

Koi has threaded comments, multi-level drop down menus, social media buttons, one sidebar widget and three footer widgets. The theme also includes an option where you can config the menu, favicon, social media buttons, and footer tracking code.
New WordPress Theme: Koi

Silva WordPress Theme

While the Silva theme is easy on the eyes, it is anything but boring. Thanks to its dynamic header, you can easily feature your best posts. Above the header is a user friendly navigation menu, as well as a section for your logo, a search box and several colorful social media icons, including Twitter, StumbleUpon and Facebook.
Silva WordPress Theme

Free Dark and Clean WordPress Theme: Designpile

The theme comes with 3 color styles and a couple of jQuery-based goodies. It can be used for portfolios and blogs as well as corporate web.
Free Dark and Clean WordPress Theme: Designpile

By Paul Andrew (Speckyboy and speckyboy@twitter).

Everyday Design Reviver Answers is offering solutions via useful snippets of code, helpful resources and general tips for all your web design issues. And as such we would like to share with you our favorite code snippets from this last week.

It has been yet another good week, thanks for your support!

“Have you asked a question yet?“

How Can I Display More Than One Twitter Feed On My WordPress Blog?

We do this by accessing the persons Twitter account RSS feed, then fetching it and embedding it on your site.

Replace the example RSS’s with the ones you’d like.

get_item_quantity(3);
$rss_items = $rss->get_items(0, $maxitems);
?>

<?php if ($maxitems == 0) echo '
• No items.

';
else
// Loop through each feed item and display each item as a hyperlink.
Foreach ( $rss_items as $item ) : ?>

• <a href='get_permalink(); ?>'>
  get_title(); ?>
  

I Have Multiple Authors On My Site, How Can I Display Their Info?

If you want to display their info at the bottom or beginning of the post, then use this and place it in the corresponding area of your WordPress files. (i.e. Single.PHP or Comments.PHP)

Edit the author box as necessary.

How Can I Display Someone Else’s FeedBurner Post On My Site?

You can add the following jQuery code anywhere you want on the site (i.e. Sidebar, footer, etc.) Just remember to replace and specify which feed you’ll be recalling.

$(document).ready(function(){
$.ajax({
type: "GET",
url: "http://feeds.feedburner.com/examplefeed",
success: Function(data){
$("#date").text($(data).find("item:first>pubDate:first").text());
$("#title").html("link:first").text()+"'>"+$(data).
find("item:first>title:first").text()+"");
$("#description").html($(data).
find("item:first>description:first").text());
}

What Can I Use To Place A Shadow Behind My Images And Outlines?

If you’re refering to having your images and boxes with a drtop shadow, then you need the Box Shadow CSS feature to work for you. Here’s what you need to place in your CSS:

.shadow {
box-shadow: 3px 3px 3px #f2f2f2;
-moz-box-shadow: 3px 3px 3px #f2f2f2;
-webkit-box-shadow: 3px 3px 3px #f2f2f2;
}

What’s The Easiest Way To Redirect A Specific Page On My Site?

If you want to redirect users to another site once they enter a specific area on your site then you just have to use some of this Javascript code in the page to be redirected from:

Replace the www.google.com with the URL address you wish to redirect to.

Unanswered Questions

There are always some questions that seem to get through the net, can you help us answer them?

1. What Is A Good Resource To Create Style Sheets For Multiple Web Browsers?
2. How To Create A Profile Which Can Be Navigated, Without Using HTML Or Flash?
3. How Do You Find New Clients?
4. What Are Your Top Usability Tips For Web Designs?
5. What’s A Good Mobile Framework To Use?
6. How Can I Integrate ECommerce On My Site Without Any Coding?

Thanks again, firstly to everyone who asked a question, but most importantly thanks to everyone that took the time to offer always helpful and useful answers.

The worlds best and most popular blogging CMS, WordPress, and its huge community, constantly churn out new and amazing methods for taking your blog, and your users experience, ever further. In todays news round-up we have collected the best and most recent WordPress tutorials, tecniques and tips to keep you in the loop with recent developments.

Optimizing WordPress for Search Engines

So, you have this amazing WordPress site, but for some reason the search engines just don’t show you much love. You post killer content, make it easy for users to share via their social networks, and people are subscribing to your RSS feed, indicating that they’re like what they’re reading. If you’ve tried everything to drive traffic to your website, and search engines still ignore your site, maybe you need to evaluate how search engine friendly your website is.
Optimizing WordPress for Search Engines

How To Fully Secure Your WordPress Blog

The author of this posts website, Creativeoverflow, was hacked last Friday morning (11/12/2009), and decided to write this article to help you protect yourself from being hacked or anything in that line.
How To Fully Secure Your WordPress Blog

A Comparison of 6 Popular WordPress Frameworks

Being that most of us are working against multiple deadlines at one time, we need to be able to save ourselves as much time and headache as possible, and help prevent ourselves from unnecessarily re-inventing the wheel. That is why frameworks are such a time and life saver in the development arena.
A Comparison of 6 Popular WordPress Frameworks

Advanced Power Tips for WordPress Template Developers: Reloaded

This article presents the second part of the article, view part 1 here, this part covers customizing basic content administration and adding features to the post and page editor in WordPress.

Many template developers have learned the art of making beautiful, highly customized front end templates for WordPress. But the real wizards know how to tailor the WordPress administrative console to create a tailored, customized experience for content managers.
Advanced Power Tips for WordPress Template Developers: Reloaded

By Paul Andrew (Speckyboy and speckyboy@twitter).

The speed at which WordPress development moves, never ceases to amaze me. The quality of themes, the power of the plugins and, of course, the reliability of the actual CMS, makes WP, by far and away, the most supported CMS ever. Having such a large community ensures that any resources released are of the highest quality, and this demonstrated in todays news round-up by the quality of the WordPress themes.

Dress Up Your Site with 15 Top WordPress Themes

These days, ads venture on the irreverent. They cater to your physical senses and bend your mind to what is possible. In this post, there are some of the most insanely good advertisements of recent memory, broken down into ambient, billboards, commercials and print.

Dress Up Your Site with 15 Top WordPress Themes

The Most Original & Inspirational WordPress Themes Out in November

This article is a collection of the most creative and fresh WordPress themes released in November.

The Most Original & Inspirational WordPress Themes Out in November

100 Premium Like But Free, Fresh WordPress Themes: Year 2009

In this collection, the author, has collected on amazing 100 top quality free WordPress themes. If the theme you are looking for is not in this collection, it doesn’t exist, I promise you.

100 Premium Like But Free, Fresh WordPress Themes: Year 2009

By Paul Andrew (Speckyboy and speckyboy@twitter).

Hi, I’m Alvaro Guzman and this is the second part of the premium wordpress theme tutorial continued from Part 1. This time you’ll learn how to slice the design and convert it into XHTML + CSS, then I’ll show you how to use the css files to mock-up a WordPress template. This isn’t a basic tutorial, if you’re a newbie, maybe you should read some basic HTML+CSS tutorials, and undestand the basics of CSS tags and WordPress features and structure.

If you’re a programmer, you must have some basic knowledge about phothoshop, layers, slicing and obviously WordPress. Anyway, if you’re an intermediate – advanced level webdesigner, I’m sure you’ll find this useful.

Step 1 – Let’s begin

Open the .psd file.

First, hide all the layers containing text, links or content images. Leave the design as clean as possible, just show the containers. As you can see below, I’m showing the background, the header, the main content container and the sidebar background. Of course you must have a folder to put all the images in, also I’m creating two directories inside /images these are /jpgs and /pngs to store JPEG and PNG files respectively.

A good practice is start coding a small framework on a blank .html file and then apply a single stylesheet to it, after that, you can move forward and turns these files into a full WordPress theme.

Step 2 – The main background

Let’s start slicing the images. There’s several ways of slicing in photoshop, I prefer use the Crop tool, because it works just fine on these kind of designs ( is the easiest way IMO), but at this point you’ll not need to crop anything, just hide everything except the City Background and the Fill layer (color: #000000).

Then hit Command (Ctrl) + Option (Alt) + Shift + S to activate the Save for web options. Select the file type as .jpg and set the Quality value to 70. Hit Save and put it under /images/jpgs folder.

Step 3 – Ready to slice

Now one of the funniest things of the entire process, Slicing!. First hide all the background layers, including the city picture, and the black background, also hide the logo. Try to get something like the image below.

Step 4 – Slicing background images

Once you had only the content layers visible, Save your document with another name, and on Layers palette go to Merge Visible, this way you’ll merge all the layers but preserving the transparent background (Do not Flatten the image). Next, using the Slice or Crop tool cut the header image, the content background (1px height is fine, I’m making it bigger just for visual purposes), the sidebar background (1px height), the sidebar footer, and the footer background. See the image below to check the measurements. You must use the Guides to cut the images on the right way. Save each image as a PNG-24 file using the Save for Web options, you can use the names suggested below.

By saving the backgrounds as PNGs files we’ll be able to give our design a floating effect. If you’re using IE6… don’t worry, just switch to Firefox, Chrome, or IE7 for a while, we’ll take care of IE6 next time.

Step 5 – The HTML framework

Now let’s start coding. First we’ll need a html framework to work with and a single css file, then we’ll convert that html file into a wordpress theme.

Start with the head tag.

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

We’ll divide the layout this way:

All your html containers must be inside a div called "page":

<body>	<div id="page">
		<!--Insert the layout here-->

	</div> <!--End of "page"--></body>

Let’s add the header:

<div id="header">
	<div id="headerimg">
		Page title
	</div>

	<div id="top_nav">
		<ul>
			<li>Home</li>
			<li>About</li>
		</ul>

	</div> 
</div> <!--End of "header"-->

The main content will include the posts and the sidebar:

<div id="content">

   <div class="blogcontent">
   <div class="post">
   <div class="post_title">
   <h2><a href="#">Sample Post</a></h2>

   <small>November 2nd, 2008 | by admin | <a href="#">Lorem ipsum</a>| <a href="#">Category 1</a>| <a href="#">Uncategorized</a></small>

   </div> <!--End of "post title"-->
   <!--Comments-->
   <div class="postmetadata">
   <a href="#">2</a>

   </div>
   <br class="space" />

   <div class="entry">
   <p>
   <a href="#">

   <img class="alignleft" title="pic-02" src="images/jpgs/pic-01.jpg" border="0" alt=""/>
   </a>

   But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human. No one rejects, dislikes, or avoids <a href="#">pleasure</a> itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.
   </p>

   <a href="#" class="more-link">Read more &raquo;</a>
 </div> <!--End of "entry"-->

   </div> <!--End of "post"-->
   </div> <!--End of "blogcontent"-->
 <div id="sidebar">

   <ul>
   <li class="categories">
   <h2>Categories</h2>
   <ul>
   <li><a href="#">Lorem ipsum</a> (2)</li>

   <li><a href="#">Category 2</a> (1)</li>
   <li><a href="#">Sample category 3</a> (15)</li>
   </ul>

   </li> 

   <li class="archives">
   <h2>Archives</h2>
   <ul>
   <li><a href="#">November 2008</a> (2)</li>
   </ul>

   </li>
 <li class="linkcat">
   <h2>Blogroll</h2>
   <ul class='blogroll'>
   <li><a href="http://wordpress.org/development/">Development Blog</a></li>
   <li><a href="http://wordpress.org/extend/themes/">Themes</a></li>
   <li><a href="http://planet.wordpress.org/">WordPress Planet</a></li>
   </ul>
   </li>
   </ul> <!--End of sidebar's list-->

   <div id="search">
   <form>
   <label class="hidden">Search for:</label>
   <div>
   <input type="text" value="" name="s" id="s" />
   <input type="submit" id="searchsubmit" value="Search" />
   </div>
   </form>
   </div> <!--End of "search"-->

   </div> <!--End of "sidebar"-->

 <div class="bottom_sidebar">
   <a href="#">RSS feed</a>
   </div>
   </div> <!--End of "content"-->  

Then the footer:

<br style="clear: both;" /> 

 <div id="footer">
 <div class="column1">
 Author
 <br />
 <a href="#">Author's link</a><br />
 <a href="#">License</a>
 <div class="bottom">
 Slogan
 </div>
 </div>
 <div class="column2">
   <h2>Recent posts</h2>
   <ul>
   <li><a href="#">Sample post</a></li>
   <li><a href="#">Lorem Ipsum Dolor Sit Amet</a></li>
   </ul>
   </div> 

   <div class="column2">
   <h2>Pages</h2>
   <ul>
   <li><a href="#" title="About">About</a></li>

   <li><a href="#" title="About">About</a></li>
   </ul>
   </div>
   </div>

Step 6 - Browsing

As we have our main layout already coded, let's test it into a browser, for this tutorial I'm using the last release of Firefox. At this point you should have something like the image below.

Step 7 - Containers and positions

Now start creating the .css file. First you must set the containers in their proper place, that could be a hard work the first times, but with practice it's really easy. You must play with height, width and float values.

First you must define your css classes and ids and set some commons styles as links and paragraphs. Check the .html file of step 5 and look at the class names. Besides, at this point you may use bright background colors to see if your containers are in the right place. Check the Step 4, there're the sizes of the background images.

body
   {
   margin: 0px;
   padding: 0px;
   text-align: center;
   }

h1, h2, h3, ul, li, p, form
   {
   margin: 0px;
   padding: 0px
   }

hr
   {
   display: none;
   }

a{
   text-decoration:none;
   }

a:hover{
   text-decoration:underline;
   }

.space
   {
   clear: both;
   }

#page
   {
   margin: 0px auto;
   padding: 0;
   width: 960px;
   }

#header
   {
   background:#CCCCCC;
	height: 308px;
   width: 960px;
   text-align: center;
   }

#headerimg
   {
   margin: 0px;
   text-align: left;
   }

#top_nav
   {
   background-color:#0066CC;
   height: 45px;
   padding-left: 105px;
   text-align: left;
   }

 #top_nav ul
   {
   list-style: none;
   }

   #top_nav li
   {
   display: inline;
   }

   #top_nav li a:hover
   {
   }

#content
   {
   background: #009933;
   float: left;
   text-align: left;
   }

.blogcontent
   {
   float: left;
   padding: 10px 0px;
   width: 635px;
   }

.post
   {
   text-align: left;
   }

 .post h2
   {
   padding: 0px;
   }

 .post .post_title
   {
   float: left;
   width: 90%;
   }

   .post_title h2, a
   {
   padding: 0px;
   margin: 0px;
   }

   .post_title a
   {
   text-decoration: none;
   }

   .post_title a:hover
   {
   }

   .post_title small
   {
   }

   .post_title small a
   {
   padding: 0px;
   margin: 0px;
   }

   .post .postmetadata
   {
   float: right;
   height: 34px;
   padding: 12px 5px;
   width: 35px;
   }

   .postmetadata a
   {
   text-decoration: none;
   }

   .postmetadata span
   {
   padding-left:5px;
   }

.entry
   {
   }

 .entry a
   {
   padding: 0px;
   margin: 0px;
   }

   .entry a:hover
   {
   }

   .entry blockquote
   {
   border: 2px dashed #042748;
   }

   .entry img
   {
   float: left;
   }

   .entry ul
   {
   }

   .entry li
   {

   }

   .entry ol li
   {
   list-style: decimal;
   } 

   .entry p
   {
   text-align: justify;
   padding: 0px;
   }

   .entry span
   {
   }

#sidebar
   {
   background-color:#6666CC;
   float: left;
   padding: 0px 20px;
   text-align: left;
   width: 285px;
   }

 #sidebar ul
   {
   list-style: none;
   margin: 0px;
   }

   #sidebar li
   {
   margin: 0px;
   }

   #sidebar li h2
   {
   margin: 0px;
   }

 #sidebar ul ul
   {
   list-style: none;
   margin: 0px;
   }

   #sidebar ul ul li
   {
   margin: 0px;
   }

   #sidebar ul ul li a
   {
   }

   #sidebar ul ul li a:hover
   {
   }

.bottom_sidebar
   {
   background-color:#006666;
   float: right;
   height: 90px;
   width: 310px;
   }

#search
   {  }

 #search input
   {

 }

#search #searchsubmit
   {
   background: #b1b1b1;
}

#footer
   {
   background:#999966;
   height: 200px;
   text-align: left;
   width: 960px;/*909*/
   }

 #footer .column1
   {
   background:#FF3333;
   float: left;
	width: 300px;
   }

   .column1 .bottom
   {

}

   .column1 a
   {
   text-decoration: none;
   }

   #footer .column2
   {
   background-color:#006699;
   float: left;
   width: 250px;
   }

   .column2 h2
   {
   }

   .column2 ul
   {
   list-style: none;
   }

   .column2 a
   {
   text-decoration: none;
   }

Test your html file into your browser. You should have something like the image below.

Step 8 - Adding background images

Now add your background images. This time we'll use PNGs files for the most backgrounds, because our city background must be fixed and we want a floating illusion effect. Remember Step 4? Now match those images with the css containers.

body
   {
 background: #000000 url('./images/jpgs/bg-image.jpg') fixed no-repeat bottom center;
 margin: 0px;
 padding: 0px;
 text-align: center;
 }

 #header
   {
   background: url('./images/pngs/header-960x308.png') no-repeat top left;
   height: 308px;
   width: 960px;
   text-align: center;
   }

#content
   {
   background: url('./images/pngs/bg-635x1.png') repeat-y top left;
   float: left;
   text-align: left;
   }

#sidebar
   {
   background: url('./images/pngs/bg-325x1.png') repeat-y top left;
   float: left;
   padding: 0px 20px;
   text-align: left;
   width: 285px;
   }

.bottom_sidebar
   {
   background: url('./images/pngs/bottom-325x90.png') no-repeat bottom center;
   float: right;
   padding: 0px 0px 0px 15px;
   height: 90px;
   text-align: left;
   width: 310px;
   }

#footer
   {
   background: url('./images/pngs/footer-960x200.png') no-repeat top left;
   height: 200px;
   text-align: left;
   width: 960px;
   }

Test the result in your browser.

Step 9 - Adding foreground images

Now replace the logo, navigation links, comments background, graphic slogan and rss icon, for their respective images.

<div id="header">
 	<div id="headerimg">
 		<a href="#"><img alt="Generation X" border="0" src="./images/pngs/logo-480x135.png" /></a>

 	</div>
 	<div id="top_nav">
 		<ul>
 			<li><a href="#"><img alt="Home" border="0" src="./images/pngs/home.png" /></a></li>
 			<li><a href="#"><img alt="About" border="0" src="./images/pngs/about.png" /></a></li>

 		</ul>
 	</div>
 </div> 

.
.
.

 <div class="bottom_sidebar"> 		<a href="#"><img alt="0" border="0" src="./images/pngs/rss.png" /></a> </div>

.
.
.

<div class="bottom"> 		<img alt="" border="0" src="./images/pngs/footer-115x51.png" /></div>

And the css to make the images fit:

#headerimg
{
	 height: 185px;
	 margin: 0px;
	 padding: 55px 0px 0px 45px;
	 text-align: left;
 }

#top_nav
{
	 height: 45px;
	 padding-left: 105px;
	 text-align: left;
}

#top_nav li a:hover
{
   background: url('./images/pngs/hover.png') no-repeat bottom center;
}

.bottom_sidebar
{
 	background: url('./images/pngs/bottom-325x90.png') no-repeat bottom center;
 	float: right;
 	padding: 0px 0px 0px 15px;
 	height: 90px;
 	text-align: left;
 	width: 310px;
 }

.post .postmetadata{	background: url('./images/pngs/bg-45x58.png') no-repeat top left;	float: right;	height: 34px;	padding: 12px 10px;	width: 25px;}

 #footer .column1
 {
	float: left;
	font: normal 10px Arial;
	padding: 0px 0px 0px 80px;
	width: 300px;
 }

 .column1 .bottom
 {
 	padding: 50px 0px 0px 40px;
 }

At the end you should get something like this image:

Step 10 - Text styles

We're close to finish the mock-up, now we need to add the text styles for the content (posts), sidebar and footer. Play with typography and colors as you want. The most important at this point is to place the text in a right place, for this you must take care about padding and margin values, i.e. for the list items on the sidebar I set a left padding of 20 pixels and 0 px margin:

 #sidebar li    {margin: 0px;   padding: 0px 0px 0px 20px;   }

You can just copy the css style below:

body
   {
 background: #000000 url('./images/jpgs/bg-image.jpg') fixed no-repeat bottom center;
 color: #333;
 margin: 0px;
 padding: 0px;
 text-align: center;
 }
h1, h2, h3, ul, li, p, form
   {
   margin: 0px;
   padding: 0px
   }
hr
   {
   display: none;
   }
a{
   text-decoration:none;
   }
a:hover{
   text-decoration:underline;
   }
.space
   {
   clear: both;
   }
#page
   {
   margin: 0px auto;
   padding: 0;
   width: 960px;/*909*/
   }
#header
   {
   background: url('./images/pngs/header-960x308.png') no-repeat top left;
   height: 308px;
   width: 960px;/*909*/
   text-align: center;
   }
#headerimg
   {
   height: 185px;
   margin: 0px;
   padding: 55px 0px 0px 45px;
   text-align: left;
   }
#top_nav
   {
   height: 45px;
   padding-left: 105px;
   text-align: left;
   }
 #top_nav ul
   {
   list-style: none;
   }

   #top_nav li
   {
   display: inline;
   }

   #top_nav li a:hover
   {
   background: url('./images/pngs/hover.png') no-repeat bottom center;
   }
#top_sidebar
   {
   color: #fff;
   font-weight: bold;
   height: 10px;
   padding-right: 155px;
   text-align: right;
   }
#content
   {
   background: url('./images/pngs/bg-635x1.png') repeat-y top left;
   float: left;
   text-align: left;
   }
.blogcontent, .widecolumn
   {
   float: left;
   padding: 10px 0px;
   width: 635px;
   }
 .blogcontent form
   {
   color: #fff;
   padding: 10px 50px 0px 90px;
   }

   .blogcontent input
   {
   background-color: transparent;
   border: 1px solid #214b73;
   color: #fff;
   }

   .blogcontent #searchsubmit
   {
   background: #b1b1b1;
   color: #214b73;
   font-weight: bold;
   padding: 2px;
   }

   .blogcontent h2
   {
   color: #fff;
   font: bold 18px  Georgia, Arial;
   padding: 0px 50px 0px 90px;
   }

   .blogcontent small a
   {
   font-size: 18px;
   padding: 0px 50px 0px 90px;
   }
.post
   {
   padding: 0px 50px 0px 90px;
   text-align: left;
   }
 .post h2
   {
   color: #fff;
   padding: 0px;
   }

 .post .post_title
   {
   float: left;
   width: 90%;
   }

   .post_title h2, a
   {
   color: #b31414;
   font: normal 24px Georgia, Arial;
   padding: 0px;
   margin: 0px;
   }

   .post_title a
   {
   text-decoration: none;
   }

   .post_title a:hover
   {
   color: #fff;
   }

   .post_title small
   {
   color: #385673;
   font: normal 12px Georgia, Arial;
   }

   .post_title small a
   {
   color: #385673;
   font: normal 12px Georgia, Arial;
   padding: 0px;
   margin: 0px;
   }

   .post .postmetadata
   {
   background: url('./images/pngs/bg-45x58.png') no-repeat top left;
   float: right;
   height: 34px;
   padding: 12px 10px;
   width: 25px;
   }

   .postmetadata a
   {
   color: #416fa3;
   text-decoration: none;
   }

   .postmetadata span
   {
   color: #416fa3;
   font: normal 24px Georgia, Arial;
   padding-left:5px;
   }
 .entry
   {
   color: #c3c3c3;
   font: normal 12px Arial;
   padding: 20px 0px;
   }
 .entry a
   {
   color: #385673;
   font: normal 12px Georgia, Arial;
   padding: 0px;
   margin: 0px;
   }

   .entry a:hover
   {
   color: #69c;
   }

   .entry blockquote
   {
   border: 2px dashed #042748;
   padding: 8px;
   }

   .entry img
   {
   float: left;
   padding: 0px 20px 0px 0px;
   }

   .entry ul
   {
   padding-left: 20px;
   }

   .entry li
   {
   list-style: url('./images/pngs/bull-list.png');
   }

   .entry ol li
   {
   list-style: decimal;
   } 

   .entry p
   {
   text-align: justify;
   padding: 0px;
   }

   .entry span
   {
   color: #b31414;
   }
#sidebar
   {
   background: url('./images/pngs/bg-325x1.png') repeat-y top left;
   float: left;
   padding: 0px 20px;
   text-align: left;
   width: 285px;
   }
 #sidebar ul
   {
   list-style: none;
   margin: 0px;
   padding: 5px 0px;
   }

   #sidebar li
   {
   margin: 0px;
   padding: 0px 0px 0px 20px;
   }

   #sidebar li h2
   {
   color: #fff;
   font: normal 18px Rockwell, Georgia, Arial;
   margin: 0px;
   padding: 10px 0px;
   }
  #sidebar ul ul
   {
   list-style: none;
   margin: 0px;
   }

   #sidebar ul ul li
   {
   margin: 0px;
   padding: 0px 0px 0px 30px;
   }

   #sidebar ul ul li a
   {
   color: #69c;
   font: normal 12px Arial;
   text-decoration: none;
   }

   #sidebar ul ul li a:hover
   {
   color: #b31414;
   }
 .bottom_sidebar
   {
   background: url('./images/pngs/bottom-325x90.png') no-repeat bottom center;
   float: right;
   padding: 0px 0px 0px 15px;
   height: 90px;
   text-align: left;
   width: 310px;
   }

#search
   {
   font: bold 12px Arial;
   color: #fff;
   padding: 0px 0px 15px 15px;
   }
 #search input
   {
   background-color: transparent;
   border: 1px solid #214b73;
   color: #fff;
   }
 #search #searchsubmit
   {
   background:#0B192C;
   color: #FFFFFF;
   font-weight: bold;
   padding: 2px;
   }
#footer
   {
   background: url('./images/pngs/footer-960x200.png') no-repeat top left;
   color: #fff;
   height: 200px;
   text-align: left;
   width: 960px;
   }
 #footer .column1
   {
   float: left;
   font: normal 10px Arial;
   padding: 0px 0px 0px 80px;
   width: 300px;
   }

   .column1 .bottom
   {
   padding: 50px 0px 0px 40px;
   }

   .column1 a
   {
   color: #fff;
   font: normal 12px Arial;
   text-decoration: none;
   }

   #footer .column2
   {
   float: left;
   font: normal 12px Arial;
   padding: 35px 0px 0px 0px;
   width: 250px;
   }

   .column2 h2
   {
   color: #457db9;
   font: normal 20px Rockwell;
   }

   .column2 ul
   {
   list-style: none;
   }

   .column2 a
   {
   color: #fff;
   font: normal 12px Arial;
   text-decoration: none;
   }

Now you should have something like following image. The mock up is ready; now let's turn this into a WordPress template.

Step 11 - WordPress Template

First you'll need to duplicate the template files into a new folder inside /wp-content/themes . You can copy and paste all the files of "default" theme into a new folder that we call "generationx".

The process now is really simple, just replace all the static content on your html file for the wordpress functions and save them into their respective files. First paste into /generationx folder your style.css file, replacing the original one.

Let's start with header.php file, this is what you have into you .html mockup:

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

</head>
<div id="page">

	<div id="header">
 		<div id="headerimg">
 			<a href="#"><img alt="Generation X" border="0" src="./images/pngs/logo-480x135.png" /></a>

 		</div>
 		<div id="top_nav">
 			<ul>
 				<li><a href="#"><img alt="Home" border="0" src="./images/pngs/home.png" /></a></li>
 			<li><a href="#"><img alt="About" border="0" src="./images/pngs/about.png" /></a></li>

			 </ul>
	 	</div>
	</div> <!-- end of header -->

You'll need to turn that into the following code on header.php file, for this use the original header.php file to see where to put the code in:

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

   <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />

   <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<style type="text/css" media="screen">
</style>

<?php wp_head(); ?>
</head>
<body>
   <div id="page">

		<div id="header">
   		<div id="headerimg">

			   <a href="<?php echo get_option('home'); ?>/"><img alt="Generation X" border="0" src="./wp-content/themes/generationx/images/pngs/logo-480x135.png" /></a>
			</div>

   		<div id="top_nav">
   			<ul>
				   <li><a href="<?php echo get_option('home'); ?>"><img alt="Home" border="0" src="./wp-content/themes/generationx/images/pngs/home.png" /></a></li>

				   <li><a href="?page_id=2"><img alt="About" border="0" src="./wp-content/themes/generationx/images/pngs/about.png" /></a></li>

			   </ul>
		   </div>
		 </div>

As you can see I'm converting the static content of href, texts, paths and turn them into a dynamic content using the wordpress functions.

Now you must repeat that on every single .php file into the theme folder. This is maybe the hardest part of the entire process, because there's a lot of files and tiny details.

The main files are:

• index.php - includes the famous "loop". You'll need to change this tag there: <div id="content">
• header.php - includes the html heading data and these tags: <head>, <body> and the header containers like logo and navigation bar.
• sidebar.php - includes all the sidebar contents like Categories, archives, blogroll, search form and RSS icon.
• footer.php - includes the closing tags for <div id="page"> </body> and </html>
• page.php - it has the "pages" template
• single.php - it has the "single" post template

Our html mockup is an easy way to follow the wordpress structure, but turning the static content into dynamic wordpress isn't a quick job, it will take you several hours of testing and debugging.

To run this custom template, login into your WordPress admin panel, go to Design > Themes and select your brand new GenerationX template, activate it and see how it looks.

Here's the step by step HTML source code

Tutorial files

Picture your finished custom wordpress theme live on your server, completely unique and fresh. By the time you have finished reading the resources in this post that scenario will be a reality. People love custom themes, they make a blog come to life with a personality of its own. It’s no secret that they’ll reward it you for it through links, subscriptions and bookmarks.

Theme Design Lessons

How To Create A WordPress Theme From Scratch

Good walk through in detail on creation of themes.

The 5 Minute Theme

Fast way of making simple a simple wp theme.

Turn Any Web Template Into a Theme

This flash tutorial shows how to turn any web page into a wordpress theme. The flash movie is pretty distorted but gives a good idea of what can be achieved.

Mocking Up a Theme In Photoshop

A bit of self promotion! This tutorial shows how to mock up a modern theme in photoshop.

16 Lessons On Theme Creation

Covers all bases in detail, really comprehensive lessons on all aspects of WordPress theme creation from header to footer!

4 Step Theme Design Guide

Part 1 – Pulling it apart; Part 2 – Complete design, header, and footer; Part 3 – The sidebar; Part 4 – The content.

Basic Intoduction To Themes

Good post breaking down how the themes work for those new to WordPress.

Offical WordPress Documentation

The WordPress.org Codex with theme design documentation.

WordPress Templates For Redesign

Premium Theme Design with Thesis

Want a head start in your new theme design? Thesis will cost you $87 but it been typeset extremely well and is simple to customise the design for stunning results quickly. You’ll save the purchase price in design time with Thesis. (disclosure: URL contains our affiliate tracker)

Create Flexible Themes

Free to use selection of WordPress themes, good for customization.

100 Free Templates

Helpful Software and Cheats

Theme Editor For Dreamweaver

Now when you open a wordpress theme in Dreamweaver the whole thing is visable – legend.

Inspiration

We Love WP!

Showcase of WordPress powered websites.

Ready Made Swatches

Great selection of swatch and color scheme ready to choose from.

CSS Galleries

Go to the bottom of this post for links to lots of CSS galleries for design inspiration.

Freebies

Free Stock Images

381k free images, an awesome free collection.

Creative Commons Images at Flickr

50 million plus creative commons images for use, make sure to check the iicences for usage permissions.

Basic Theme Creator

Basic online theme design tool, change the element color in real time then save your theme.

More Theme Resouces

40 more resource links for WordPress theme design.

Free Social Icons

Free social icons to use on your blog.

Validation and Testing

w3c Validation Service

Well know and classic, but worth a mention.

Cross Browser Checking

View screenshots of your finished theme in all the browsers.