Demo: Wordpress Customization This demo assumes you have designed a template with at three divs: nav (a div where your links are), sidebar (a div to hold your widgets), and main (a div for all your content). They don't need to be named that.
  1. Start off with an index.html file and a style.css file. You can grab code to get started off my homepage. Build it into a template via photoshop slices,and css typography and positioning.
  2. Convert your template to PHP. You'll need to save your file as index.php instead of index.html. This will tell the browser there's php on the page. Save this file into a folder called "custom" on your desktop.
  3. Copy all your images and css to this custom folder. Make sure your css file is called "style.css".
  4. Replace your title tags with this code:
    <title>
    <?php bloginfo('name'); ?>
    <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?>
    <?php wp_title(); ?>
    </title>
  5. Replace your css link with this code:
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
  6. Add the code
    <?php wp_head(); ?>
    right before the </head?> tag.
  7. Replace all your code BETWEEN THE <ul> </ul> TAGS in your navigation area with
  8. If you are using a sidebar, create and save a file called sidebar.php in your theme folder. Add this code in your sidebar.php file:
  9. If this is a page that will have blog posts on it, copy and paste this code in your main content div:
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <h2><?php the_title(); ?></h2>
    <h4>Posted on <?php the_time('F jS, Y') ?></h4> <?php the_content(__('(more...)')); ?>
    comments_template(); // Get wp-comments.php template

    <?php endwhile; else: ?>
    <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
    <?php endif; ?>
  10. If you only want to show wordpress pages on your site, insert this code into your main div area:
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <h2>
    <?php
    the_title();
    ?></h2>
    <?php the_content(); ?></p>
    <?php endwhile; else: ?>
    <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
    <?php endif; ?>
    Note: if your theme has a blog page and static pages, create and save a file in your theme folder called page.php, with the code above pasted in the main div area.
  11. If you are using a sidebar, create a new file and save as functions.php. Add this code in:
    <?php
    if ( function_exists('register_sidebar') )
    register_sidebar();
    ?>
  12. Upload the folder to your wp-content/themes on your site.