Premium Wordpress Theme Design – Part 2 – HTML + CSS + Wordpress Theme Files

In Tips, Tutorials Dec 5, 200870

Premium Wordpress Theme Design – Part 2 – HTML + CSS + Wordpress Theme Files

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

Ask a question on Design Reviver Answers

70 Comments

John Joubert
Dec 5, 2008

Once again. Great article. Nice detail and good explanation! Well done
2tonewarrior
Dec 5, 2008

Juhuuu!!! at last! i´ve been waiting this tutorial
Max
Dec 5, 2008

Converting to html then wordpress is the best way, great tutorial.
John Charles
Dec 5, 2008

Thanks for the tutorial!! Great work!! .I would recommend them to anyone, easy to follow. Good work.
weblizzer
Dec 5, 2008

this is a great post, i’ve waiting to release this after the first theme design, i’m trying to learn how to integrate it on wordpress as i’ve don’t have enough time to tweak the css for that, but now this helps me a lot to work for wordpress. Thank you so much
Jiert
Dec 5, 2008

Awesome, I’ve been looking forward to this. Can’t wait to dive into this.
Montana Flynn
Dec 5, 2008

Wow, this is amaazing! So glad I ound this site, consider yourself bookmarked!

Thanks again,
Montana
Celebx
Dec 6, 2008

Well done! Excellent tutorial.
belen
Dec 7, 2008

awesome tut thanks!!!!!
Josh Read
Dec 10, 2008

YES! Thank you for these tutorials. I’ve been making custom themes for my customers for a while but these tutorials are so great. Every time I get inspired and more organized.
Ceez
Dec 11, 2008

This is gold!!
Website Design Delhi
Dec 11, 2008

thanks for your for good blog and also good post in this blog
w3planting
Dec 14, 2008

I have been looking for converting my html into WP theme and this tuts. comes in at right time Great article & explanation.
gudlow
Dec 16, 2008

This is Good WP themes tutorial! simple and easy. good for beginner like me..
Hayalmeyal
Dec 17, 2008

thank you. wonderfull tut
Nestor
Dec 20, 2008

Alvaro, this is nice and clean. Good Job, congrats
(c)Rom@Silicon Valley
Dec 23, 2008

I went through your tutorial, from photoshop, cutting and cropping the images, through making the actual theme. I had Fun! Really enjoyed your tutorials…

More power and may you have more tutorials to come.

Thank you very much!!!!… Salamat!
Grafiko
Jan 2, 2009

Really well explained. Thanks for posting
Ajay
Jan 2, 2009

Excellent stuff this. Hats off to you for all the time and effort spent in making this. This is definitely an eye opener for anyone trying to create wordpress themes for the first time.
Charles
Jan 8, 2009

This is PERFECT ! Exactly the article I was looking for for a while. Your explanations are really complete. I like to create designs on Photoshop but the cutting part in css was not so evident for me. Once more, thank you so much !
Eduardo
Jan 8, 2009

Very cool!
SCott
Jan 13, 2009

great tutorial. Always amazed at what you can do in wordpress
gdenarayana
Jan 15, 2009

wow, what a complete tutorial here

i’m learning from the best here

regards
Htoo Tay Zar
Jan 18, 2009

Wow, Really long tutorial.. really thank you for your time.
web design London
Jan 19, 2009

Thanks for taking the time to do this. I going to find this very useful.
Danny Outlaw
Jan 28, 2009

Its noice to see a wordpress tutorial such as this that really breaks down every aspect of creating a wordpress theme. So many wordpress theme tutorials forget to cover basic information that those who are just learning may not know.

Great job.
Boca Raton Website Design
Feb 2, 2009

Thanks for sharing your thoughts…I think it was a great post…a very interesting read!
Hatanaka
Feb 15, 2009

I got all the way up to getting everything to look right with the html code. I used my own images but named everything and sized everything exactly as stated in this tutorial. I just can’t get the whole switch over to php code work. Anyone have an example of how they did it? I can’t wait till the final wordpress theme is posted so I can at least look at what it is supposed to look like.
E-maniacs
Feb 18, 2009

Wow.

You have spent some time do do that
Appreciate it.
Studio Primus
Feb 19, 2009

Thank you for this tutorial, well-done! I have started making all the simple websites in WP due to this step-by-step tutorial…
themisfit
Feb 23, 2009

Thanks for all the time that you have put into creating this tutorial, I can’t wait to give it a try on my own blog.
Chris
Mar 2, 2009

A great tutorial, thanks for your help!!!
Brandon Greene
Mar 6, 2009

I have been able to move the type and almost get it right but the fill in part of my side bar won’t show up. You can only see the bottom and the top…?
Sonja
Mar 6, 2009

Amazing! I’ve searched for this information for months and now found this – my frustrations are over. Thank you sooo much!
saurabh shah
Mar 14, 2009

wowww mannn ..! amazing … nice tutorial….
ClassiPress Premium Theme
Mar 22, 2009

This is the best tutorial I’ve come across so far. Thanks for making such clear images and explaining everything!

I could use your help doing a new design for my classified ads wordpress premium theme. Send me an email if you are interested in doing some work.

~David
http://wpclassipress.com/classipress/
Zadia
Mar 23, 2009

DANG!
Is it the same way to do this for blogspot theme btw?
I love you tutorials, so much details, thumbs up!
edward
Mar 30, 2009

great now I can use my own design…
Phil
Apr 2, 2009

This is a great tutorial. I’m having a problem though that when i come to exporting the images, then it all comes together in dreamweaver, the transparent parts are not 100% see through. Any ideas why?

Thanks
80+ Photoshop Tutorials: Practical Web Interface Design | tripwire magazine
Apr 10, 2009

[...] Premium Wordpress Theme Design – Part 2 – HTML + CSS + Wordpress Theme Files [...]
parsaba
Apr 15, 2009

this is nice tutorial and very usefull for me, and i hope you’ll give more tutorial for making great design for wordpress templates. Once Again, thank you very much
soloman
Apr 15, 2009

Excellent Tut! But with regards to IE6. STOP SUPPORTING IT PEOPLE! It’s almost 10 years old, just stop already.

if we continue to spend countless hours making it look perfect in IE6, those users who haven’t upgraded to IE7, or ANYTHING better, will never make the move because they feel it’s not needed. It’s the whole chicken and egg thing….if we continue to spend time hacking our css files to make it look good in IE6 they won’t upgrade and if they don’t upgrade we need to continue to hack our css…….

In order to move forward and embrace web standards we have to stop looking back and using outdated technology. Sorry for the outburst
Again…awesome tutorial
links for 2009-04-20 « Free Open Source Directory
Apr 20, 2009

[...] Premium WordPress Theme Design – Part 2 – HTML + CSS + WordPress Theme Files | Design Reviver 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. (tags: Premium WordPress theme Design – Part 2 HTML + CSS Files | Reviver) [...]
250 Wordpress Tutorials
Apr 30, 2009

[...] 159. Premium Wordpress Theme Design -HTML + CSS + Wordpress Theme Files [...]
mcloft
May 14, 2009

Good article.i will try that.Thanks.
Juan
May 21, 2009

Is this theme available for download?

I can’t wait to try it for myself!
Windows
May 31, 2009

great post thankss
A Web Developer’s Bookmarks « Hired Guns Creative
Jun 18, 2009

[...] Design Reviver: Premium Wordpress Theme Design – Part 2 – HTML + CSS + Wordpress Theme Files [...]
shuwatto
Jun 25, 2009

Awesome!

I love this series of tutorials.
Especially, turing a psd file into html and css files.

It’s clear, simple and really understandable for me who is a mainly PHP programmer.

Thanks, you are the MAN!
Wordpress Design and Theme Tutorials - Hidden Pixels
Jun 30, 2009

[...] Premium Wordpress Theme Design – Part 2 – HTML + CSS + Wordpress Theme Files [...]
lenton
Jul 6, 2009

It so great Tutorial.I appreciate this series.I need full source code (convert wordpress theme)this series.How can get it? Please send me.I shall be highly thankful, if you could accede to my request.
Robyn
Jul 17, 2009

Hello, I love this tutorial, but when I d/l the zip file, it will not unzip. Is there another location to d/l the psd file? Pls. email me. Thx.
yarimezgi
Jul 30, 2009

thanks so much.this is wonderful tutorial.
Wordpress Tema Yap?m?! (?ngilizce Kaynak) | Pislick.Tk
Jul 31, 2009

[...] Part 2 AKPC_IDS += "51,";Popularity: unranked [?] [...]
Wordpress mockup tutorials the best | Design strike
Aug 12, 2009

[...] Coding wordpress tutorial [...]
PaylasimCity
Sep 16, 2009

thanks so much.this is wonderful tutorial.
Nannkko
Sep 22, 2009

Thank you.
dante
Oct 9, 2009

does anyone have a demo of the theme up and working…thanks
premium wordpress tema yap?m? 2 http://d… « wiki.laroouse
Oct 20, 2009

[...] wordpress tema yap?m? 2 http://designreviver.com/tutorials/premium-wordpress-theme-design-part-2-html-css-wordpress-theme-fi... 0 like it. Like [...]
Keiy
Oct 28, 2009

For me, this is the best tutorial about wordpress theme design in the entire universe of internet. Thanks very much…..
SWP
Nov 4, 2009

thank you so much for this tutorial.
Roland
Nov 23, 2009

Bravo Bravo Bravo!! EXCELLENT article!! Thank you so very much for making the time to educate us! Your Tuts ROCK, keep em comin!
50 How To Create Design WordPress Themes Web Layouts In Photoshop Tutorials | Stuart Duff
Dec 3, 2009

[...] tutorial is in two parts, click the links below to visit them. Part 1 – Photoshop Mockup | Part 2: HTML and CSS3. Grafpedia : Create a web 2.0 business layoutThis tutorial is a single part and is a photoshop [...]
Nikunj Tmaboli
Dec 15, 2009

Thanks man was searching for this kind of tutorial from long time
altoid
Dec 25, 2009

Really love the theme, but can’t figure out the coding. Can anyone post the finished files ready for WP so I can compare?
Jim
Jan 2, 2010

This is one of the best tutorials I have found that talks through the process of creating a design and recreating it with CSS. HOWEVER! Like all other ‘Photoshop to Wordpress’ tutorials I have found so far, the guides stop short of clearly explaining how to convert the designs into functional Wordpress themes by integrating the Wordpress PHP functions into the code.

The guide is well explained, but for all intents and purposes, you’re explaining how to turn a photoshop design into a static web page and spend very little time actually making this a Wordpress theme. I’d like to see more detailed explanation of this, as this seems to be the biggest gray area – toward the end of the article you suggest it’s simple, but then contradict yourself by saying it could be the hardest part of the process.

It’s an excellent guide, I’d just like to understand more about how you make the HTML/CSS work specifically with Wordpress. After all, that’s the point of this, isn’t it!?
frank
Jan 11, 2010

I completely agree with Jim (Jan 2nd 2010) post. This is a fantastic tutorial, but I have no clue how to apply the php coding from this post. I tried to take the example and my design uploaded to wordpress is a mess! Any help as to how to convert the html code to php code for wordpress would be appreciated.
Jones
Jan 17, 2010

It was great up untill the point where you have to convert the html to wordpress. The whole tut was nice and detailed but that part really sucks. Just sayin ok now you convert your html to wordpress and it will take you hours is wrong. Where is the detail here? The title of this tut os misleading. It should read “Premium html and css from Photoshop”
I would appreciate the rest of the php implementation like you did for the header otherwise there is nothing usefull for wordpress here.
lockerz
Feb 15, 2010

if we continue to spend countless hours making it look perfect in IE6, those users who haven’t upgraded to IE7, or ANYTHING better, will never make the move because they feel it’s not needed. It’s the whole chicken and egg thing….if we continue to spend time hacking our css files to make it look good in IE6 they won’t upgrade and if they don’t upgrade we need to continue to hack our css…….
???? ??? ????? » Blog Archive » 25 ??? ?????? ????? ????? ???? ??? ??????????
Feb 28, 2010

[...] Premium Wordpress Theme Design – Part 2 – HTML + CSS + Wordpress Theme Files [...]

In Tips, Tutorials Dec 5, 200870

Premium Wordpress Theme Design – Part 2 – HTML + CSS + Wordpress Theme Files

Step 1 – Let’s begin

Step 2 – The main background

Step 3 – Ready to slice

Step 4 – Slicing background images

Step 5 – The HTML framework

Step 6 - Browsing

Step 7 - Containers and positions

Step 8 - Adding background images

Step 9 - Adding foreground images

Step 10 - Text styles

Step 11 - Wordpress Template

Here's the step by step HTML source code

70 Comments

Leave a Comment

9,518 Subscribers

Talented Designers Wanted!

Featured Articles

Recent Comments

Recent Articles

Tags

More Useful Stuff

In Tips, Tutorials Dec 5, 200870

Premium Wordpress Theme Design – Part 2 – HTML + CSS + Wordpress Theme Files

Step 1 – Let’s begin

Step 2 – The main background

Step 3 – Ready to slice

Step 4 – Slicing background images

Step 5 – The HTML framework

Step 6 - Browsing

Step 7 - Containers and positions

Step 8 - Adding background images

Step 9 - Adding foreground images

Step 10 - Text styles

Step 11 - Wordpress Template

Here's the step by step HTML source code

Related Posts

70 Comments

Leave a Comment

9,518 Subscribers

Talented Designers Wanted!

Featured Articles

Recent Comments

Recent Articles

Tags

More Useful Stuff