Themetation

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!

Share it!

('¡¯)