<div id="header">

<div id="main_nav">
<ul>
<li><a href="http://www.webdevtuts.net">Home</a></li>
<?php wp_list_categories('title_li='); ?>
</ul>
</div><!--end main_nav-->

<div class="clear"></div>

<div id="logo"></div><!--end logo-->

</div><!--end header-->

<div class="clear"></div>

<div id="Container">

right below the header tag then close it right above the sidebar tag.

This code below is our post section. We will substitute some XHTML markup into wordpress php functions

Below is the entire section for the post area (Just the normal HTML)

Below is the wordpress markup that we will be using

Copy the code below into your index.php

<div class="post_break">
<div id="post_thumb"><img src="<?php echo get_post_meta($post->ID, 'Thumbnail',true) ?>" alt="Post Image" id="postbreakimg" /></div>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div id="post_info"><p>Posted in <?php the_category(', ') ?> <?php the_time('F jS, Y') ?> by <?php the_author_posts_link(); ?></p></div>
<div id="post_text"><?php the_excerpt('Read the rest of this entry &raquo;'); ?></div>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>" class="post_more">Read More</a>
</div><!--end post break-->

<div class="clear"></div>

Note: Below is information to help you better understand what I did and what changes I made.

So I will start off with the div class=”Post_break”. I used div class because there are mutiple post, and when you have mutiple things using the same styling then it is good to use class
instead of

plus it will keep your code vaild.

For the image I kept the div id=”post_thumb but I changed the inside to

<img src="<?php echo get_post_meta($post->ID, 'Thumbnail',true) ?>" alt="Post Image" id="postbreakimg" />

The code above tells wordpress to grab the thumbnail image. Whenever you would create a new post you would insert the word Thumbnail into your custom fields and link to the direct image and there is where your image will appear.

For the second level heading(H2) I change the inside of the h2 tags to

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a>

For the post info section I changed the inside of the div to

<p>Posted in <?php the_category(', ') ?> <?php the_time('F jS, Y') ?> by <?php the_author_posts_link(); ?></p>

The code above basically tells wordpress to find out what category the post was written for then the date of publish and finally the author name that has written that post.

For div id=”post_text” I’ve added

<?php the_excerpt('Read the rest of this entry &raquo;'); ?>

which tells wordpress to get the short description of the post instead of the entire post

For the read more link I’ve added

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>" class="post_more">Read More</a>

which tells wordpress that you would like to read more and it will take you to the single page.

Finally I ended the post section then cleared the floats.

The index.php page is finally completed in here is what your page should like.

Step 5

Now that our header.php, index.php are completed we will now work on our sidebar.php page. Open your sidebar.php page.

Note: remember that most of the divs and markup codes are codes/tags I grab are from the original index.html file

Scroll down the index.html page until you see the sidebar tag. Copy div id=”sidebar” into your sidebar.php file. Add the code right below the php header tag

Now lets add our advertisement 125×125 into our wordpress layout.

Copy the code below

<h2>Sponsors</h2>
<ul id="adverts">
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/ad125.jpg" alt="125x125 banner ad" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/ad125.jpg" alt="125x125 banner ad" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/ad125.jpg" alt="125x125 banner ad" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/ad125.jpg" alt="125x125 banner ad" /></a></li>
</ul><!--adverts-->

<a class="side_more" href="">Advertise here</a>

<div class="clear"></div>

Note: Below is information to help you better understand what I did and what changes I made.

In the normal HTML I just linked the images to the image folder but with wordpress you have to use a custom php function which calls the images.

Now lets add the Flickr images to our theme. Copy the code below

<h2>Flickr</h2>
<ul id="flickr">
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/flk_samp.jpg" alt="flickr" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/flk_samp.jpg" alt="flickr" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/flk_samp.jpg" alt="flickr" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/flk_samp.jpg" alt="flickr" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/flk_samp.jpg" alt="flickr" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/flk_samp.jpg" alt="flickr" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/flk_samp.jpg" alt="flickr" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/flk_samp.jpg" alt="flickr" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/flk_samp.jpg" alt="flickr" /></a></li>
</ul><!--end flickr-->

The code above does the same thing as the ads. WordPress calls for the images. If you wanted to turn these images into live working images from your flickr account then the best thing to do is use a wordpress plugin.

You should now have something like this

Step 6

Now that are header.php, index.php, and sidebar.php are completed it is time to complete our single.php page. The single.php is very simple to complete.

All we have to do is add the main col tag after the header tag(Very first tag at the top) then delete this tag

<?php previous_post_link('&laquo; %link') ?> | <?php next_post_link('%link &raquo;') ?>

Finally lets add this code after the end tag of main col

<?php get_sidebar(); ?>

Your single page should now look like this

Step 7

Open your archive.php. For our archive page we will just be adding the main col tags and using the post code from index.php. Hope that made sense!
Below is the archive page untouched!

Add the div id=”main_col” to the top of your archive.php page and place it right under the get header function. Then replace the post area code
with the post area code from your index.php file. Do not forget to close the main col div.

Here is an example of what your archive.php should actually look like.

step 8

Now we will work on the footer page Open your footer.php and copy the footer tag from the index.html into your footer.

CONGRATULATION! You are now finish and should have your first wordpress theme completed. I did not go over some of the pages because what you’ve learn from this tutorial can be applied to other pages in wordpress. If you would like for me to create a screencast for part 3 please leave a comment letting me know and will create a screen cast for part 3. Hard work was put into this series and I truly hope it helped you beginners out there understand wordpress better. I did not go over the comment.php page but you can check this article from Darren Hoyt and it will teach you all about the comment.php page. Thanks for following this tutorial, if you have any question leave a comment and I will respond asap.