(For more resources related to this topic, see here.)

Adding more template files to your theme

Let’s say our site needed to display posts from a specific category differently from the rest of the site, or we needed the home page to work differently, or maybe we wanted to have more control over how search results or 404 pages were displayed.

With template files, we can do all that.

A search.php file for search results

WordPress handles search results pretty well already. Let’s see what’s displayed in our theme if we try to search for example post (Note that we’ve now added a Search widgetto the right-hand side footer widget area to make this possible):

As you can see, it’ s using our index.php template file, so the heading reads This Month:.We’d rather make it more obvious that these are search results.

Now let’s see what happens if we search for something that can’t be found:

Again, the heading isn’t great. Our theme gives the user a message telling them what’s happened (which is coded into index.php as we’ll see), but we could beef that up a bit,for example by adding a list of the most recent posts.

Time for action – creating a search.php template file

Let’s create our search.php file and add some code to get it working in the way we’dlike it to:

1. In your theme folder, make a copy of index.php and call it search.php.

2. Find the following code near the top of the file:

   <h2 class="thisMonth embossed" style="color:#fff;">This Month:</
   h2>

3. Edit the contents of the h2 element so the line of code now reads:

   <h2 class="thisMonth embossed" style="color:#fff;">Search
   results:</h2>

4. Find the loop. This will begin with:

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

5. The first section of the loop displays any posts found by the search, leave this as itis. The second section of the loop specifies what happens if no search results are found. It’s in the following lines of code:

   <?php else : ?>
   <h2 class="center">Not Found</h2>
   <p class="center">Sorry, but you are looking for something
   that isn't here.</p>
   <?php get_search_form(); ?>
   <?php endif; ?>

6. Underneath the line that reads <?php get_search_form(); ?> and before <?php endif; ?>, add the following lines of code:

   <?php endif; ?>, add the following lines of code:
   <h3>Latest articles:</h3>
   <?php $query = new WP_Query( array ( 'post_type' => 'post', 'post_
   count' => '5' ) );
   while ( $query->have_posts() ) : $query->the_post(); ?>
   <ul>
   <li>
   <a href="<?php the_permalink(); ?>">
   <?php the_title(); ?>
   </a>
   </li>
   </ul>
   <?php endwhile; ?>

7. Save your search.php file and try searching for something which isn’t included in the site.

What just happened?

We created a new template file called search.php, which will be used to display theresults of a site search. We then edited the heading to make it clearer, and added somecode to display the latest posts if the search had no results.

We actually did something pretty advanced, we added a second loop inside our original loop.

Let’s have a look at the code we added after the search form:

• The function $query = new WP_Query() runs a new query on the database, based on the WordPress WP_Query function, which is the function you should use when running a loop inside the main loop.

• We gave WP_Query the following parameters:

  • ‘post_type’ => ‘post’ – this ensures that the query will only look for posts, not for any other kind of content.

  • ‘post_count’ => ‘5’ – this tells WordPress how many posts to show. Five, in this case.

• We then output the title of each post with the php the_title() tag whichwe’ve already used higher up in the loop to display post titles. We wrapped this in a link inside a list item. The link uses the_permalink() to link to the blog post whose title is displayed. This is very similar to the main loop.

• Finally, we added endwhile() to stop this loop. This doesn’t replace theendwhile() at the end of our main loop, which is higher up in the file.

For more on WP_Query and how to use it to create multiple loops, see http://codex.wordpress.org/Class_Reference/ WP_Query.

Let’s have a look at what our users will see when they do a search now. First,a successful search:

Next, an unsuccessful search:

So that’s how we set up a template file for search results. Our search page is only displayingtwo posts because that’s all we have on our site. If there were more than five, it would justdisplay the five most recent.

Now let’s set one up to display some pages differently.

Creating a custom page template

In many themes, all pages will need the same basic layout and content, with the same sidebarsand footer and the same styling. But sometimes you may need some pages to look different.

For example, you might want to use different sidebars in different pages, or you might wanta different layout. Here we’ll look at the second of those two options.

Time for action – creating a custom page template

Imagine that you have some pages containing a lot of content which you want to displayacross the full width of the page, without the sidebar getting in the way. The way to handlethis is to create a page template which doesn’t include the sidebar, and then select thatpage template when you’re creating or editing those pages. Let’s try it out.

1. In the same folder as your other theme files, make a copy of your page.php file and call it page-no-sidebar.php.

2. At the very top of the file, above the line reading <?php get_header(); ?>,insert the following code:

   <?php
   /*
   Template Name: Full width page without sidebar
   */
   ?>

3. Find the following line of code:

   <div class="content left two-thirds">

4. Edit it so it reads:

   <div class="content left full">

5. Now find the line that reads <?php get_sidebar(); ?> and delete it.

6. Save your file.

What just happened?

We created a new template file called page-no-sidebar.php, and edited it to displaycontent differently from our default page template:

• We edited the classes for our .content div, using the object-oriented approach to styling used by the layout-core.css file. This will apply styling for the .fullclass to this div, so that it displays a full width instead of two-thirds of its containing element.

• We removed the line calling the get_sidebar include, so that it won’t be displayed on any pages using this template.

The lines we added at the top are essential for WordPress to pick up on our page templateand make it available in the WordPress admin. Page editors will see a drop-down list of pagetemplates available, and the name we defined in the template is what they’ll see in that list,as shown in the following screenshot:

As you can see, in the Page Attributes box to the right-hand side, a new select box has appeared called Template. Our new page template is listed in that select box, along withDefault Template, which is page.php.

Now we can try it out by assigning this template to a page and seeing how it looks.