How To Create WordPress Themes From Scratch Part 2

July 15th, 2008 by under Tips

In Part 2, I will show you how to slice the design we did in part 1. After that, I will show you the important notes when we are coding a css/xhtml layout which compatible with wordpress structure. Let’s start.

Slicing (Updated 7 Sept 08)

Before we slice, we need to make sure what components we can replace them with css and which parts we need to slice out. Also, consider the background images which we can only use a 1px width image and set it to repeat in background. This will save more bandwidth and capacity while also increase the loading time. Go to View > snap. We need to make sure the slicer can auto snap to the edge of the object we need. To select a slice tool, simply press on ‘k’ from the keyboard.

Video

Since the slicing steps aren’t clear, so I create this video for you. I hope this short video can explain better. Below are some shorcut keys if you are using PC:

  • K » Slice Tool
  • Space Bar + Mouse Drag » Move the screen
  • CTRL + ALT + SHIFT + S » Save for web

When you are going to select the slices to save for web.

  • Space Bar + Mouse Drag » Move the screen
  • SHIFT + Left Click » Select multiple slices

Here, you may notice that I am going to save the layout images into PNG-24 which is clearer but with a little increase of file size.

Repeated image

We use the header background as a repeated image. In this case, we need to be very careful to slice out the border of two different colors. Refer to the screen shot below.
tutorial

Image Slices

For cutting a full image, we need to zoom in always. Sometimes we need to zoom to maximum (1600) to get the best result. For example:
tutorial

CSS / HTML Coding

We need to figure out the main sections for the layout before we start. Parts to be considered are:

  1. Wrapper (to hold the entire layout except footer)
  2. Header (for the header part including the page navigation)
  3. Content (to hold the posting area and also the sidebar)
  4. Left-col (for the posting area, comment section and respond section)
  5. Right-col (sidebar, RSS, about me and search field)
  6. Footer (footer)

Preparation

I am using DreamWeaver as the editor. Before we start. Create a stlye.css file and a index.html. Place the code below before the title in the index.html.

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

Step 1 – Setting Up the Main structure

Below are the main containers for the layout. I put the footer out of the wrapper for the full width for different resolution.

<!--wrapper-->
<div id="wrapper"> 
	<!--content-->
	<div id="content">
		<!--left-col--><div id="left-col"></div><!--left-col-end--> 
		<!--right-col--><div id="right-col"></div><!--right-col-end-->  
       </div><!--content-end-->  
</div><!--wrapper-end-->
 
<!--footer--><div id="footer"></div><!--footer-end-->

Step 2 – Add In More Details Into Certain Section

Below are the main containers for the layout. I put the footer out of the wrapper for the full width for different resolution.

<!--wrapper-->
<div id="wrapper">
<!--header-->
	<div id="header">
    	<!--logo-->
    	<div id="logo"><h1><!--Logo link--></h1></div>        
       <!--logo-end-->    
        <!--page-navigation-->
        <div id="menu">
        	<ul>    	
            	<li class="page_item"><a href="#">Gallery</a></li>
                <li class="page_item"><a href="#">Contact</a></li>
            	<li class="page_item"><a href="#">About</a></li><!--we need to float this to the right, so, we need to make it in reverse way-->
            </ul>
        </div><!--page-navigation-->
    </div><!--header-end-->
 
	<!--content-->
	<div id="content">
 
		<!--left-col-->   
		<div id="left-col">
 
        	<!--featured-post--><div id="featured-post"><!--featured post will goes here--></div><!--featured-post-end-->
        	<!--post--><div class="post"><!--blog posts will go here--></div><!--post-end-->
 
        </div><!--left-col-end--> 
 
		<!--right-col-->  
        <div id="right-col">
 
			<!--rss subscriber--> <div id="feed"></div><!--rss subscriber-end-->
 
		<!--search--><div id="searchform"></div><!--search-end-->  
 
	  <!--about--><div id="about"></div><!--about-end-->              
 
            	<!--sidebar-->             
           		<div id="sidebar">
            		<!--sidebar1--><div id="sidebar1"></div><!--sidebar1-end-->
 
            		<!--sidebar2--><div id="sidebar2"></div><!--sidebar2-end--> 
 
            	</div><!--sidebar-end-->     
 
        </div><!--right-col-end-->  
    </div><!--content-end-->  
</div><!--wrapper-end-->
 
<!--footer--><div id="footer"></div><!--footer-end-->

Step 3 – CSS For The Main Containers

Below are the main containers for the layout. I put the footer out of the wrapper for the full width for different resolution.

#wrapper {
	width: 960px;
	margin: 0 auto;
}

#header {
	width: 960px;
	height: 100px;
	float: left;
}

#content {
	width: 960px;
	float: left;
}

#content #left-col {
	width: 600px;
	float: left;
	position: relative;
	padding-right: 30px;
}

#content #right-col {
	width: 330px;
	margin-top: 20px;
	float: left;
	position: relative;
}

#content #right-col #sidebar {
	width: 330px;
	float: left;
	position: relative;
}

#footer {
	width: 100%;
	float: left;
	background: url(images/footer-bg.png) repeat-x top left;
	height: 23px;
	padding-top: 40px;
	color: #fff;
}

Step 4 – CSS For Page List

We know that the menu will stick to the right hand side. In this case, the menu will be in descending order. So, we need to float it right.

#header #menu {
	float: left;
	width: 500px;
	margin-top: 38px;
}

#header #menu ul {
	width: 500px;
	list-style: none;
	float: right;
	text-align: right;
}

#header #menu ul li.page_item { /* page_item is wordpress default class for page list */
	float: right;
}

#header #menu ul li.page_item a {
	padding: 4px 8px;
	display: block;
	margin: 0 7px 0 0;	
	float: left;
	text-decoration: none;
	font: 900 14px Arial, Helvetica, sans-serif;
	color: #a9bf78;
	-moz-border-radius-topleft: 2px;
	-moz-border-radius-topright: 2px;
}

#header #menu ul li.page_item a:hover {
	color: #fff;
}

#header #menu ul li.current_page_item a { /* current_page_item is wordpress default class for active page list */
	color: #fff;
	background-color: #2c4106;
}

Step 5 – Sidebar Structure

WordPress have a default sidebar structure. It is design to fit all the widget you are going to use in the future. The widget you apply will start in the second level of the list.

<!--sidebar-->             
<div id="sidebar"><h3>Sidebar</h3>
    <!--sidebar1-->
        <div id="sidebar1">
            <ul>
                <li><h2>Category</h2>
                    <ul><!--the widget will start at the second level of the list-->
                        <li></li>
                    </ul>
                </li>
                <li><h2>Links</h2>
                    <ul>
                        <li></li>
                    </ul>
                </li>
            </ul>
        </div><!--sidebar1-end-->                 
</div><!--sidebar-end-->

Step 6 – CSS For Sidebar Structure

WordPress have a default sidebar structure. It is design to fit all the widget you are going to use in the future. The widget you apply will start in the second level of the list.

#sidebar ul {
	list-style: none;
}

#sidebar1 {
	float: left;
	width: 160px;
	padding-right: 10px;
}

#sidebar2 {
	float: left;
	width: 160px;
}

#sidebar ul {

}

#sidebar ul li {
	float: left;
	width: 158px;
	background-color: #d7d39a;
	border: 1px solid #bbb875;
	margin-bottom: 10px;
}

#sidebar ul li h2 { /* this is the widget title */
	padding: 3px 4px 6px;
	font: 400 18px Arial, Helvetica, sans-serif;
	color: #4c6b0d;
}

#sidebar ul li ul {

}

#sidebar ul li ul li { /* begin for the widget list */
	float: left;
	width: 158px; 
	border: 0;
	margin-bottom: 0;
}

#sidebar ul li ul li a {
	border-top: 1px solid #bbb875;
	float: left;
	width: 150px;
	text-decoration: none;
	color: #5d5b35;
	padding: 2px 4px;
}

#sidebar ul li ul li a:hover {
	color: #fff;
	background-color: #bbb875;
}

Step 7 – Comment Section For the Single Page

Below is the comment section.

<!--comments-->
<div id="comments">
<h3 id="comment-title">Comments</h3>
    <ol>
        <li>
        <div class="comment-data"><!--the left comment box for the content-->
        <p><!--comment goes here--></p>
        </div>
 
        <div class="comment-info"><!--the right hand side for the commentor gravatar and info-->
            <!--author avatar-->
            <br /><strong><a href="#"><!--author name--></a></strong><br /><!--date--> 
        </div>
        </li>
 
        <li class="alt"><!--the alternative style for the comment box-->
        <div class="comment-data">
        <p><!--comment goes here--></p>
        </div>
 
        <div class="comment-info"><!--the right hand side for the commentor gravatar and info-->
            <!--author avatar-->
            <br /><strong><a href="#"><!--author name--></a></strong><br /><!--date--> 
        </div>
        </li>

    </ol>
</div><!--comments-end-->

Step 8 – CSS For Comment Section

I am not going to show the single page structure here because it is actually similar to the index page. but I do showing you the comment section.

#comments {
	margin-top: 15px;
	float: left;
	width: 600px;
}

h3#comment-title {
	background: url(images/comments.png) no-repeat top left;
	width: 600px;
	float: left;
	text-indent: -9999em;
	padding-top: 5px;
}

#comments ol, #comments ol li {
	float: left;
	width: 600px;
	list-style: none;
	padding: 0;
}

#comments ol li .comment-data {
	float: left;
	width: 478px;
	margin-right: 10px;
	background-color: #d7d39a;
	padding: 5px 10px;
	min-height: 120px;
	_height: 120px; /* an IE6 hack */
	overflow: auto;
	border: 1px solid #c1bd85;

}

#comments ol li.alt .comment-data {
	float: left;
	width: 478px;
	margin-right: 10px;
	background-color: #eae8c6;
	padding: 5px 10px;
	min-height: 120px;
	border: 1px solid #c1bd85;
	_height: 120px; /* an IE6 hack */
	overflow: visible;
	margin-top: -1px;
	margin-bottom: -2px;
}

#comments ol li .comment-info {
	width: 90px;
	float: left;
	text-align: right;
	font-size: 10px;
	line-height: 12px;
}

#comments ol li .comment-info a img {
	border: 0;
	margin-bottom: 5px;
}

#comments ol li .comment-info a {
	text-decoration: none;
}

Download

Find out more in archives or subscribe rss feed for future updates.

Sponsor:

103 Comments | RSS 2.0 | Trackback Add comment
From old to new:
  1. illusiv July 15th, 2008
  2. degentd July 15th, 2008
  3. Steveorevo July 15th, 2008
  4. Michael July 15th, 2008
  5. Dan July 15th, 2008
  6. Ilu July 16th, 2008
  7. iCalvyn July 16th, 2008
  8. The Unknown One July 17th, 2008
  9. Danny Foo July 18th, 2008
  10. kailoon July 18th, 2008
  11. ashish choudhary July 22nd, 2008
  12. sos August 2nd, 2008
  13. kailoon August 2nd, 2008
  14. autoverleih August 20th, 2008
  15. myfr3ak August 23rd, 2008
  16. Omitade August 24th, 2008
  17. kailoon August 25th, 2008
  18. Dan September 10th, 2008
  19. myfr3ak September 23rd, 2008
  20. Vietnam Tours September 29th, 2008
  21. AnonymousCOWard September 29th, 2008
  22. Andrew January 10th, 2009
  23. MArie March 13th, 2009
  24. kailoon March 30th, 2009
  25. Mike May 2nd, 2009
  26. deerawan June 12th, 2009
  27. steve July 1st, 2009
  28. Quyen July 25th, 2009
  29. kailoon August 2nd, 2009
  30. eric August 2nd, 2009
  31. Albyz August 4th, 2009
  32. acidsneaker August 21st, 2009
  33. Stephen November 8th, 2009
  34. Ali December 28th, 2009
  35. K January 2nd, 2010
  36. BLKnight February 12th, 2010
  37. webspots February 13th, 2010
  38. Richard ( Newbi ) March 15th, 2010
  39. Rich Smith May 8th, 2010
  40. nkhat May 30th, 2010
  41. ServerSystem32 June 12th, 2010
  42. teknoloji haberleri July 11th, 2010
  43. Eyewebmaster August 30th, 2010
  44. Jeremy Jared September 8th, 2010
  45. harika September 21st, 2010
  46. izmir web design October 23rd, 2010
  47. Georgette Trentman October 25th, 2010
  48. Robert Kenedy November 12th, 2010
  49. Web Designer Weston November 29th, 2010
  50. Eddieboyph December 11th, 2010
  51. Jasmine December 24th, 2010
  52. zocX January 14th, 2011
  53. zhrech February 25th, 2011
  54. saians March 4th, 2011
  55. Apartmani Soko Banja June 14th, 2011
  56. Louis Vuitton September 24th, 2011
  57. vencanice nis November 10th, 2011
  58. new era fitted hats November 10th, 2011
  59. Elliot November 15th, 2011
  60. erh January 18th, 2012
  61. pepe April 27th, 2012
  62. my article express July 29th, 2012
  63. erelnet August 7th, 2012
  64. pdf November 19th, 2012
  65. Sherwood November 25th, 2012
  66. experienced May 18th, 2013