If you're adding dummy text, you can either use lorem ipsum text (you can access examples of it at http://www.lipsum.com), or you could add some more descriptive text (an example of which you can find at http://notloremipsum.com). The second approach often helps when building sites for clients as it helps them see what sort of content will go where. For our purpose we'll just use lorem ipsum.
index.html
, delete any HTML you may have already added in between the body
tags.<div id="container"><!--container goes here--> <header> <hgroup class="screen-text"> <h1>OpenSource</h2> <h2>Online Magazine</h2> <p><em>Using Open Source for work and play</em></p> </hgroup> <div id="date">Current Month and Year</div> </header><!--//header--> <!-- Begin #container2 this holds the content and sidebars--> <div id="container2"> <!-- Begin #container3 keeps the left col and body positioned--> <section class=""> <h2 class="thisMonth">This Month</h2> <!-- Begin #content --> <article class="post"> <h2><a href="#">Really Long Article Title Name The More Text The Better Cause You Never Know</a></h2> <em>Main Content:</em> Post content will go here inside this div. <p>by Author Name for <a href="#">Column Type</a></p> <div class="entry-content"><!--//post--> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed a eros nec orci volutpat vestibulum. Ut pellentesque sagittis metus. In euismod tellus id ante. Ut lectus. Nunc adipiscing. Praesent luctus, massa quis vulputate rhoncus, justo turpis mollis dolor, nec blandit nisl mauris et pede.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed a eros nec orci volutpat vestibulum. Ut pellentesque sagittis metus.</p> <p><a href="#">Read the rest of this entry »</a></p> </div><!--//.entry-content-->
index.html
file.We added some semantic elements to our site, with content.
Let's look at some of the elements we've included:
#container
div to contain our page content—useful for stylingheader
element—containing the site title and description, inside an hgroup
tag with a .screen-text
class so we can make it invisible to browsers with CSS turned on#container2
div to hold the post or page content and sidebarsarticle
element with a .post
class—it mirrors the class WordPress will eventually assign to this element, as we'll see in Chapter 4, Advanced Theme Featuresh2
element for the title of the postp
element with author information.entry-content
class to hold the post content itself—this also mirrors the class WordPress will assign once we set that upp
elements to contain the content itself, these will eventually be automatically populated by WordPress from the site's database but for now we're using dummy textThe trick: Start with a lot of text
Use a lot of sample text. It's tempting to create a nice mockup that's got clean, little, two-word headers, followed by trim and tight, one or two-sentence paragraphs (which are also easier to handle if you did the entire mockup in Photoshop, right?).
In this optimally minimalist sample, the design looks beautiful. However, the client then dumps all their content into WordPress and your theme, which includes long, boring, two-sentence headlines and reams of unscannable text. Your beautiful theme design now seems dumpy and all of a sudden the client isn't so happy, and they are full of suggestions they want you to incorporate in order to compensate for their text-heavy site.
Just design for lots of text upfront. If the site ends up having less text than what's in your mockup, that's perfectly fine; less text will always look better. Getting lots of it to look good after the fact is what's hard.
Now let's see what our page looks like when viewed in the browser:
You can see it has a basic structure in place, but it now needs some styling. After all, this isn't 1992!
So, now we're going to add some styling for our text, starting with the fonts, or font families used to display it.
By assigning font families to our CSS rules, we can set up backup font choices. This means if someone doesn't have our preferred font, then they'll probably have the backup we specify, and if they don't have that? Well, at the very least we can rely on their browser's built-in "generic" assigned font. Just specify serif
, sans-serif
, or mono-space
.
When specifying font families, it's a good idea to include one or more of the fonts which are both commonly held on PCs, Macs, and mobile devices, and which look good on screen (as against on paper). Fonts designed for screens include Verdana and Georgia, and other fonts commonly available on your users' systems will be Arial and Times New Roman.
Our headers will be Helvetica with Arial as a fallback, and the body content of our text will be Trebuchet with Helvetica and then Verdana as a fallback.