Jan
How To Create A WordPress Theme - Part 2
by admin
This is the second part of how to create a WordPress theme. In the last part How To Create A WordPress Theme - Part 1, you brainstormed and created a layout in your graphics program. In this part I shall show you how to convert the PhotoShop image into a working web page. All pixel measurements in the style sheet have been taken from the image.
Requirements
Like the last series, all the work will be done locally. I am using WOS for this series so that it can be developed on a flash memory stick anywhere there’s a PC that has either WinXP or Vista. You can use Xxamp or any other local web server but the file locations will be slightly different.
You will need a graphics application, I use PhotoShop CS2 but you can use either the Gimp, PaintShop Pro or any other that supports layers. So that you can follow along with the tutorial you can download the PhotoShop file of the theme here.
You will need something to create the html and CSS. I use html-kit for this series as it is free for you to download, but any editor that allows you to see the code is usable. In real life I use HomeSite. Do not use a visual editor as they either introduce extra code or change your code.
Theme Setup
You need a place to store and test your theme. So the first step is to create a folder for the theme, this will be located at:
FLASHSTICK:\www\wordpress\wp-content\themes\
At that location create a folder named mytheme. Inside that create another folder named images, as the name suggests it will hold any images we shall use for the theme. The path should look like:
FLASHSTICK:\www\wordpress\wp-content\themes\mytheme\images\
Startup HTML-kit and from the menu select Workspace > Add Folder / FTP Server > Add Local / Network Folder. The Add Folder Dialog will show, for the Folder Path select the mytheme folder, for the Display Name type in MyTheme. Press OK. This gives you direct access to the theme’s folder.
For this series I have created a basic layout in PhotoShop, the download is at the end of the post. In the download you will find the layered PhotoShop file and the separate graphics that go into the theme’s image folder. This example theme is 800 pixels wide and centered in the browser window.
Because of the length of this post, I have created a pdf version (14 pages!) it includes an additional image that shows the layout of all the divs used in this theme.
Turning the image into a WordPress theme is a two step process. The first step is to turn the image into a regular web page. The second step is "cut up" the web page into individual parts as the theme dictates. Once you have had some experience in creating themes you can go directly from image to theme.
Create The WebPage
First step is to copy the graphics into the imagefolder.
Back in HTML-kit create a new file (File > New Document) and save it as index.htm. The very first line tells the browser what type of document this is and what language it is written in. HTML-kit, by default uses html 4.01. This is an older standard, WordPress uses a more recent standard xhtml 1.0. So there are some things to be changed in index.htm to reflect this.
- Replace the DOCTYPE line with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - Replace line 3 with:
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> - Replace line 4 with:
<head profile="http://gmpg.org/xfn/11"> - With the cursor at the end of line, press the enter key and on line 5 add:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
There is another file needed, the style sheet, from the menu select File > New and the Template window appears. Click on the Style Sheets tab and double-click on Blank Style Sheet. Save this file as style.css.
This file needs to be linked to the index.htm so that the styles work on the page. To do this place the cursor at the end of line 5, in index.htm, and press Enter. Click on the TMCSS tab and click the drop down on the first icon from the left, then select the second option. A line of code appears, you have to fill in two items. The first is where the cursor is, just type in the word screen. The second one is between the quotes after href where you type in style.css. Finally save the file.
When I start creating a web page there are some things I setup in the style sheet before anything else because different browsers render the code differently. This is mostly the margin and padding, I also setup the basic foreground and background colors and what font is used. So, in the style.css enter:
/*TAGS */
div {
margin: 0px;
padding: 0px;
border: none;
}
img {
border: none;
margin: 0px;
}
body {
margin: 0px;
padding: 0px;
color: #000;
font: .9em Arial, Helvetica, sans-serif;
background: #e8e8e8;
}
The best way to build a web page by working down from the top of the page. If you look at the page layout above, you will see that there is a top bar that runs across the whole width of the browser window. Adding this is easy all you need to do is change the background in the body style like this:
background: #e8e8e8 url(images/topbar.jpg) repeat-x top;
The topbar.jpg image is only 10 pixels wide but the repeat-x copies the image all the way across the browser window.
From here on, anything you add to index.htm must be in between the <body> and </body> tags in order for it to show in the browser.
As I mentioned earlier, the active part of the page is centered on the page and is 800px wide. So before adding anything else you should add this container div, in index.htm add:
<div id="container">
</div>
Then in style.css add:
/* PAGE LAYOUT */
#container {
width: 800px;
margin: 0px auto;
}
The first line is a comment,the other line you may not understand is the margin. Margin is one of those styles that can have between one and four parameters as follows:
margin: 10px - This means that the margin is 10pixels on the top, right, bottom and left sides.
margin: 10px 20px - this means that the top and bottom margin is 10pixels and left and right margins are 20pixels.
margin: 10px 20px 30px 40px - Each edge has a different value in the order of top, right, bottom and left. An easy way to remember the order is the word trouble - TRouBLe.
So the line margin: 0px auto; means that the top and bottom margin is zero pixels and the left and right margins are auto. What is auto? Auto will measure the amount of space on either side of the div add them together and then divide the total by two. In effect this makes the margins equal and thus centers the div in the browser window.
The Header
The first element inside the container is the header, create this by adding the following to index.htm:
<div id="header">
</div>
And in style.css add this right after the #container style:
#header {
height: 125px;
}
Starting at the top of the header, there is the "subscribe to rss" text and image, add this inside the header div:
<a class="subrss" href="#"><img src="images/toprss.jpg" alt="subscribe to rss" /></a>
<a class="subrss" href="#">Subscribe To This Blog</a>
This is quite straight forward, both the image and text are inside link tags. I have used a # for the href in the links as it is valid and we don’t need to know the URLs at the moment. In the style sheet add:
/*HEADER */
#header a.subrss {
margin: 0px 5px 0px 0px;
padding: 0px;
font-size: 2em;
font-family: Arial, sans-serif;
color: #fff;
float: right;
text-decoration: none;
}
This floats both of them to the right and sets the font, color and size of the text.
The next thing in the header is the navigation bar. Because I or even you don’t yet know what size the buttons will be, I shall use a similar technique to that used at AListApart in the Sliding Doors of CSS article.
Because we have a list of links it is natural to use the unordered list tag <ul> to contain them. This gives two tags the list item and the anchor, to hold the two parts of the button. Again, for now the href’s in the links will have a # as a placeholder. The following code is added inside the header right after the previous code:
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">SiteMap</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
The list has been put in side the nav div so that it can be moved to the correct position vertically. Then in style.css add:
/* NAVIGATION */
#nav {
position: absolute;
top: 40px;
width: 720px;
font-size: .8em;
line-height: normal;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav li {
float: left;
background: url(images/navr.jpg) no-repeat bottom right;
margin: 0px;
padding: 0px;
margin-right: 5px;
}
#nav a {
float: left;
display: block;
background: url(images/navl.jpg) no-repeat bottom left;
padding:4px 10px;
color: #fff;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
}
#nav a:hover {
color: #000;
}
There are a couple of new properties here, list-style: none; will remove the bullet points from a list. text-transform: uppercase; will change text to all uppercase. I have also added a hover effect, so that when you move the mouse over a button the text changes from white to black.
The last thing in the header is the blog title, this is an image and it is wrapped in a link. When this page is converted for the blog layout the link will point to the homepage, for now it is once again a #. This is added right after the nav div:
<div id="title"><a href="#"><img src="images/title.jpg" alt="My blog
name" /></a></div>
Here the link and image are inside a title div so that it can be moved to the correct vertical position. The css is:
#title {
position: absolute;
top: 65px;
height: 58px;
}
That’s the header section finished. The image is 677 x 58 pixels if you want to replace it. If you haven’t already, save and preview in your browser. It should look like the image to the above.
Middle Section
This is perhaps the most complex part of the design, not that it is that difficult to understand. It contains both the content and the sidebar. Normally this would consist of a content div and sidebar div inside the wrap div, and this would work for the current fixed-width layout. If you changed the width of the container div to 100% this would mean that the content div could be any width and the sidebar might drop down below the content div.
This is often seen when an image that is wider than the content div is added. To counteract this I have put the content div inside a wrapper div and used a negative margin on it. This means if you want a full browser-width layout all you have to do is change the container width to 100%.
The sidebar is currently 210 pixels wide, this is wide enough for most things you may want to put in it. If you want to put two 125 ads in next to each other you will need to make it wider and change the margins on the wrapper and content divs. There is a 15 (225 - 210) pixel space between the content and sidebar so they are not visually pushed together.
The wrap div is there in case you want the sidebar to have a different colored background.
Now let’s add the code:
<div id="wrap">
<div id="wrapper">
<div id="content">
<h2>Post Title</h2>
</div>
</div>
<div id="sidebar">
<p>rSidebar</p>
</div>
<div style="clear: both; height: 0px;"> </div>
</div>
And here is the css, add it directly after the #header style:
#wrapper {
width: 100%;
float: left;
margin-right: -225px;
background: #ffc; /* To be removed */
}
#content {
margin-right: 225px;
background: #fcc; /* To be removed */
}
#rsidebar {
width: 210px;
float: right;
background: #ccf; /* To be removed */
}
I have given them all background colors only so that you can see where they are. If you do not plan on changing the widths you can delete all three indicated lines right now. Note that the margin for the wrapper div is negative.
The Content
You shall now create an example post. This consists of four parts:
- The Post Title - This is enclosed within a h2 tag which is also a link.
- PostMetaData - This is the Category, Date and Author info.
- Body Text - This is the actual text of the post.
- PostMetaData - Thi time it is the Tags and Comment count.
Inside the content div replace the h2 line with:
<h2><a href="#">This Is A Post Title</a></h2>
<div class="post">
<div class="postmetadata">By: Admin | Date: 25/01/08 | Category: General</div>
<p>This is just some random text to show you what a post would look like. If
you do not like it, then change it to what you want.</p>
<p>This is just some random text to show you what a post would look like. If
you do not like it, then change it to what you want.</p>
<div class="postmetadata">TAGS: this, that, and the other<br />
Comments: 3</div>
</div>
If you want you can duplicate the above html to show what multiple posts would look like. Now to style it add this:
h2.entry-title {
margin: 0px;
padding: 0px;
font-size: 1.5em;
font-family: Arial, sans-serif;
}
h2.entry-title a {
text-decoration: none;
color: #000;
}
.post {
background: #fff;
padding: 2px 10px;
border: 1px solid #d0d0d0;
margin-bottom: .75em;
}
.postmetadata {
font-size: .6em;
}
The SideBar
In WordPress the sidebar is a list of plugins and each plugin is either a list or inside a list. So I have created the equivalent code for this example to make the conversion easier. Usually the title of a plugin is in a h2 header tag, while this makes styling easy it is not good for SEO purposes. It attracts the Search Engines too much and gives the plugins a lot of importance equal to the posts. So what I have done here is use the paragraph tag (<p>) instead.
Within the sidebar area I have implemented two sub-sidebars, one on top of the other, so that if you want to use both plugins and widgets you can. Here’s the html:
<div class="sidebar" id="sbtop">
<ul>
<li><p class="sbheader">One</p>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</li>
<li><p class="sbheader">Two</p>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</li>
</ul>
</div>
<div class="sidebar" id="sbbot">
<ul>
<li><p class="sbheader">Three</p>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</li>
<li><p class="sbheader">Four</p>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</li>
</ul>
</div>
And as usual you add the css to style it next. I would suggest here that you type in one style at a time and preview in browser. That way you can see the effect that each style has. Here is the full code for the sider styles:
/* SIDEBAR */
#rsidebar .sidebar ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#rsidebar .sidebar ul li {
background: #fff;
border: 1px solid #d0d0d0;
padding: 7px;
margin-bottom: 5px;
}
#rsidebar .sidebar ul li li {
border: none;
padding: 0px;
margin: 0px;
}
#rsidebar p.sbheader {
background: #d0d0d0;
color: #333;
margin: 0px;
padding: 3px 0px;
text-align: center;
font-weight: bold;
}
That’s all for now for this section.
The Footer
We come to the last section, the footer. I have divided the footer into three vertical sections, each section being a "mini" sidebar so that each one can hold either a plugin or a widget. The height of the footer is fixed, if any of the output from the widgets or plugins is more, then a scrollbar will appear so that you can view it.
First, you add the footer code to the index.htm:
<div id="footer">
<div class="fmodule" id="sbleft">
</div>
<div class="fmodule" id="sbmiddle">
</div>
<div class="fmodule" id="sbright">
</div>
</div>
And the css is:
/* FOOTER */
#footer {
height: 179px;
background: url(images/footerbg.jpg) repeat-x bottom;
}
.fmodule {
float: left;
width: 264px;
height: 177px;
}
Save and preview in the browser. You should see a problem straightaway! Compare it to what it should be. The footer graphics should fill the width of the browser window and not just within the container div. To remedy this you need to add another div that wraps around the container div. To do this, right after the <body> tag and before any other tag add:
<div id="wrapall">
Then right before the </body> tag and after any other tags add:
</div>
Finally change the css as follows:
#wrapall {
background: url(images/footerbg.jpg) repeat-x bottom;
}
#footer {
height: 179px;
}
.fmodule {
float: left;
width: 264px;
height: 177px;
}
If you preview in browser, you will see that the footer graphics fill the full width of the browser. The next thing to do is add some code to display a plugin in each of the fmodule div’s as follows:
<ul>
<li><p class="ftitle">Recent Posts</p>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</li>
</ul>
I changed the ftitles to "Recent Posts", "Recent Comments" and "Popular Posts" for variety. You can add the css next:
.fmodule ul {
list-style: none;
margin: 0px;
padding: 0px;
}
.fmodule .ftitle {
width: 264px;
height: 29px;
margin: 0px;
padding: 0px;
color: #fff;
text-align: center;
font-size: 1.5em;
border-left: 1px solid #f4ce6e;
border-right: 1px solid #df5128;
}
.fmodule ul ul {
height: 140px;
margin: 0px;
padding: 5px; 5px; 0px; 5px;
border-left: 1px solid #dfdfdf;
border-right: 1px solid #898989;
overflow: auto;
}
Once again, you should be able to follow most of this by now with the exception of the overflow: auto;. This means that if the contents of a div is greater than the size of the div than add scrollbars as needed. I have also added border coloring so that when there are no scrollbars the plugin/widget area is defined.
The page is now finished and it should look like the preview. If it doesn’t, the usual problem is a missing semi-colon or curly bracket in the style sheet. You can download all the files:
- Original PhotoShop layered file.
- All graphics that go in the images folder
- index.htm
- style.css
I have compressed them into a zip file. Right click and download the file to your desktop and unzip it there.
The next post in this series of how to create a WordPress theme will start the process of cutting up the index.htm into the needed php files. If you have any questions leave a comment here.
Tags: css, html, page layout, photoshop, seo, wordpress, wordpress theme
Category wordpress |
Print This Post
|
I have been going through this process lately. This seems to be a good guide and I am sure I can pick 1 or 2 things up for a later design. In my spot right now it comes just 1 month too late
How To Create A WordPress Theme - Part 2…
This is the latest in my WordPress Series dealing with how to create a WordPress theme. In previous part I discussed why you should have a unique theme and various methodologies on how to come up with your theme. Converting the design into a theme is a…
[…] « How To Create A WordPress Theme - Part 2 31 […]
Thanks Colin for these Tutorials. I was thinking about starting to create a few worpress themes but was not sure where to begin. These will come in very handy.
@sven: That happens to me too
@Mike: I’m glad you are finding them useful. Be sure to read the first in the series:
How To Create A WordPress Theme - Part 1
Great series of posts! I’d love to tackle the task of designing my own theme, but so far I’ve only modified other themes. Keep up the good work, I’m looking forward to more content like this.
@Mark: thx
Next one should be up tomorrow.
[…] this part we shall be converting the index.htm file, that was created in How To Create A Wordpress Theme - Part 2, into a Wordpress compatible file. This involves adding a number of PHP functions and adding a file […]
I tried to download the file, but it comes up empty. Is it still available? Thanks for the great series!
@Cecile: My bad, sorry, it’s fixed now.
[…] How To Create A WordPress Theme - Part 2 - 960 […]
Hi Colin, I’m sorry to ask this (I’m a bit slow), where is the TMCSS tab located? Thanks.
@Mohamad: It’s on the row of tabs in HTML-kit only if you have installed the CSS plugin.
Oh, I see. I didn’t install it. I’ll find it, thanks.
It would be great if you could have a list all the parts of the lesson at the bottom of every part.
@John: It is planned for, when I upgrade the theme soon.