The ninth in this series of tutorials is adding a main template page that will display selected posts by category, using the page and category slugs, order the posts acending and add a custom post header.

If we follow the steps in this tutorial we will be able to add our new template page to our WordPress theme, with conditional posts based on the category and page slug ordered asc and a nice post header section.

We will need to do the following steps, create the template page, and add styles, code to return the posts from WordPress and the post header from the options page using the WordPress call get_option().

If you have not worked through the first tutorial you can download the starting theme from the downloads page or from getting started two, this code does require the sample theme and the options page tutorial to be present.

In the download for this tutorial are all the files, in the changes folder is the styles to add to style.css and in the final folder is the page file so we can compare our code or copy the page file to our theme.

Download Support Files: [download id="36"]

Stylesheet

In the changes folder find the file called lesson-9-style.css, this is the code below and should be added to our child themes style.css file.

/* Lesson 9 style Starts here */
#main {
 padding:10px 0 0;
}

.home-title
{
 width: 100%;
 padding: 0 10px;
 background: #f1f1f1;
 border: solid 1px #ccc;
 margin-bottom: 20px;
}
/* Lesson 9 style ends here */

This is quite easy, we are reducing the top padding on the main element, then we have a container for our home title, this is a box that will sit under the slideshow with a custom title over the posts.

Page Main Template

In the child themes folder we create a new file called page-main.php, add this code and save the file, or copy the file contents from the final folder.

<?php
/**
 * Template Name: Home three Column
 *
 * A custom page template with cimy slideshow and two post column content.
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
*/

get_header(); ?>

  <?php /* Add our Slide Show Here */ ?>
  <?php get_template_part( 'slideshow', 'cimy' ); ?>

  <div id="container">
   <div id="content" role="main">

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
     <?php if ( is_front_page() ) { ?>
      <h2 class="entry-title" style="display:none;"><?php the_title(); ?></h2>
     <?php } else { ?>
      <h1 class="entry-title" style="display:none;"><?php the_title(); ?></h1>
     <?php } ?> 

     <div class="entry-content">
      <?php the_content(); ?>
      <?php wp_link_pages( array( 'before' => '<div>' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
      <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span>', '</span>' ); ?>
     </div><!-- .entry-content -->
    </div><!-- #post-## -->

    <?php comments_template( '', true ); ?>

<?php endwhile; ?>

   <?php $shortname = 'drcms'; ?>
   <div class="home-title">
    <h1 style="margin: 0"><?php echo get_option($shortname.'_home_title'); ?></h1>
   </div>

   <?php
   /*
   Run the loop to output the posts.
   Store the page id to use later
   This will show oldest First
   */
   global $post;
   $tmp_post = $post;
   //Create a query for the category
   $pageslug = $post->post_name;
   $catslug = get_category_by_slug($pageslug);
   $catid = $catslug->term_id;
   $query= 'cat=' . $catid. '&order=ASC'; query_posts($query);
   //Get the lines in two columns, for single column use get_template_part( 'loop', 'index' );
   get_template_part( 'loop', 'columns' );
   //Reset our page to get the sidebar
   $post = $tmp_post;
   ?>

   </div><!-- #content -->
  </div><!-- #container -->  

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Notice we have called the cimy slideshow and lines 40 to 42 here we have added our posts header, using the get_option()

We wanted our posts the oldest first so we added an argument to the query to look at line 57 , $query= ‘cat=’ . $catid. ‘&order=ASC’; query_posts($query);

To use our two column template part,  get_template_part( ‘loop’, ‘columns’ );

Options

Add a title in the settings > options to display on the main (Home) page

The all we need to do is apply this template to a page that has posts with the same slug, on our sample website we have a page called home and four posts with a category also called home.

We will be adding footer text and doing a tidy up of our theme in the last two posts, and switching off some of the features we do not need.