• Copy default theme into a new folder called eg-259
• Clean theme

/*  
Theme Name: EG-259
Theme URI: /dokuwiki/eg-259:home
Description: New theme based on the case-study by John Godley (http://urbangiraffe.com)
Version: 1.0
Author: Chris Jobling
Author URI: http://www.cpjobling.org.uk
*/

• Replace with

<style type="text/css" media="screen">
  /* BEGIN CSS IMAGE */
</style>

• Test “style-less” style

Point out structure of document:

1. Title
2. Posts with except and comment section
3. Sidebar
4. Footer section

Open index.php

Point out parts:

1. get_header() – loads header.php
2. content – displays posts
3. get_sidebar() – loads sidebar.php
4. get_footer() – loads footer.php

Sidebar comes after footer in code. To move it to right, simply add a style:

#sidebar
{
  float: right;
  width: 190px;
}

Now sidebar floats to right, but is positioned next to footer rather than next to content. This is due to location of get_sidebar() in code.

Edit index.php and move get_sidebar () on line 43 to line 3:

Still not quite right. Footer is not expanding to fill screen. This is a wrapping problem. Need to clear the sidebar before the footer.

In footer.php code:

<hr />
<div id="footer">
        <p>
<a href="feed:<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a>
. . .

becomes

<div id="footer">
<hr />
        <p>
<a href="feed:<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a>
. . .

Now add style:

#footer
{
  clear: both;
}

See Web design. Some issues to mention.

Should be standards conforming to reach largest audience.

Content before navigation to improve search

See article.

Need to reverse movement of get_sidebar() from previous step and add style:

This makes content and sidebar fixed position. Content up to 70% of width, sidebar fixed to left at 70%, hence to right of content. No “leakage”.

#content
{
  width: 70%;
  float: left;
}

#sidebar
{
  width: 28%;
  margin-left: 70%;
}

In simple terms all we have done is change the sidebar and content around. In part one of the guide I had the sidebar first, floating to the right of the content. Now we have the content first, floating to the left of the sidebar. Stylistically it looks the same, but we get several advantages:

• No more overlapping columns
• Better accessibility
• Improved Google awareness

Add styles to styles.css.

• Reset margins

* 
{ 
  padding: 0;
  margin: 0;
}

• Reset styles

body
{
}

Add wrapper class to index.php.

<div id="wrapper">

before content. Close </div> after get_sidebar(). This puts another box around the content and makes it slightly easier to style.

Wrapper helps to keep styles for content and sidebar separate from header and footer.

For details refer to article.

This is the simplest layout and the one used by most blogs. A fixed layout has many advantages:

• Most like a newspaper or book
• Reasonably confident that the layout will look the same on any screen
• No nasty browser issues

Here is the style:

#wrapper
{
  width: 700px;
  margin: 0 auto; /* O top-bottom, auto left-right = centred */
  overflow: hidden;
}

Change the wrapper style to:

#wrapper
{
  width: 85%;
  margin: 0 auto;
}

This is ok, until browser dimensions drop below around 800 px width. In that situation, in IE, the layout breaks down.

This option requires some JavaScript magic. See the article for full explanation.

Here we make use of some pretty complicated CSS code that enables us to stop Internet Explorer pushing the sidebar away, and also causes Firefox to react better at smaller widths. To do this we employ the CSS concept of minimum width. As you would expect this allows us to define a minimum width for an element. When the browser goes below this width it stops sizing the element and puts scrollbars on the window. This is completely acceptable.

There is one catch to this wonderful concept: Internet Explorer does not support minimum widths. Fortunately we can work around this by using dynamic properties. This is a way to embed JavaScript within the CSS. Not particularly pleasant, and it requires JavaScript to be enabled.

Our aim is to introduce some styles such that:

• Minimum width supporting browsers have a fluid layout and a fixed minimum
• Internet Explorer has a fluid layout and fixed minimum when JavaScript is enabled
• Internet Explorer has a fixed layout when JavaScript is not enabled

We can achieve all of this neatly by changing the wrapper style:

#wrapper
{
  margin: 0 auto;
  width: 700px;
  /* the following line is understood only by IE ... but ignored by other browsers */
  width: expression(document.body.clientWidth < 605 ? "600px" : "85%" );
}
 
/* This is a fix: IE doesn't recognize child elements so
   ignores this extra style. Mimumum width is respected by
   FF */ 
div>#wrapper
{
  margin: 0 auto;
  min-width: 400px;
  width: 85%;
}

Open the file header.php. The main content is simply PHP magic and does not need to concern us here. However, the important parts are:

<body>
<div id="page">
 
 
<div id="header">
	<div id="headerimg">
		<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
		<div class="description"><?php bloginfo('description'); ?></div>
	</div>
</div>
<hr />

The <body> and <div id=“page”> elements open the body and provide a wrapper for the whole page. These are closed in footer.php. For styling the header we are concerned with the header and headerimg divs. The former is a wrapper for the header as a whole. The latter is concerned with the blog header and any associated decoration (logos etc).

Let's first add some basic style. First for the fonts.

body
{
  font-family: 'Trebuchet MS', Arial, Verdana, Sans-Serif;
  font-size: 76%;
}

• Choice of 76% for body allows resizing. All other fonts will be specified in times of ems (the size of the letter “M”.

Second, let’s turn off those horizontal rules. We can bring them back later if necessary.

hr
{
  display: none;
}

Header section shown at full screen width, with a small logo.

The logo needs to be stored in the theme's image folder. Here is the logo, right-click and save as images/headerlogo1.png:

Here's the code:

#header
{
  margin-bottom; 20px;
}
 
#headerimg
{
  font-size: 1.2em;
  height: 6.5em;
  color: #FEF4DF;
  padding-left: 65px;
  background: #F6C760 url(images/headerlogo1.png) no-repeat fixed top left;
}
 
 
#header a
{
    text-decoration: none;
    color: white;
}
 
#header h1
{
    font-size: 3em;    
}

Points to note:

• Icon is fixed to top-left of the browser window.
• Left padding is adjusted to put title and its subtitle into the darker part of the logo
• Colors are chosen to match logo. Eye dropper tool (demonstrated) used to find values.
• Font size for sub heading chosen to be slightly larger than body text
• line height specified in ems so it will scale if user changes font size.
• Main <h1> headline is 6 times standard font size.
• text-decoration is turned off so that blog title link is not shown.

Similar to previous but header is centred and no logo is used.

Here's the code:

#header
{
  margin-top: 20px;
  margin-bottom; 30px;
}
 
#headerimg
{
  font-size: 1.2em;
  margin: 0 auto;
  text-align: center;
  width: 730px;
  height: 6.5em;
  color: #FEF4DF;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #F6C760;
}
 
 
#header a
{
    text-decoration: none;
    color: #CD7042;
}
 
#header h1
{
    font-size: 3em;    
}

Background image:

floats underneath part of the content. Makes use of fixed and fluid sizes.

Here's the code:

#page
{
  background: url(images/headerlogo2.png) no-repeat top left;
}
 
#header
{
  padding-top: 20px;
  margin-bottom: 20px;
  height: 250px;
}
 
#headerimg
{
  font-size: 1.2em;
  text-align: left;
  margin-left: 200px;
  padding: 10px 0 20px 20px;
  height: 5em;
  color: #E39F7D;
  background-color: #F2D5AC;
  border: 1px solid #EDC791;
}
 
 
#header a
{
    text-decoration: none;
    color: white;
}
 
#header h1
{
    font-size: 3em;    
}

Note use of <div> with id=page is used as a container for the background image. This means that it will float below the header and the content.

The online guide discussed the footer (contained in footer.php). It also gives footing settings that correspond to the three header designs shown above. To save time we'll go straight to the style that matches the fancy header. You can look at the others at your leisure.

#footer
{
  margin: 50px 200px 0 0;
  color: #804A0F;
  background-color: #F6E4CA;
  border: 1px solid #F2D5AC;
  padding: 15px;
  text-align: right;
  clear: left;
}

Makes footer a lighter shade so not to distract from the header. It is also offset in the opposite direction, with text right-aligned. We need clear: left; to force the footer not to float next to the sidebar.

We skip to styles now. Explanation on-line.

Looks better if search box is put at bottom!

• Enable author info (a photo needed in images/author.jpg: I used this one: )

			<li><h2><?php _e('Author'); ?></h2>
			<p>Frankly my dear I don't give a damn!</p>
			<div id="author"><a href="/about" title="View my biography">
			   <img border="0" src="<?php bloginfo('template_url') ?>/images/author.jpg" alt="photo" /></a></div>
			</li>

Style:

#author
{
  border: 1px solid #999;
  margin: 10px auto;
  text-align: center;
  width: 130px;
  padding: 2px;
}
 
#author img
{
  border: 0;
}

Note: The special command <?php _e('Author'); ?> is a WordPress feature that allows for internationalization.

After categories and before meta:

		    <li><h2><?php _e('Calendar') ?></h2><?php get_calendar () ?></li>

#sidebar ul
{
  list-style: none;
}

but this is inherited: need to put the bullets back for sublists

#sidebar ul ul
{
  list-style-image: url(images/listitem.png);
  list-style-type: circle;
  margin-left: 20px;
}

Note - don't actually have a bullet! Should do same to menu!

#sidebar
{
  background-color: #FCF1E2;
  color: #4A2C00;
  border: 1px solid #FDE5C3;
}
 
#sidebar ul h2
{
  background-color: #FDE5C3;
  border-bottom: 1px solid #FADA96;
  border-top: 1px solid #FADA96;
  font-size: 1.2em;
  font-weight: normal;
  padding: 2px;
  margin-bottom: 5px;
}

A bit more space between headings and previous list:

#sidebar ul
{
  list-style: none:
  margin-bottom; 10px;
}

Remove extra spacing for sub-sub lists (don't have any but we might!)

#sidebar ul ul ul
{
    margin-bottom: 0;
}

#sidebar a
{
  text-decoration: none;
  color: #4A2C00;
}
 
#sidebar a:hover
{
  text-decoration: underline;
}

#searchform
{
  text-align: center;
}
 
#searchform input
{
  border: 1px solid #4A2C00;
  background-color: #FDE5C3;
}
 
#searchform #s
{
  width: 50%;
  background-color: white;
}

Built from a table

#wp-calendar
{
    border: 1px solid #FDE5C3;
    width: 60%;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 15px;
}
 
#wp-calendar th
{
    background-color: #FDE5C3;
}
 
#wp-calendar a
{
    border: 1px solid #4A2C00;
    background-color: white;
    display: block;
}
 
#prev a, #next a
{
    border: 0;
}
 
#wp-calendar caption
{
    text-align: center;
    width: 100%;
}

The “Loop” is the front-facing side of WordPress ans sits on top of the code hierarchy. Its role is to obtain information about posts and present it though special functions. Its basic structure is:

while ( have_posts() ) : the_post();
 
endwhile;

The handlers for the loop are broken up across a number of files:

• index.php – displays the fron page
• single.php – displays a single post
• search.php – displays search results
• archive.php – displays archives
• page.php – displays a WordPress “page” (essentially static non-blog content)

The style sheet we have written will apply to all of these, but because we added some additional structure to make floating content easier to handle, all these extra pages will also need restructuring too.

• Introduce space between posts (note use of class here!):

.post
{
  margin-bottom: 2.2em;
}

• add in some more basic styles:

.post
{
  margin-bottom: 25px;
  color: #4A2C00;
  padding-left: 5px;
  font-size: 1.1em;
}
 
h2
{
    font-size: 1.6em;
    border-bottom: 1px solid #E8C38B;
}
 
h2 a:hover, h2 a:visited, h2 a
{
    text-decoration: none;
    color: #BD492A;
}
 
.entry
{
    margin-top: 10px;
    margin-bottom: 15px;
}
 
.postmetadata
{
    padding: 2px;
    font-size: 0.8em;
    border-top: 1px solid #FADA96;
}
 
.postmetadata a
{
    color: #4A2C00;
}

It's not clear, but the content paragraphs are also lacking in style (they inherit from wrapper). Lets illustrate by styling a paragraph in post:

.post p
{
  line-height: 1.4em;
  margin-bottom: 1em;
}

Looks good! Add some more:

blockquote{
    margin: 1em 1.5em;
    padding: 1em 1.5em;
    border: 1px solid #FADA96;
    background: #FCF1E2 url(images/blockquote.png) no-repeat scroll top left;
}
 
.post li
{
    margin-left: 20px;
}
 
.post ul
{
    list-style-image: url(images/listitem.png);
    list-style-type: disc;
    margin-bottom: 10px;
}
 
acronym, abbr, span.caps
{
    cursor: help;
}
 
acronym, abbr
{
    border-bottom: 1px dashed #999;
}
 
blockquote cite
{
    margin: 5px 0 0;
    display: block;
}
 
.center
{
    text-align: center;
}
 
a img
{
    border: none;
}
 
h3
{
  margin-top: 1.5em;
  font-size: 1.4em;
}
 
h4
{
    margin-top: 1.2em;
    font-size: 1.2em;
}
 
h5
{
    margin-top: 1em;
    font-size: 1em;
}
 
.post a
{
    color: #BD492A;    
}

Demonstrate that our work is not done. Follow link to a post! header and footer is ok, but body is screwed. it needs the wrapper structure!

Modifications to single.php:

• Add wrapper after get header:

<div id="wrapper">

• Add back in side bar (if it's wanted)

<?php get_sidebar(); ?>
</div>

Adjust navigation:

.navigation
{
  display: block;
  margin-top: 10px;
  margin-bottom: 40px;
}
 
.alignleft
{
  float: left;
  text-align: left;
  width: 50%
}
 
.alignright
{
  float: right;
  text-align: right;
  width: 50%
}

Add clear:both to h2 to avoid blog post headline floating to right.

Meta data on a single post needs to be different from that on front page. It's given more prominence using:

.entry .postmetadata
{
    font-size: 1.1em;
    background-color: #FDE5C3;
    width: 70%;
    margin: 2em auto 2.5em auto;
    border: 1px dotted #E9B17B;
    padding: 5px;
    padding-left: 45px;
    background: #FDE5C3 url(images/metadata.png) no-repeat scroll top left;
}

Style:

ol.commentlist
{
  width: 90%;
  margin: 0 auto;
}
 
ol.commentlist li
{
  margin-bottom: 1.5em;
  border: 1px solid #C69835;
  padding: 5px;
  background-color: #F5DE74;
}
 
ol.commentlist li.alt
{
  background-color: #Fdf6A7;
]
 
ol.commentlist a
{
  color: #Bd492A;
}
 
small.commentmetadata
{
  font-size: 0.8em;
  margin-bottom: 1em;
  display; block;
}

Some additional PHP template pages need the wrapper div. You will need to adjust:

• page.php
• archives.php
• links.php.
• 404.php allows a custom page not-found to be displayed by WordPress (most useful if WordPress is your home page)
• archive.php
• search.php

Left as an exercise for the student.