Dissection of a WordPress theme: Part 1

Lessons learnt

The basic layout has been defined, and we have the content exactly where we want it. We also know the following:

  • index.php is the starting point for the theme
  • sidebar.php is called by index.php, and creates a sidebar wrapped inside a div with ID sidebar
  • header.php is called by index.php, and defines some header stuff that we haven’t looked at
  • footer.php is called by index.php, and creates a footer element inside a div with ID footer
  • style.css controls what happens to our elements defined in the above files

Hopefully WordPress does not seem like such a beast now. We have made only minor changes and already the theme is completely different.

Final styling

Before I finish this section I think we should make the site look a little more attractive. The default font is very clunky and reminiscent of the web’s early days. One small additional style can make it look so much better:

body {
  font-size:   13px;
  line-height: 18px;
  font-family: Georgia, "Times New Roman", Times, serif;
  margin:      20px;
}

This changes the style for everything inside the body element – essentially everything you see on the page. The 20 pixel margin increases the feeling of space around the whole page. Changing the line height also enhances this space, and makes the text easier to read. You can change all these values to your own preference, and I will probably change them later in this guide anyway (demonstrating the peril of publishing-as-you-write).

Concluding part 1

This concludes part one of my WordPress theme dissection. Part two will focus on the sidebar, and will also add a more attractive header and footer. Part three will look at the posts section, and part four will finish the remaining details. Hope to see you there!

Read part 2

Support

Please direct all support questions to the Theme and Templates support forum. Any support questions left on this page may not be answered.

432 comments

  1. Pingback: Source Movie Blog
  2. Not sure if anybody else had to do this, but to clear the style completely, I had to remove the at the end of the header.php file otherwise you would get rendered borders. this happened in safari 4.0.1 and firefox… whatever version I have installed. I don’t know, I never use it.

  3. putting it back in, the break comes back but without the strange borders on either side. Don’t know why it was happening in the first place. Thanks a bunch for such a great tutorial.

  4. Hi jonh,
    i tried to do part 1 but if i notice a fault that i’m gonna to talking about.
    In Italian version of this guide at the bottom of each page , there is your two MonkeyMoney : one with style and other without.
    So i uploaded your themes and i turn one with no-style, i clear style.css leaving only “header” you suggest to add to style.css( not style at all… ), and i copy header of theme from these page where i’m posting and i add it to MonkeyMoney witout style.
    So, even i clear-up every style from header.php, if i mantein header.php in the theme, layout is not the same displayed here : stage1finalthumb.png; but eliminating header.php layout is displayd in a right way…
    In my opinion this is not explain clearly.

    Regards

  5. Not sure if anybody else had to do this, but to clear the style completely, I had to remove the at the end of the header.php file otherwise you would get rendered borders. this happened in safari 4.0.1 and firefox… whatever version I have installed. I don’t know, I never use it.

  6. this is a great help thanks! I’m using Lubith to generate my themes which is a lot easier and faster than starting from scratch but I will use this information to manipulate the code behind and get the best results. thanks again

Leave a comment

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