Default Template for WordPress v1.2

The following is a guide of the CSS Selectors used in the WordPress default template (WP v1.2). It is designed for those already familiar with CSS.

The "wp-layout.css Explained" tutorial article provides an annotated guide to the default WP layout.

Quick Summary

The default layout consists of a wrapper div named "rap" and the credits bar at the bottom. The wrapper div in turn contains the blog title (h1 header) and two other divs named "content" and "menu".

A number of HTML tags are used for just one purpose:

• h2 for the date at the top of each post
• h3 for the story titles
• p for the body of each post (and the "credits" bar at the bottom of the page).

Controlling the appearance of your blog can take two forms:

• Assigning styles to these selectors and their subdivisions (edit the wp-layout.css file or just make your own from scratch)

• For more control, change the selectors themselves.

For example, who says that the links have to be part of the "menu" div? Perhaps you have lots of them and want to put them somewhere elese on he page. For this kind of change, edit the index.php file to break up the "menu" div, create new divs etc.

Default Template Structure

Beginning after the body tag:

• div id = "rap" // wrapper for the whole document except "credits" (see bottom)
  • h1 id = "header" // "my blog" heading, h1 is only used here

• • div id = "content" // contains all posts
    • h2 // only used for dates
    • div class = "post"
      • h3 class = "storytitle"
      • div class = "meta" // "Filed under... - Authorname - Edit This"
        • ul class = "post-categories" // Category names the post is filed under
      • div class = "story content"
        • p // the

          tag is only used here and in "credits" (see bottom)

      • div class = "feedback" // contains all comments for the post

• • div id = "menu" // right hand column of default layout
    • li id = "links"
      • li // one li element for each link
    • li id = "categories"
      • li // one li element for each category
    • li id = "search" // contains title ("search:") and form element
      • form id = "searchform" // the actual text box and "search" button
    • li id = "archives"
      • li // one li element for each month (in default config)
    • li id = "calendar"
      • table id = "wp-calendar" // contains whole calendar
        • caption // current month
        • thead // contains days of the week
          • tr
            • th // one th for each weekday
        • tfoot // links to next and previous month
          • tr
            • td id = "prev" // link to previous month
            • td id = "pad" // this td is just for padding
            • td id = "next" // next month
        • tbody // contains dates
          • tr // one tr for each row
            • td // one td for each date
    • li id = "other" // contains links to login, register
    • li id = "meta" // contains links to RSS feeds, w3.org, wordpress.org
  • end of div id = "menu"

• • end of div id = "content"
• end of div id="rap"

• p class = "credit" // "Powered by WP" footer. NOT part of the "rap" div!