Lessons learnt
The basic layout has been defined, and we have the content exactly where we want it. We also know the following:
index.phpis the starting point for the themesidebar.phpis called byindex.php, and creates a sidebar wrapped inside adivwith IDsidebarheader.phpis called byindex.php, and defines some header stuff that we haven’t looked atfooter.phpis called byindex.php, and creates a footer element inside adivwith IDfooterstyle.csscontrols 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!
Support
Please direct all support questions to the Theme and Templates support forum. Any support questions left on this page may not be answered.
Awesome resource! Just invaluable! Thanks so much for sharing it!
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.
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.
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
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.
this is the most straight forward and clearest guide word wordpress beginners i’ve so far seen. thanks.
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