The eighth in this series of tutorials is adding a new template page that will display selected posts by category, using just the page and category slugs.

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.

We will need to do the following steps, create the template page, and add code to return the posts from WordPress.

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 not require the sample theme.

In the download for this tutorial are all the files, 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: Tutorial 2 Page Category (901)

The way this template is used is by creating a page, lets use “Latest News” WordPress would create a page slug ‘latest-news’, we could add text to the page as a normal page, and then we apply our new template page.

We add, Posts > Categories > “Latest News” so we now have matching page and category slugs, as we add posts to the “Latest News” category they will appear under our page content.

Page Category Template

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

<?php
/**
 * Template Name: One Category
 *
 * A custom page template Page Name = Category Name .
 *
 * The "Template Name:" bit above allows this to be selectable
 * from a dropdown menu on the edit page screen.
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
get_header(); ?>

  <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(); ?>>
     <div>
      <?php the_content(); ?>
     </div><!-- .entry-content -->
    </div><!-- #post-## -->
<?php endwhile; ?>

   <?php
   /*
   Run the loop to output the posts.
   Store the page to use later
   */
   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. ''; query_posts($query);
   //Get the lines
   get_template_part( 'loop', 'index' );
   //Reset our page to get the sidebar
   $post = $tmp_post;
   ?>
   </div><!-- #content -->
  </div><!-- #container -->

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

All we have done here is used a query to return the posts from WordPress, note that we assign the page $post to a $tmp_post and reset this after the loop.

The code in lines 31 to 41 finds the category id with the same slug name, then creates a query to return the posts, there are two ways to manage the posts, one would be to add aditional arguments in the query, the second is manage to number of posts in the admin area.

If we wanted our posts the oldest first like we do on this website, we would add an argument to the query to, $query= ‘cat=’ . $catid. ‘&order=ASC’; query_posts($query);

We will leave you to look at other options, remember you only need to change the template name on line three and save the page with a new name for a new template.

If we want to use our two column template part we would change get_template_part( ‘loop’, ‘index’ ); to call our template part get_template_part( ‘loop’, ‘columns’ ); 

Here is a single column example, where the page and posts have slugs of blog.

In the next tutorial at last we will be creating the test websites main page.