Dissection of a WordPress theme: Part 2

Flexible wrapping

Currently we have a fluid design, with the contents and sidebar bundled together in a wrapper. This wrapper gives us a lot of flexibility and we can now change from a fluid layout to a fixed layout by modifying one style.

Option Option 1 – Fixed layout
This is the simplest layout and the one used by most blogs. A fixed layout has many advantages:

  • Most like a newspaper or book
  • Reasonably confident that the layout will look the same on any screen
  • No nasty browser issues

Here is the style:

#wrapper {
  width: 700px;
  margin: 0 auto;
  overflow: hidden;
}

A width of 700 pixels was chosen because the accepted minimum screen resolution is 800×600. Most fixed themes cater for this size screen, and we have 100 pixels of extra space.

Let’s look at the margin:

margin: 0 auto;

A two value margin definition means the first value is for the top and bottom (0 in this case) and the second is the left and right margin – here we have ‘auto’, which tells the browser to choose an automatic value. This has the effect of placing the element in the centre of the screen.

Setting overflow here uses an obscure CSS rule to force the height of the wrapper container to the height of the tallest element. This way the footer will always be underneath the tallest element, regardless of whether it is the sidebar or the content. A value of hidden ensures we don’t run into a bug on the Mac Internet Explorer.

A look at the theme in both Firefox and Internet Explorer shows we have a good match.

Firefox preview

Firefox

IE preview

Internet Explorer

The theme fits into an 800×600 screen, and is not affected by different resolutions. It is simple to change the ratio of content to sidebar by changing the percentages in the relevant styles. Our first design is finalised.

Option Option 2 – Adding some fluidity
The majority of blogs use a fixed layout so it would be nice to do something a little different. We want the content to be fairly constrained, but that doesn’t mean it has to be completely fixed – we can make it a little fluid. Fortunately our theme and the new wrapper element provide us the means to do this with little effort.

Change the wrapper style to:

#wrapper {
  width: 85%;
  margin: 0 auto;
}

Now our content and sidebar take up 85% of the available width. If the user has an 800×600 pixel screen then it fits nicely, but it will expand for a larger screen. The value 85% was chosen because it looked nice. Sometimes the simplest reasons are best!

One thing you should do when creating a theme is to check how it looks on different browsers, and at different sizes. This last point is important as certain browsers are notorious for doing strange things, and especially when viewed under 800 pixels. Let’s look at our new fluid theme when viewed at 400 pixels:

Firefox preview

Firefox

IE preview

Internet Explorer

Firefox has behaved very well, but Internet Explorer has done something odd – the sidebar element has dropped underneath the content.

Although not ideal, this is not unacceptable behaviour. Internet Explorer has discreetly pushed the sidebar out of the way. A lot of websites exhibit this behaviour and you may accept this as a compromise to having fluidity.

Is there anything that can be done about it? Well, yes. Kind of.

Option Option 3 – Fluidity without the breakdown
Here we make use of some pretty complicated CSS code that enables us to stop Internet Explorer pushing the sidebar away, and also causes Firefox to react better at smaller widths. To do this we employ the CSS concept of minimum width. As you would expect this allows us to define a minimum width for an element. When the browser goes below this width it stops sizing the element and puts scrollbars on the window. This is completely acceptable.

There is one catch to this wonderful concept: Internet Explorer does not support minimum widths. Fortunately we can work around this by using dynamic properties. This is a way to embed JavaScript within the CSS. Not particularly pleasant, and it requires JavaScript to be enabled.

Our aim is to introduce some styles such that:

  • Minimum width supporting browsers have a fluid layout and a fixed minimum
  • Internet Explorer has a fluid layout and fixed minimum when JavaScript is enabled
  • Internet Explorer has a fixed layout when JavaScript is not enabled

We can achieve all of this neatly by changing the wrapper style:

#wrapper {
  margin: 0 auto;
  width: 700px;
  width: expression(document.body.clientWidth < 605 ? "600px" : "85%" );
}

div>#wrapper {
  margin: 0 auto;
  min-width: 400px;
  width: 85%;
}

Let’s break this down. We already know what the auto margin does. After this we have the width defined twice:

width: 700px;
width: expression(document.body.clientWidth < 605 ? "600px" : "85%" );

Remember that CSS allows us to define properties many times, with the most relevant taking precedence. The first width provides a fixed size for all browsers; this is the default catch-all case.

Next is the IE-only dynamic expression. Other browsers will ignore this line, but a JavaScript-enabled Internet Explorer will pay attention and override the previous width. The expression simply states that if the document width goes below 605 pixels then change it to 600 pixels (our minimum width), otherwise set it to 85% (our fluidity). We need to test for 605 pixels instead of 600 to prevent JavaScript getting into a loop and crashing the browser. Users do not like that.

Finally we have defined a new style that uses CSS child selectors. A child selector gives us the ability to define a style for an element within a context. That is, the style only applies to the element when it is part of a certain hierarchy. In the above style we have:

div>#wrapper

This translates into:

  • This style applies for #wrapper but only when it is a child (>) of a div

Although it hasn’t been pointed out yet, header.php defines the div ‘page’ which contains everything, including our ‘wrapper’ element – hence wrapper is a child of a div.

Why make a new style using a child selector? This is the clever bit. Internet Explorer does not support child selectors. When it sees the extra style it will completely ignore it. Other browsers that do support it, such as Firefox, will see the extra style and use it. This means we can write the fluid style properly for other browsers, while leaving Internet Explorer unaffected.

To summarise the trickery:

  • New browsers will display a nice fluid design with a minimum width preventing screen mangling
  • Internet Explorer with JavaScript will have a fluid design, with a partially effective minimum width (it flickers a little)
  • Internet Explorer with no JavaScript will have a fixed design

This is all transparent to the user.

138 comments

  1. I’ve gone through your tutorial several times. I get everything to work but the footer. For some reason it doesn’t appear to be applying the css from the stylesheet. Can you take a look and point out my error?

    I totally dig your work, its been a huge help so far. Thanks.

    Reply

  2. I am putting up a site and have found your tutorial extemely helpful, but on my site I have this line right below my header and I can’t figure out how to get rid of it for the li8fe of me. Any help would be greatly appreciated.

    Reply

  3. Hi.
    You´r first themguide (part 1) is really good and easy to understand but part 2 of it did not make much changes on my blog unfortunately.
    Allthough I followed all the steps you made.
    Can it be different if it is WordPress 2.0.5?

    My headerimg from the kubriktheme didnt disapear and the margin didnt´n change. The footer did not change either.
    In step 3 the apperence of the page did not shrink either.

    I would love to learn why.

    Thanks.

    Reply

  5. […] このガイドは John Godley による「Dissection of a WordPress theme: Part 2」の翻訳で、著作権は John Godley が保持しています。このオリジナルページおよび／またはこの翻訳ページの複製には原著者による許可が必要です。- This guide is the translation of the guide UrbanGiraffe » Dissection of a WordPress theme: Part 2 by John Godley who is the owners of the copyright. Any reproduction of the original page and/or the translated page is allowed only with the permission of the author. […]

    Reply

  6. Internet Explorer is aggravating me. I’ve tried everyway possible to get the sidebar to position correctly within IE, but to no avail. Of course Firefox and Safari both behave normally. I’m not sure what is wrong. I’ve pasted the style information for the content, sidebar and wrapper. Any help would be appreciated.

    #wrapper {
    padding:9px;
    padding-top:0;
    padding-bottom:10px;
    border-left:solid 1px;
    border-right:solid 1px;
    border-color:#9F9E9E;
    margin:0 auto;
    width:expression(document.body.clientWidth #wrapper{
    width:97.5%;
    }

    #sidebar {
    background-image:url(images/content_bg.gif);
    background-repeat:repeat-x;
    background-color:#C2C2C2;
    border:solid 1px;
    border-color:#9F9E9E;
    margin-bottom:10px;
    width:27%;
    float:right;
    padding-right:10px;
    }

    #content {
    background-image:url(images/content_bg.gif);
    background-repeat:repeat-x;
    background-color:#C2C2C2;
    border:solid 1px;
    border-color:#9F9E9E;
    margin-bottom:10px;
    width:69%;
    float:left;
    padding-left:5px;
    padding-right:7px;
    text-align:justify;
    }

    Reply

  7. Bryan, all I can suggest is to make the elements smaller and see if it starts working in IE. Sometimes with a percentage width, a fixed padding/margin can confuse IE so it thinks there isnt enough space and pushes elements out of the way.

    Reply
  8. Pingback: Create a wordpress theme from scratch « Fighting with CSS questions - a way from newbie to master CSS

  10. This guide is what got me on the road to learning CSS. I am no designing websites commercially and fluent in CSS. Thanks for this fantastic resource – it has proved itself to be invaluable to me.

    Reply

  11. hello!

    Thanks for the nice tutorial!

    Well, my site is not working completely. I think that I missed a part where to configure the approiate spacing or something in the content, because it is placing the posts not aligned with the header and footer

    Also, comment CSS is not working! 🙁

    Sorry my english!

    PD: http://futuroesplendor.mud.cl/capsulecorp

    Reply

  12. Elear,

    You should give your header element the same width as your page:

    #header { width: 700px}

    It is also likely you will need to remove the left-padding from #headerimg. The same goes for the footer

    Reply

  13. Thankyou for a great tutorial. Beginning with that and no previous experience of CSS I’ve made the site I wanted. The only problem is when I checked it on IE and find that the sidebar is dropping down below the posts – it displays fine in Firefox.

    Can you tell me where I start looking for the problem?

    Amanda

    Reply

  14. I’ve managed to improve it a bit by fiddling with the percentages after reading another here comment on one of the other questions. It’s not perfect because the sidebar doesn’t sit flush right.

    Another strange thing is that the colour of the post headings changes half way down the page in IE – not in Firefox. Why would that be given that they’re controlled by the same code? Very odd…

    Thanks again
    Amanda

    Reply
  16. Pingback: Kubrick and K2 WordPress Themes: Collection of Theme Tips « Lorelle on WordPress

  17. Hi John,

    Thanks for this great tutorial. I bought the printable version of it and there are several differences with what’s online ("Fluidity without the breakdown, notably"). Which should I rely on?

    Cesco

    Reply
  19. Pingback: Pixie Tail » Blog Archive » Dreaming of a New Template
  20. Pingback: ProsjektBlogg 2MK: Web&Foto » Blog Archive » Nærmare informasjon om arbeidskrava
  21. Pingback: WordPress Developer’s Toolbox | Developer's Toolbox | Smashing Magazine
  22. Pingback: WP开发者资源-2.1: WordPress主题制作基础教程 | 帕兰映像
  25. Pingback: » How To Develop Custom WordPress Themes! Candid Software Weblog -Web Designing, hosting, ecommerce, content and more!
  27. Pingback: WordPress 开发者工具箱 » 云计算
  29. Pingback: WordPress 开发者工具箱(1) | 窝棚-WPCMS
  33. Pingback: 逐浪·网络 » Blog Archive » WordPress 开发者工具箱
  34. Pingback: 我想网 » Blog Archive » WordPress 开发者工具箱（上）
  35. Pingback: Top 10 Tutorials for Developing WordPress Themes | Vandelay Design Blog
  36. Pingback: Wordpress mockup tutorials the best | Design strike

  37. Hi,

    This is great learning material you have here, I would first like to thank and congratulate you for it.

    I think a found a minor mistake:
    In sentence “(…) pointed out yet, header.php defines the div ‘page’ which contains everything, (…)” on page 4, instead of file “hader.php” it should refer to file “index.php”.

    Thanks again,
    Miguel

    Reply

    1. Sorry, after reading with more attention I see this is not a mistake.

      Ok, so div ‘page’ is defined in header.php file. But now my doubt is, why does the div ‘page’ contains everything, including the div ‘wrapper’, since this is defined in the index.php file in paralle with call for header.php that defined the div ‘page?

      Is it because the div ‘page’ is always on top of other user defined containers? Maybe I should get into CSS more thoroughly…

      Thanks,
      Miguel

      Reply

Leave a comment

Your email address will not be published. Required fields are marked *