With the Head to Head post now at 17 pages strong on affiliates4u.com I’ve now had a few requests for it to be distributed publicly, so here it is.

What does it do?

1. Strips out any un-nesscissary php and database calls wherever possible.
2. Structures the theme in a semantic way using POSH
3. Resets the css using the Eric Meyers’ YUI stylesheet
4. Provides css hints for styling elements.
5. Seperates stylesheets into elements (type, comments etc…)
6. Provides a nicer default for comment and form styling (via a seperate stylesheet so you don’t have to use them)
7. Formats html in posts in a cleaner manner
8. Provides a paging system, independent of a plugin
9. Provides a better post excerpt that can be adjusted to suit any text length
10. Includes conditionals for IE6 and IE7 aswell as a default style for really old browsers
11. Includes a custom post image field for uploading and including post thumbnails. These image scale dynamically and can be adjusted easily from within the theme files. (You will need 777 permissons on the cache folder on your server for this to work)

What it doesn’t do

1. Style the theme in anyway, bar a few defaults
2. Include custom templates for different page layouts
3. Assume a beginners knowledge. Having some idea of how to use a wordpress theme is advised
4. Style widgets.
5. Work with pre 2.8.5 wordpress versions
6. Come with a users manual, though you can ask questions on this post if you wish

If you want a copy, it’s free to download here. Please note, I’ve made a few tweaks to it so there maybe a few bugs. If you come across one, please let me know.

P.S - You’re only allowed to use it if you say thank you ;)

Otherwise, Enjoy.

Thankfully, I’ve completed it and it is available to download here now. You can preview the theme here

Below are the instructions on how to install the theme to get the most out of it. Please let me know how you get on if you use it. I will be completing the tutorial next week that will walk through how I took the html mock up and made it into a wordpress theme.

Included in the zip file are all the original psd files so you can easily adapt the theme to suit you.

Install Instructions

1. Download and unzip the theme to your local themes folder
2. Open up header.php and set up the variables in the header to link to your website. This will link the stylesheets etc to the correct place
3. Change the page navigation (also in the header) to the appropriate pages on your site.
4. Add your twitter script to the footer.php just above the body. This theme works best with only one tweet displayed. Remember to remove the dummy text from sidebar.php
5. Upload to your themes folder on your website
6. Add the archives, category and blogroll widget to the sidebar using the widgets page. The theme is set up to take these three by default, if you add others you will need to style them in the style.css
7. Thats it, rock and roll

If you missed part one of this tutorial it is available here

The final layout for this part of the tutorial you can see here.

You can download the original files for this tutorial here if you wish.

You can also grab my base template here

Feel free to play around with all the files until your hearts content, that’s always a good way to learn and you can always grab a fresh copy and start over.

Marking up the template

Depending on the size of the project you could well choose just to code straight into a wordpress php theme. However its a good learning exercise, and good practice if you are doing something a bit different, to code into a static html page first and then split that page into separate php documents afterwards.

If you visit http://www.breakfast-epiphanies.com/basic_site/ and view the source you will see that I have laid out an extremely basic layout of elements with good semantic structure. This is the basic underpinning of every site and its a good idea to do this first.

Some people will write pure html first then css afterwards. Personally I’m more back and forth between the two but I find having a basic skeleton in html really helpful before doing any css.

As you can see we will be using ‘header 1 tags’ for the logo/blog title so this is high up in the document. We will be using an unordered list for the navigation as that is in essence what it is. (Same applies for the footer). We also have two sidebars floated next to each other in order of importance.

The wrapper holds all of the sites content and has an additional ID of top. This acts as an anchor and means we can skip back to the top of the document easily, helpful when you have a long page.

Lets go coding - html from the top down.

Although I just said I usually jump between css and html, for the purpose of this tutorial I’ll split the two apart as its a lot easier to explain that way. What I thought I would do is go through the html document in order from top to bottom picking out some of the elements and explaining my decisions.

O.K, head over to http://www.breakfast-epiphanies.com/layoutfiles/ and view source. Or download the tutorial files and open in your favourite editor.

1. Right after the <body> tag we have a skip link which will jump the user down to the main bulk of content on the site. This is particularly useful for mobile browsers where space is an issue. This link is then styled via css to appear hidden until in focus (hit that tab key) - note this doesn’t seem to work in Firefox 3. (Ammedned 10 July 08 - turns out I put it on a really silly number for z-index in the css and FF 3 didn’t like it.)

2. Next up we have the coffee cup icon. This is purely presentational and although I know many purists hate this kind of extra mark up, to me the web is a visual medium too and using something like this now and again I don’t think hurts anyone now does it?.

The reason it sits outside of the wrapper is because I want it sticking above everything else on its own z-index. As you will see later on, we need to declare the wrapper’s overflow state as hidden so IE won’t kill the site. If the coffee cup was within the wrapper it would cut the top off.

3. Below this the wrapper begins which will hold all the site’s content. As I said above it has an ID aswell for anchor tagging.

Then we have our logo. Here I have used a css image replacement technique to replace the text. This is useful because you can still retain your all important ‘header 1 tags’ in the html which are search engine’s bread and butter but you can now add your logo too. How cool is that.

I’ll go over how to css this in the next section.

4. Next we have the anchor for the skip link to move to. Ideally I would apply this to the first element in the main content.

In this instance though the first chunk of content would be ‘the_post’ which will be in the wordpress loop when we come to theme the template later on.By placing the link just before the loop it will move the page to the main content without getting involved in the loop.

5. The section ‘the_post’ is what will contain the bulk of the site content as this will be the main loop. This section has a class called ‘the_post’ applied to it.

I use a class because they can be re-used. I tend to use classes 99% of the time for this reason.In addition, I add an extra class of ‘even’ OR ‘odd’. This will give us added benefit if we wish to style alternate posts differently. Adding multiple classes allows us to overwrite bits of the parent classes while inheriting the remaining styles of the parent.

E.g - If the parent class has a margin of 10px and a border of 1px we could use the child class to remove the border but keep the margin by just declaring border:none; in the child class. This would remove the border but keep the margin as no new style for margin was applied.

Later on will we build a function into the worpress loop with a little php so we can add alternate odd and even child classes to each post but for now we will emulate how wordpress will display the code.

6. After the wordpress loop will come the endif statement. This is where the page navigation will be so we need to look at mocking that up in the template too.I used a similar technique to how we replaced the title text here using pure css to replace the text with images. Again I will cover this in the next section.

7. The first sidebar is floated to the right of the main content. Some of the content is styled in a conventional manner as we will be coding this into the side bar but I have also emulated how wordpress displays widgets using an extra wrapping ‘li’ for some reason. If we were not using widgets you could style this in a conventional manner using ‘ul’ tags.

You will notice at the top of the side bar we have a ‘div’ with a title ‘optimised’. This displays a little image that tells the user that their browser is fairly new and as a result will display the site as it was meant to be seen. By using attribute selectors via css we can hide the image and display the text for IE6 and older browsers as they do not support the attribute class. Again I will cover this in the next section

8. Next to the first sidebar is the second sidebar which has much the same styles as the first. I tend to use this sidebar for banners etc…

9. Lastly we have a simple footer which will provide our legal info and credits and will also clear the floating coloums above it.

Lets go coding - the power of css.

In this section I will cover a few of the css features I have used to make this site. I won’t be covering things like basic layout properties, text size etc… If you want to know all this please pick through the source code. Its all commented to help you.

Achieving Semi Fluid Layout - Because we want our wrapper to fold the sidebars underneath each other if the browser is at a smaller resolution we need to use percentages. Here’s what I did to achieve this effect:

width:auto !important;
width:100%;
position:relative;
 overflow:hidden;

The width is set to auto!important and 100% in two different decelerations. This fixes Firefox’s bug that sometimes messes up a 100% width layout.

The overflow is set to hidden so IE doesn’t add horizontal scroll bars.

Position relative is used as a fail safe for IE6 as this can sometimes sort out hasLayout problems (more on that later). You don’t necessarily have to add this.

Css Image Replacement - This is a great technique for getting the best of both worlds, search engine friendly text content and visually appealing images.
This example below is how I have styled the page navigation, a similar technique is also used to style the logo. Here’s what I did to achieve this effect:

div.page_buttons {
margin:0;
padding:58px 0 0 15px;
width:570px;
height:80px;
background:transparent;
 }

/*Trade text for buttons*/
div.page_buttons a.next {
margin:0;
padding:0;
display:block;
float:left;
width:51px;
height:51px;
text-indent:-99999px;
background:url(../images/page-navigation-buttons.png) transparent no-repeat 0 0;
 }

The div class ‘page_buttons’ is the holder that will hold all there of our navigation buttons. The background is transparent as we will need there to be no background or we won’t get the proper effect.

Then we style the a links using a class defined in each link. E.G ( a.next) – In the html it looks like a class=”next”

By using display:block we can give an element width and height properties and by floating it left we can make them sit next to each other.

Text indent is used to push the text that the image is replacing off the page so it is no longer visible.

Finally we define the image path, its background colour, its repeating property and its background position.

In this case it is set to no-repeat transparent and we be possitioned top left (or 0 0) in the 51px x 51px area we have created.

Attribute Selectors - These are great for adding additional styles but in this site I have used them to create a little badge letting the user know if their browser is up to date.

Here’s how:

I created a ‘div’ element with the title ‘optimisesd’.

Attributes can use most things but I prefer to use title where I can.Within that ‘div’ I create a paragraph style with the class ‘alert’.

Then in the css we do this:

div[title=”optimised”] {
width:245px;
height:81px;
background:url(../images/optimised-badge.jpg) transparent no-repeat 0 0;
display:block;
text-indent:-99999px;
margin:0 0 15px 0;
padding:0 0 15px 0; /*Pad down the border bottom*/
border-bottom:1px dotted #1b0f05;
 }

/*Styles the alert text in ie6*/
*html .alert {
background:#fff;
padding:5px;
 }

div[title=”optimised”] is the attribute seclector.
Within this we define the width, height etc… as well as using text indent as before to replace the text with an image.

Next we style the text that older browsers will see using the ‘*html .alert class’. We use the *html hack so that IE6 will pick it up but IE7, FF, Safari etc.. will not.

:After Class for Firefox - If you are using Firefox you may have noticed the little pencil icons on the headers in the sidebar. These are added using the :after class, which at the time of writing are only supported in Firefox (as far a I know).

I quite like this technique to add little visual additions without weighing down the code too much.

Here’s how

h2.widgettitle:after {
content:url(“../images/pencil-icon.png”);
margin:-35px 0 0 210px;
position:absolute;
z-index:10;
padding:0;
width:33px;
height:34px;
display:block;
 }

We again use display:block so we can apply width and height.

By using the content deceleration we can apply an image to the :after class.

By using position:absolute we can pull the element around independent of the hierarchy. This means we can use positive and negative margins to position it where we want it.

Multiple Classes - We can use multiple classes to overide certain parts of a class while inheriting others as discussed above.

div.the_sidebar {
margin:0 20px 0 0;
padding:0;
float:left;
width:245px;
 }

div.last {
margin:0;
padding:5px 0 0 0;/*Pad down abit so everything lines up*/
 }

As you can see the sidebar has margin properties, float, padding and width properties applied.

We want our last sidebar to share the float and width properties but not the margin or padding properties so we define new ones. Then we create multiple classes in the html like so:

div class=”sidebar last”

hasLayout and other IE tricks

“A lot of Internet Explorer’s rendering inconsistencies can be fixed by giving an element ‘layout.’”.

In brief IE6 does not give layout properties to all elements and this is what often breaks sites in Internet Explorer.

By giving an element ‘layout’ we can often fix many problems associated with the browser.

A detailed explanation is available here http://www.satzansatz.de/cssd/onhavinglayout.html.

My personal way of dealing with this is to give hasLayout to an element by using zoom:1. There are several other ways, each with pros and cons but this is my method of choice (even if I have to sacrifice validation in IE6)

Other Tricks for IE

overflow: hidden; - Its amazing how often this will sort out all sorts of things, even if logically it shouldn’t

word-wrap:break-word; - This allows wordpress to break words apart rather than poking out of a containing div.

position:absolute; - If an element is missing this 9 times out of 10 will bring it back into play

display:inline; - If you seem to have double margins this will sort that out

*html ‘your class or ID’ - IE 6 and below hack to target older browsers

html > body ‘your class or ID’ - Target newer browsers with this to bypass IE6 and below

So that just about wraps up part two. As usual, any questions please add them below. Until part three….

Yes it’s true wordpress has some limitations, but on the whole its a great tool that’s simple to use and you can still be really creative with it.

In the first part of this series of tutorials I’ll be looking at how to structure your design composition in a way that makes it easier to code into xhtml/css.

I’ll also look at basic semantic mark-up and using css to degrade your site nicely into older browsers.

The final layout for this part of the tutorial is viewable here.

Later on we will split this design up and turn it into a wordpress theme.

First Things First…

Credit where its due. A few of the techniques I employ in my site design have been taken from Jon Hicks and in particular his talk at FOWD which you can view here.

The final layout for this part of the tutorial you can see here.

You can download the original files for this tutorial here if you wish.

You can also grab my base template (which we will cover using in the next paragraph) here

Feel free to play around with all the files ‘til your hearts content, that’s always a good way to learn and you can always grab a fresh copy and start over.

Setting up a template system makes your life easy

First thing I do is make a copy of my base template (which has several folders, one for images, one for css, one for javascript, one for library (which will hold any extra scripts like jquery plugins etc…), a dev folder for all photoshop files etc.. and an index.html page + several stylesheets, all of which contain helpful snippets and basic markup) and rename the parent folder to the project name

You can download my base template here if you wish.

Now we are ready to begin

Design First Steps - Basic Layout & Structure

When you design your site, in whichever graphics program you use, ultimately you’ll make most of your decisions on layout at this stage.

Each project requires it’s own decisions to be made on where the navigation goes, how many sidebars you have, if its fixed or fluid width etc… ultimately it depends on what you are aiming for.

I’m not going to cover ‘how to design a website’ as everyone has their own style. What I will say is useful however is to write down your hex colour codes and column widths (either in a comment portion in you css file or on actual paper). These come in really handy later on. If you’re like me and sometimes you just can’t get colours gelling, http://kuler.adobe.com/ is great for a helping hand.

Once I have the design down, I have sliced out the images to my images folder and written down my hex codes and column widths, I start marking up the comp with really basic structure as follows (I actually print it out and write on it but for the purposes of this tutorial I’ve done it in photoshop).

This provides me with a quick idea of how I’m going to mark up the site as well as giving me a visual flow to follow.

Now the more observant among you will notice that the site doesn’t look exactly like that. This is because when it came to marking up the site into xhtml later on I made a two decisions.

1. I wanted the navigation higher up in the html as in this design it was in the sidebar and as a result, half way down in the mark up which is not great for site structure. I could have solved this by floating it next to the logo at the top of the page but…

2. I added the second sidebar which made me want the site to fold together if it was viewed in a smaller resolution. As a result I wanted the navigation to be high up in the document, even if the site was viewed at a really small resolution. Having it floated next to the logo would make it fold underneath but retain its small width which wasn’t ideal.

I always think its worth following your gut on these things and not sticking so rigidly to your comp. I feel the site is better for the slight changes I made to the layout and if it hadn’t worked I could have always fallen back on my initial idea.

Getting into the code - Setting up your style sheets for the best cross browser performance

I’ve used Jon’s method for this as I find it really robust.

What we have in the <head> portion of the page is one linked, one imported, one print and two IE specific stylesheet.

1. The basic stylesheet

This is linked into the document using <link href>

As older browsers don’t understand @import this is the stylesheet those browsers will find. All this stylesheet does is style the page in a simple way and let the user know politely that their browser is a bit old now.

2. The main stylesheet

This is brought into the document using @import"css/style.css"/**/;

The /**/; at the end bypasses IE browsers older than IE6 as they don’t understand it, which means anything older than IE6 will be passed the basic stylesheet.

The main stylesheet also has two @imports for typography and a reset stylesheet.

The reset stylesheet resets browsers to their default styling and then adds some sensible defaults.

The typography stylesheet controls the basic type styles for the site.

3. IE 7 only stylesheet which holds all the styles for that browser.

In this stylesheet I also use @import to import the IE6 stylesheet as IE7 shares a lot of the same problems as IE6 and its a bit daft to write them out twice. If an IE7 element needs styling differently from both the main stylesheet and the IE6 stylesheet, this is where we put those styles.

Below is an example of what I mean.

4. IE6 only stylesheet which holds styles for IE6.

This stylesheet holds all the styles for IE6. Where I don’t want an element to be shared with the IE7 stylesheet I use the *html hack (see example below). This way IE6 can share elements with IE7 and also have styles just for itself.

Phew, that was fairly intense!…

Getting into the code - Basic layout mark-up

Once we have our template set up and images ready to go all that’s left is to start marking up. I’ll go much further into this in my next tutorial but lets get the basic principles down now. (Note that this is my way of doing it, you might have a different approach and that’s cool. If you find this way helpful in any way then great).

Use classes for most layout elements. This not only means you can re-use certain elements throughout the page, but you can build up multiple classes on certain elements to vary styling. I only use ID’s when dealing with javascript, anchors or flash content.

Use a wrapper to contain the site. This gives you greater control of where and how the whole site is positioned. This way if you decide you want to move it all to center alignment for example you can very easily.

Use <h1> for you blog title/logo and all your blog post titles. These tags are really important for SEO so this just makes sense.

Use lists for lists & paragraphs for paragraphs. Semantically its correct and it helps you identify what’s what quickly.

Ban the <br/>. I’m not talking in posts but in layouts. You can break things apart using margins and padding in css.

Cut down on images in the html layout. If you can use background images or replace text with images via css (i.e for the logo, buttons etc…) then do. A good marker is, if you can switch off your stylesheet and see a nicely structured text document with few layout related images, your on the right lines.

That about wraps it up for part one. In the second tutorial I will look at building the site in more detail and cover some css techniques for taking the design to the next level.