How To Create WordPress Themes From Scratch Part 3b

July 17th, 2008 by under Tips

continue from part 3. You still can refer to this link when you are doing it. Let’s continue then.

Sections that we will cover in this chapter:

  1. header.php
  2. sidebar.php
  3. about.php – a custom file for the about section in the sidebar.
  4. footer.php
  5. index.php
  6. featured-post.php – a custom file for the featured posts.
  7. page.php
  8. single.php
  9. comments.php
  10. archives.php, links.php
  11. search.php, searchform.php
  12. function.php
  13. image.php

Implementation

page.php

A page template that we use to create pages. Not much different with the index.php.

<?php get_header(); ?> /* get the header */
	<div id="content">
		<div id="left-col">
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?> /* if have post */
		<div class="post" id="post-<?php the_ID(); ?>">
		<h2><?php the_title(); ?></h2> /* page title*/
			<div class="entry">
				<?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?> /* page content */ 
				<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
			</div>
		</div>
		<?php endwhile; endif; ?> /* end loop */
	<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?> /* appear when admin is login */
</div>
<?php get_sidebar(); ?> /* get the sidebar */
</div>
</div>
<?php get_footer(); ?> /* get the footer */

single.php

Single.php used to display the single post with the comment and respond section. I will only show the important part for it.


	<?php if (have_posts()) : while (have_posts()) : the_post(); ?> /* if have posts */
	<div class="post" id="post-<?php the_ID(); ?>">
		<div class="post-info">
		<img src="<?php bloginfo('template_directory') ?>/images/authors/<?php the_author_ID()?>.jpg" alt="<?php the_author() ?>" alt="<?php the_author() ?>" title="<?php the_author() ?>" />
		<em><?php the_time('F jS, Y') ?></em>
		<span class="post-tag"><?php the_tags('', ' . ', ''); ?></span>
		</div>

		<div class="entry">
		<h2><?php the_title(); ?></h2>
		<?php the_content(); ?> /* load post content in full version */
		</div>
        
	<?php comments_template(); ?>  /* load the comment section */

comments.php

Comments section to display all the comments in a single post. Normally, we only edit start from the line 18.

<div id="comments">
<?php if ($comments) : ?>  /* if comments exist */
<h3 id="comment-title">Comments</h3>
	<ol>
	<?php foreach ($comments as $comment) : ?> /* comments loop start */
		<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
        <div class="comment-data">
		<?php comment_text() ?> /* comments content*/
		<?php if ($comment->comment_approved == '0') : ?> /* if comment is under moderation, this line will be shown */
		<em>Your comment is awaiting moderation.</em>
		<?php endif; ?>
        <?php edit_comment_link('edit','&nbsp;&nbsp;',''); ?> /* the edit link for the admin*/
        </div>
        
        <div class="comment-info">
            <?php echo get_avatar( $comment, 80 ); ?> /* to get the avatar of the commentor */
            <br /><strong><?php comment_author_link() ?></strong><br /><?php comment_date('F jS, Y') ?> 
        </div>
        </li>
	<?php
		/* Changes every other comment to a different class */
		$oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : ''; /* different style for the class named as "alt" */
	?>
	<?php endforeach; /* end for each comment */ ?> /* comments loop end*/
	</ol>
 <?php else : // this is displayed if there are no comments so far ?>
	<?php if ('open' == $post->comment_status) : ?>
		<!-- If comments are open, but there are no comments. -->
	 <?php else : // comments are closed ?>
		<!-- If comments are closed. -->
		<p class="nocomments">Comments are closed.</p>
	<?php endif; ?>
<?php endif; ?>

Right after this, there is the comment form which we do not do much about it.

archives.php, links.php

archives and links are both just page template to display the content. I will only show the archives template below.

<?php
/*
Template Name: Archives (to display the page template name which you can select from the admin panel when creating a page.
*/
?>
<div class="post">
	<h2>Archives by Month:</h2>
	<ul>
	<?php wp_get_archives('type=monthly'); ?> /* to list the archives in monthy */
	</ul>
	<h2>Archives by Subject:</h2>
	<ul>
	<?php wp_list_categories('title_li='); ?>  /* to list the categories without title */
	</ul>
</div>

search.php, searchform.php

Search.php is to display the search result while the searchform.php only contain the searchform that we used. below is the searchform.

<div id="searchform">
<form method="" action="<?php bloginfo('url'); ?>/">
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
<input type="submit" id="searchsubmit" value="&nbsp;" />
</form></div>

function.php

We use it to define the function we need in our theme. In our case, I only use it for the sidebar definition.

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'sidebar1'));
register_sidebar(array('name'=>'sidebar2'));
?>

image.php

This is a new file since wordpress 2.5. It is a special page template to display the photo gallery that we created. Actually, there is not much different with the normal single.php template. Check below.

<?php if (have_posts()) : while (have_posts()) : the_post(); ?> /* if have posts */

	<div class="post" id="post-<?php the_ID(); ?>"> 
	<h2><a href="<?php echo get_permalink($post->post_parent); ?>" rev="attachment"><?php echo get_the_title($post->post_parent); ?></a> &raquo; <em><?php the_title(); ?></em></h2>
			
	<p class="attachment"><a href="<?php echo wp_get_attachment_url($post->ID); ?>"><?php echo wp_get_attachment_image( $post->ID, 'medium' ); ?></a></p> /* the medium size image */
        <div class="caption"><?php if ( !empty($post->post_excerpt) ) the_excerpt(); // this is the "caption" ?></div> /* the photo caption */

	<?php the_content('<p class="serif">Read the rest of this entry &raquo;</p>'); ?>

	<div class="navigation"> /* image navigation for the gallery */
		<div class="alignleft"><?php previous_image_link() ?></div>
		<div class="alignright"><?php next_image_link() ?></div>
	</div>

Conclusion and spread the news!

Well, after a long tutorial. Our course is end here. I hope that you can learn something from this series of tutorial. I will be glad if you can help me to spread the tutorial to others. But, remember to link it back to the original post. Thanks. Ok, now you can head over to the new free theme – superfresh in the next post for the demo and download. Cheers!

91 Comments | RSS 2.0 | Trackback Add comment
From old to new:
  1. rumibepari October 28th, 2010
  2. Zee October 29th, 2010
  3. dreb November 3rd, 2010
  4. frizky November 26th, 2010
  5. Fitri PMRELOAD December 4th, 2010
  6. Sean December 8th, 2010
  7. Sean December 8th, 2010
  8. Jasmine December 24th, 2010
  9. Masamune January 9th, 2011
  10. zocX January 14th, 2011
  11. Masamune January 14th, 2011
  12. Jignesh Parmar February 10th, 2011
  13. zifan March 1st, 2011
  14. zifan March 2nd, 2011
  15. madfdstz1 March 12th, 2011
  16. Saemie Chouchane March 22nd, 2011
  17. Danepliz April 28th, 2011
  18. Chetena June 14th, 2011
  19. jamezou July 20th, 2011
  20. طراحی وب سایت August 1st, 2011
  21. benn August 6th, 2011
  22. kassy August 18th, 2011
  23. Renji August 27th, 2011
  24. Mulberry Alexa Replica September 24th, 2011
  25. gazduire web October 9th, 2011
  26. ifliandry October 23rd, 2011
  27. tshepo mbele November 13th, 2011
  28. Dodoo December 6th, 2011
  29. WTF December 15th, 2011
  30. Sokobanja January 4th, 2012
  31. Hunter January 21st, 2012
  32. Mike February 11th, 2012
  33. Žan Marolt February 28th, 2012
  34. suresh May 20th, 2012
  35. treant May 30th, 2012
  36. bessy June 28th, 2012
  37. الصحف المصرية October 29th, 2012
Nucleo, Customizable Vector Icons