Nice2All

We have just about reached the end of this short series on developing your own WordPress theme. All that is left to do at this stage is to add a few finishing touches to the theme.

You now have to add 5 additional pages to really make your theme fully functional. I will provide the code for all these pages as well as tell you what the pages are needed for. You need to remember that the styling of the actual theme has basically been ignored in this series since part 2. The actual styling is something that you will have to work out for yourself as everyone will require their own individual styling.

The first page you will need to add is called 404.php. This page appears if someone using your theme types in a URL that does not exist. The code is as follows:

<?php get_header(); ?>
	<div class="container">
        <div id="content">
			<h2>The page you were looking for could not be found.</h2>
			<p>I am sorry about this. Please try another search or try one of the following pages;</p>
              <ul class="em-above">
				<li><a href="<?php echo get_option('home'); ?>/" title="Home">Home</a></li>
				<?php wp_list_pages('title_li='); ?>
			</ul>
		</div><!--content-->
		<?php get_sidebar(); ?>
		<?php get_footer(); ?>

You now need a page called archive.php. This file is opened when someone clicks on any of your archive, category or tag links. The basic code for this page is as follows:

<?php get_header(); ?>
	<div class="container">
		<div id="content">
			<?php if (have_posts()) : ?>
 	  			<?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
 	  			<?php /* If this is a category archive */ if (is_category()) { ?>
					<h2>Archive for the &amp;amp;#8216;<?php single_cat_title(); ?>&amp;amp;#8217; Category</h2>
 	  			<?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>
					<h2>Posts Tagged &amp;amp;#8216;<?php single_tag_title(); ?>&amp;amp;#8217;</h2>
 	  			<?php /* If this is a daily archive */ } elseif (is_day()) { ?>
					<h2>Archive for <?php the_time('F jS, Y'); ?></h2>
 	  			<?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
					<h2>Archive for <?php the_time('F, Y'); ?></h2>
 	  			<?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
					<h2>Archive for <?php the_time('Y'); ?></h2>
	  			<?php /* If this is an author archive */ } elseif (is_author()) { ?>
					<h2>Author Archive</h2>
 	  			<?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) &amp;amp;&amp;amp; !empty($_GET['paged'])) { ?>
					<h2>Blog Archives</h2>
 	 			<?php } ?>
				<div class="navigation">
					<div class="alignleft"><?php next_posts_link('&amp;amp;laquo;&amp;amp;laquo; Older Entries') ?></div>
					<div class="alignright"><?php previous_posts_link('Newer Entries &amp;amp;raquo;&amp;amp;raquo;') ?></div>
				</div>
				<?php while (have_posts()) : the_post(); ?>
					<h3 class="em-above" id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
					<?php the_time('l, F jS, Y') ?>
					<div class="em-above">
						<?php the_content() ?>
					</div>
					<p class="metadata"><?php the_tags('Tags: ', ', ', ' | '); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></p>
				<?php endwhile; ?>
				<div class="navigation">
					<div class="alignleft"><?php next_posts_link('&amp;amp;laquo; Older Entries') ?></div>
					<div class="alignright"><?php previous_posts_link('Newer Entries &amp;amp;raquo;') ?></div>
				</div>
			<?php else : ?>
				<h2>Not Found</h2>
			<?php endif; ?>
		</div><!-- end of content -->
		<?php get_sidebar(); ?>
		<?php get_footer(); ?>

Now you need to create a file called page.php. This is the file that is called everytime someone opens one of the pages in your theme. The following is the basic code:

<?php get_header(); ?>
	<div class="container">
		<div id="content">
			<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
				<div id="post-<?php the_ID(); ?>">
					<h2><?php the_title(); ?></h2>
					<div class="em-above">
						<?php the_content('<p class="serif">Read the rest of this page &amp;amp;raquo;</p>'); ?>
						<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
					</div><!--em-above-->
				</div>
			<?php endwhile; endif; ?>
				<div class="metapage">
					<?php edit_post_link('Edit', '<p>', '</p>'); ?>
				</div><!--metapage-->
			</div><!--content-->
			<?php get_sidebar(); ?>
			<?php get_footer(); ?>

I am going to give you the basic code to add pages with comments to a site using your theme. The following is the required markup:

<?php
/*
Template Name: Page With Comments Template
*/
?>
<?php get_header(); ?>
	<div class="container">
		<div id="content">
			<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
				<div id="post-<?php the_ID(); ?>">
					<h2><?php the_title(); ?></h2>
					<div class="em-above">
						<?php the_content('<p class="serif">Read the rest of this page &amp;amp;raquo;</p>'); ?>
						<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
					</div><!--em-above-->
				</div>
				<?php comments_template(); ?>
			<?php endwhile; endif; ?>
				<div class="metapage">
					<?php edit_post_link('Edit', '<p>', '</p>'); ?>
				</div><!--metapage-->
			</div><!--content-->
			<?php get_sidebar(); ?>
			<?php get_footer(); ?>

The last page you will need for this series is called search.php. This is the page that shows the results of any search performed on the site. The following is the code:

<?php get_header(); ?>
	<div class="container">
    	<div id="content">
			<h2 class="em-below">Search Results</h2>
			<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
				<h3><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">  <?php the_title(); ?></a></h3>
				<div class="author"><p>Posted by <?php the_author('name') ?> - <?php the_time('d/m/y') ?> at <?php the_time('h:m a') ?></p></div>
				<p class="metadata"><?php the_tags('Tags: ', ', ', ' | '); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></p>
			<?php endwhile; else: ?>
				<h2>Sorry, no posts matched your criteria</h2>
				<p>I am sorry about this. Please try another search or try one of the following pages;</p>
        		<ul class="em-above">
					<li><a href="<?php echo get_option('home'); ?>/" title="Home">Home</a></li>
					<?php wp_list_pages('title_li='); ?>
				</ul>
			<?php endif; ?>
			<div class="navigation">
				<div class="navigation-left"><?php next_posts_link('&amp;amp;laquo;&amp;amp;laquo; Older Entries') ?></div>
				<div class="navigation-right"><?php previous_posts_link('Newer Entries &amp;amp;raquo;&amp;amp;raquo;') ?></div>
			</div><!--end navigation-->
		</div><!--content-->
		<?php get_sidebar(); ?>
		<?php get_footer(); ?>

Once this page has been saved you can check it in WordPress. If you create a new page you can scroll down to a portion called ‘Page Template’ on the WordPress page. In this area you will find a selection box in which you can choose the type of page you want to create. If you have done everything correctly you will have an option to create a page with comments available to you.

You now have a fully functional WordPress theme. There is only one little detail you need to finalize. You need a nice screen shot of your theme in use. This screen shot should be sized to 240 X 178px. This image must be saved as screenshot.png to the main directory of the theme. This is the graphic you will see in the back end of WordPress when you select your theme for use on a WordPress blog.

Obviously I have not had a detailed look at everything involved in the process of developing a WordPress theme. The parts I have left out are the parts where you have to use your own creativity to create the styling that you require from your theme.

Happy coding.