Latest News
Designing A Wordpress Theme From Scratch (Part Two)
Before we start, a bit of housekeeping
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….
What to do with Shopping Search?
We have a large number of domains that are lying around for want of a better phrase ripe and ready for development.
One such domain being Shopping Search - As you can see its a relic from 2003 however with some development time we could make it special.
The big question… What on earth do we do with it?
Here are some initial thoughts off the top of my head:
- Use the ShopWindow API to create a CPA based price comparison site
- Use a white label or XML feed from Pricerunner
- Create a mash-up with various XML / API feeds
- A social Shopping Search Site
- A rough and ready Blog
Answers on a postcard or comment!
Hello world of affiliate marketing…….
Give me something to write about and I’ll write about it but I need to introduce myself to everyone and I can’t think of anything…. Well Hi everyone for starters! I’m the new girl at Existem. You won’t (hopefully!) be forgetting my name any time soon as I am also Claire!
I have been here now for just over 3 weeks and have never enjoyed a job more. It’s probably something to do with the fact that this is something that I’ve always wanted to do and now I’m doing it. Yay.
I am working alongside Claire 1 helping to organise the a4uexpo in October amongst lots of other things. I’m still getting use to everything as there is so much to learn but loving every minute of it.
Hope to meet you all at the a4uexpo in October.
All that lovely PR from Tech Track 100, Nominations Open
Reading the Sunday Times at the weekend, the TechTrack 100 (note someone didn’t plan their URL structure!) is upon us once more. Whilst I’d love to eneter existem, we don’t just yet have the required £5m turnover to qualify for entry.
Anyone that does meet the below entry criteria shold certainly nominate themselves, all that great PR!
Here are the guidelines:
- Independent tech* company
- UK registered, unquoted, and not subsidiaries
- Sales of at least £250,000 in the base year (2004 or 2005)
- Sales of at least £5m in the latest year (2007 or 2008)
- Year-on-year sales growth in the latest year from 2006 to 2007, or 2007 to 2008, plus forecast (or actual) sales growth
- Excluded companies include computer resellers, and those with accounts qualified as “going concern”
*The definition of a technology company is based on the London Stock Exchange’s techMARK definition, i.e. “a company whose business growth and success is dependent on the development of one or more technologies, and has evidence of technological innovation with regards to a product or service.”
Last year industry inclusions of note were Affiliate Window (35), buy.at (9), Cashcade (49) and Traffic Broker (16)
Designing a wordpress theme from scratch (Part One)
Designing for wordpress isn’t really all that different from designing any other website, yet it seems to be that its not something that gets approached as creatively, or is given as much thought as traditional web design.
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.
iPhone, opening up opportunities for affiliates
The new 3G iPhone has convinced me to make the move to O2 from Vodafone and ditch my trusty Blackberry 8310* on 11th July 2008 - if I can get one that is! (Mr Maher are you reading this hint, hint!)
Seriously though the new iPhone really is going to open up a whole array of opportunities for savvy developers and affiliates through apple web applications and new features such as their geo photo tagging. Other mobile phone operators have similar developments, and further simplification and price reductions on mobile browsing and a greater number of models utilising WiFi will enhance the opportunity even further.
I know we’ve all said Mobile is going to happen in the affiliate space for some time, so embrace it now as I have a feeling one day quite soon its just going to knock on our door and we’ll no doubt all be surprised!
Rubbish me if you like, but its already happening on a browser level and web applications will give developers even more control and user loyalty.
Anyhow, back to the Blackberry, anyone thinking about making the switch? My only concern is email, something the Blackberry is awesome with.
<plug>* as a side note I’ll be passing on my 8310 to Mobile Phone Xchange, who will send me a not too petty £31 for it to be ‘recycled’
The affiliate programme is managed by our friends at Existem Affiliate Management - chat to Mark for more details as you can earn around £4.00 per lead. </plug>
