Dissection of a WordPress theme: Part 1

After sidebar change

Lets take a look at our site with the new style:

Website

Its getting there, but the sidebar is on the right of the footer and not the content.

Layout

We need to re-arrange the basic structure and move the PHP function call that displays the sidebar to before the code for the posts (so it is to the right of the posts and not the right of the footer).

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

<?php get_header(); ?>

<?php get_sidebar(); ?>

    <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(); ?>

432 comments

  1. Pingback: Source Movie Blog
  2. Not sure if anybody else had to do this, but to clear the style completely, I had to remove the at the end of the header.php file otherwise you would get rendered borders. this happened in safari 4.0.1 and firefox… whatever version I have installed. I don’t know, I never use it.

  3. putting it back in, the break comes back but without the strange borders on either side. Don’t know why it was happening in the first place. Thanks a bunch for such a great tutorial.

  4. Hi jonh,
    i tried to do part 1 but if i notice a fault that i’m gonna to talking about.
    In Italian version of this guide at the bottom of each page , there is your two MonkeyMoney : one with style and other without.
    So i uploaded your themes and i turn one with no-style, i clear style.css leaving only “header” you suggest to add to style.css( not style at all… ), and i copy header of theme from these page where i’m posting and i add it to MonkeyMoney witout style.
    So, even i clear-up every style from header.php, if i mantein header.php in the theme, layout is not the same displayed here : stage1finalthumb.png; but eliminating header.php layout is displayd in a right way…
    In my opinion this is not explain clearly.

    Regards

  5. Not sure if anybody else had to do this, but to clear the style completely, I had to remove the at the end of the header.php file otherwise you would get rendered borders. this happened in safari 4.0.1 and firefox… whatever version I have installed. I don’t know, I never use it.

  6. this is a great help thanks! I’m using Lubith to generate my themes which is a lot easier and faster than starting from scratch but I will use this information to manipulate the code behind and get the best results. thanks again

Leave a comment

Your email address will not be published. Required fields are marked *