Create a Theme #4 (final)
Once the main page is looking the way we want, the next step is to click links around the site - pages, archives, single posts, etc - to see how the rest looks. Doing this here, we immediately see a problem: the page and post headers really don’t look right on the sub-pages. The image on the left shows the main page as it is currently. The one on the right shows a sub-page.

CHANGE
.arc h2 {
}
TO
.arc h2 {
font-size: 1.3em;
padding-bottom: 20px;
}
The first change is another stylesheet modification to increase the size of the (archive) page title and create some space under it. But after that, we are going to have to modify some HTML. The files we have to look at appear in Themes –> Presentation as Archives and Page Template.
<h2><?php the_date() ?></h2>
In both files we are looking to delete the code shown above. Since I created these “blank” templates, obviously I planted that line just to provide an example of how easy it is to identify and remove or change a theme’s underlying code. Adding new code is just as easy.
<h3 id="post-<?php the_ID(); ?>">
In both files, right under where we do that deletion, is the above h3 code. This what controls the presently somewhat small article title and we need to change it as follows.
CHANGE
.entry h3 {
}
TO
.entry h3 {
font-size: 1.8em;
}

And although obviously there are lots of minor tweaks we could do, we have gone pretty smoothly I think from a blank theme to a ready site. The key to developing a WordPress theme is to take it a step at a time and check the result as you go. Sooner or later you will run into the dreaded cross-browser inconsistencies and they might get you pulling your hair out. But most of the time a methodical, step-by-step approach is all it takes to produce something very respectable.
















Leave a Comment