Urban Giraffe

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 Customisation support forum. Any support questions left on this page may not be answered.