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

103 Comments | RSS 2.0 | Trackback Add comment
From old to new:
  1. pdf November 19th, 2012
  2. Sherwood November 25th, 2012
  3. experienced May 18th, 2013
Nucleo, Customizable Vector Icons