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!

Find out more in archives or subscribe rss feed for future updates.

Sponsor:

91 Comments | RSS 2.0 | Trackback Add comment
From old to new:
  1. Faye July 18th, 2008
  2. sara September 4th, 2008
  3. Joe September 5th, 2008
  4. noli September 21st, 2008
  5. Jim Child November 11th, 2008
  6. learning November 23rd, 2008
  7. kailoon November 23rd, 2008
  8. Bojkot December 3rd, 2008
  9. kailoon December 3rd, 2008
  10. Bobyone December 8th, 2008
  11. redpony March 11th, 2009
  12. redpony March 11th, 2009
  13. kailoon March 13th, 2009
  14. Marius March 18th, 2009
  15. system32 April 11th, 2009
  16. Hiren Modi April 28th, 2009
  17. Venkat May 12th, 2009
  18. kailoon May 13th, 2009
  19. Bob July 10th, 2009
  20. kailoon July 10th, 2009
  21. JA July 19th, 2009
  22. sofia July 22nd, 2009
  23. esck21 July 28th, 2009
  24. AuraRinoa August 20th, 2009
  25. Sandi December 16th, 2009
  26. Dan January 5th, 2010
  27. Mahmoud January 6th, 2010
  28. roni March 17th, 2010
  29. Ted April 29th, 2010
  30. kalieta June 22nd, 2010
  31. pat June 24th, 2010
  32. Avangelist August 5th, 2010
  33. Eye Webmaster August 13th, 2010
  34. Colin September 2nd, 2010
  35. Dahlia Durphey September 17th, 2010
  36. Chris October 15th, 2010
  37. rumibepari October 28th, 2010
  38. Zee October 29th, 2010
  39. dreb November 3rd, 2010
  40. frizky November 26th, 2010
  41. Fitri PMRELOAD December 4th, 2010
  42. Sean December 8th, 2010
  43. Sean December 8th, 2010
  44. Jasmine December 24th, 2010
  45. Masamune January 9th, 2011
  46. zocX January 14th, 2011
  47. Masamune January 14th, 2011
  48. Jignesh Parmar February 10th, 2011
  49. zifan March 1st, 2011
  50. zifan March 2nd, 2011
  51. madfdstz1 March 12th, 2011
  52. Saemie Chouchane March 22nd, 2011
  53. Danepliz April 28th, 2011
  54. Chetena June 14th, 2011
  55. jamezou July 20th, 2011
  56. طراحی وب سایت August 1st, 2011
  57. benn August 6th, 2011
  58. kassy August 18th, 2011
  59. Renji August 27th, 2011
  60. Mulberry Alexa Replica September 24th, 2011
  61. gazduire web October 9th, 2011
  62. ifliandry October 23rd, 2011
  63. tshepo mbele November 13th, 2011
  64. Dodoo December 6th, 2011
  65. WTF December 15th, 2011
  66. Sokobanja January 4th, 2012
  67. Hunter January 21st, 2012
  68. Mike February 11th, 2012
  69. Žan Marolt February 28th, 2012
  70. suresh May 20th, 2012
  71. treant May 30th, 2012
  72. bessy June 28th, 2012
  73. الصحف المصرية October 29th, 2012