Urban Giraffe

Testing the style

Go to the WordPress administration screen, and bring up the presentation option. You should now see the MonkeyMagic theme. Activate it.

Now lets take a look at the website (note the scissors represent where I have cut out a section to shrink the picture):

Pretty ugly, but this is exactly what we want. This will form the base design, and we can now create our theme without getting lost in too many details.

Step 2: Making sense of the mess

So we've stripped the theme of all style, and now were left with the content. Actually, this is not entirely true as the theme still contains elements of basic layout construction. Looking at the current theme you can see that the site still retains this structure:

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

This structure is defined by the rest of the files in the themes directory. The starting point for all this is index.php – this is what WordPress runs every time it needs to display a page.

<?php get_header(); ?>

    <div id="content" class="narrowcolumn">
 
    <?php if (have_posts()) : ?>
 
        <?php while (have_posts()) : the_post(); ?>
 
            <div class="post">
                <h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
                <small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
 
                <div class="entry">
                    <?php the_content('Read the rest of this entry &raquo;'); ?>
                </div>
 
                <p class="postmetadata">Posted in <?php the_category(', ') ?> <strong>|</strong> <?php edit_post_link('Edit','','<strong>|</strong>'); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
 
                <!--
                <?php trackback_rdf(); ?>
                -->
            </div>
 
        <?php endwhile; ?>
 
        <div class="navigation">
            <div class="alignleft"><?php posts_nav_link('','','&laquo; Previous Entries') ?></div>
            <div class="alignright"><?php posts_nav_link('','Next Entries &raquo;','') ?></div>
        </div>
 
    <?php else : ?>
 
        <h2 class="center">Not Found</h2>
        <p class="center"><?php _e("Sorry, but you are looking for something that isn't here."); ?></p>
        <?php include (TEMPLATEPATH . "/searchform.php"); ?>
 
    <?php endif; ?>
 
    </div>

  <?php get_sidebar(); ?>

<?php get_footer();

I've split this into the four basic sections, as shown. Ignoring the details of the posts part, it is a straightforward design. Note that whenever you see <?php … ?>, this is a PHP function. When a user views the page, a PHP interpreter on the web server will compile anything between these tags. The user never gets to see the PHP code itself, only the output from the compiled code, if any.

In reference to the code, lets look at parts 1, 3, and 4, and come back to 2 another day.

1. get_header () – loads header.php
3. get_sidebar () – loads sidebar.php
4. get_footer () – loads footer.php

These functions are self-explanatory, and they are used to allow us to split the design into smaller units. This lets us concentrate fully on the appropriate part, without anything else complicating the situation. Note that we don't have to follow this, and we can in fact put all the code in index.php, but its a nice method and so well stick to it.