Tips, Tutorials

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

December 5, 2008 • By

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