Creating a Custom Page Template

Topics covered in this WordPress tutorial:

Creating a custom template, Creating a custom query in the loop

Exercise Preview

Exercise Overview

While page.php is the default template for pages, WordPress allows you to create as many custom templates as you like. In this exercise, we will create a custom template for a page called Featured Car. Using a custom query for the loop, we can use it to show only posts assigned to a specific category.

Adding a Featured Car Blog Post

1. Open Chrome and go to:
   • Mac: localhost:8888/mrp/wp-admin
   • Windows: localhost/mrp/wp-admin

2. If asked, log in.

3. On the left side of the Dashboard, go to Posts > Add New.

4. In the title field, type: VW Bug

5. Click the Visual tab.

6. Click the Add Media button to upload an image (make sure you do not place the cursor in the content area).

7. Click the Upload Files tab, then click the Select Files button.

8. Navigate to Desktop > Class Files > WordPress.org Class > Gallery.

9. Double–click vw-11.jpg.

10. After the image loads, next to Alt Text, type: VW Bug

11. Choose the following options for the image:

    Alignment:	None
    Link To:	None
    Size:	Full Size

12. Click the Insert into post button.

13. On the right, at the bottom of the Categories module, click the + Add New Category link.

14. Type Featured Car and click the Add New Category button.

15. Make sure the Featured Car category is checked.

16. Click the Publish button.

17. At the top, click the Monteith Restoration & Performance title and navigate to the Blog page to see the new post.

    Because we added the image at full size, it hangs outside of the main content area into the sidebar! That’s OK, we’re going to remove the Featured Car posts from the main blog so they will not show up there.

Removing a Category from the Loop

1. We need to find out what ID WordPress assigned to the Featured Car category. Back in the Dashboard, on the left side go to Posts > Categories.

2. On the right, in the list of categories, hover the mouse over the name of the category Featured Car.

3. While still hovering over the title, look in the status bar at the very bottom of the browser window. In the address, notice the part near the end that says &tag_ID= and then a number (yours may be different from the screenshot).

   

   That’s the ID for the category. Write down your number so you don’t forget it.

4. Switch to your code editor.

5. Open index.php from the mrpTheme folder.

6. Just above the Loop (around line 4), type the following code in bold, but instead of the number 5, type the ID number you wrote down for the Featured Car category:

   <h1><?php wp_title(''); ?></h1>
   <div id="primary">
      <?php query_posts( 'cat=-5' ); ?>
      <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
         <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
   

   NOTE: This tells WordPress to look for all the posts and to get all of them except the Featured Car category.

7. Save the file.

8. Switch back to Chrome.

9. At the top, click the Monteith Restoration & Performance title and navigate to the Blog page. Awesome, the Featured Car post is gone!

Creating the Custom Template

We want our new template to only contain posts that are in the Featured Car category. Aside from that, it will be very similar to the index.php page, so it will be best to make a duplicate.

1. Switch back to your code editor. You should still have index.php open.

2. Save the file as featured-car.php into the mrpTheme folder located here:
   • Mac: Hard Drive > Applications > MAMP > htdocs > mrp > wp-content > themes > mrpTheme
   • Windows: C: > xampp > htdocs > mrp > wp-content > themes > mrpTheme

   Unlike index.php and page.php, custom templates don’t have to have a particular filename. The way we tell WordPress that this is a custom page template is by adding some code to the top of the file.

3. At the top of the page, add the following code in bold:

   <?php
   /*
   Template Name: Featured Car
   */
   ?>
   <?php get_header(); ?>
      <h1><?php wp_title(''); ?></h1>
   

4. Save the file.

5. Back in Chrome, navigate to the WordPress Dashboard.

6. On the left side, go to Pages > Add New.

7. In the title field, type: Featured Car

8. On the right side of the page, in the Page Attributes module, click the Template menu and choose Featured Car. That’s the template you just created!

9. Click Publish.

Adding the New Page to the Nav Menu

The new page won’t show up in our navigation until we add it to the custom menu.

1. On the left, go to Appearance > Menus.

2. In the Pages module, check the box next to Featured Car and click Add to Menu.

3. In the Menu Structure list, drag Featured Car so it’s just below Blog.

4. Click the Save Menu button.

5. At the top, click the Monteith Restoration & Performance title and navigate to the Featured Car page to see that it worked.

   Right now, the page is showing the same content as index.php. We now have to customize the loop in the Featured Car template so it displays blog posts from the Featured Car category.

Adding a Custom Loop to the New Template

1. Switch back to your code editor. You should still have featured-car.php open.

2. Find this line (in your code, the actual number is the ID you found earlier) around line 9:

   <?php query_posts( 'cat=-5' ); ?>
   

3. Get rid of the hyphen (-) so that the code segment now reads:

   <?php query_posts( 'cat=5' ); ?>
   

   This is the opposite of the query we added to index.php. In this case, we’re telling WordPress to display ONLY the posts in the Featured Car category.

Changing the Number of Posts Displayed

We would also like this page to show only the most recent featured car, rather than listing 10 of them on the same page.

However, our global setting for post pages is to show 10 posts per page. Luckily, we can customize this with our custom query too!

1. Add the following code in bold to the custom query:

   <?php query_posts( 'cat=5&posts_per_page=1' ); ?>
   

   This way, only one post will be listed on this page at a time even if we were to mark more posts with the Featured Car category.

2. Save the file.

3. Switch back to Chrome and reload the Featured Car page.

   Cool, only one car! But the car photo is still bleeding into the sidebar. Let’s remove the sidebar from this page so the focus is on the image of the car.

Removing the Sidebar

1. Switch back to your code editor.

2. In featured-car.php, near the end of the file, around line 24, delete the entire line:

   <?php get_sidebar(); ?>
   

3. Save the file.

4. Switch back to Chrome and reload the page.

   The sidebar is gone, but the main content area (the colored background behind the photo) is still the same width as before. Let’s fix that next.

Changing the Width of the Main Content Area

1. Switch back to your code editor.

   We need to add a CSS style to the main content area to make it the full width of the page. In featured-car.php, we can see that the main content area is a div with an ID of primary. If we add a rule to our style sheet to make this div wider, it will apply the same styling to every page! So we need to add a class to the div on this template so that we can target it specifically.

2. Add the following code in bold to the opening tag of the primary div (around line 8):

   <h1><?php wp_title(''); ?></h1>
   <div id="primary" class="featured-car-primary">
      <?php query_posts( 'cat=5&posts_per_page=1' ); ?>
   

3. Save the file.

4. Open style.css from the mrpTheme folder.

5. After the last rule (around line 479), add the following rule:

   #mainContent #primary.featured-car-primary {
      width: 100%;
   }
   

6. Save the file.

7. Switch back to Chrome and reload the page to see your work!

Bonus: If You Finish Early

Try Bonus Exercise B5: Adding Custom Fields, if you’ve finished early and want a challenge. This will get you going with using custom fields, which are incredibly useful for using WordPress as a CMS (beyond just a blog or the type of posts/page content we’ve shown so far).