WordPress Page Template

Hello Readers,

I am a guest blogger for WebDevLounge. My name is Muhammad Haris and I am here to teach you how can you build custom wordpress page template.

WordPress page template with custom fields is the power to customize wordpress completely. With the combination, you can build different types of systems with WordPress including but not limited to Portfolios and CSS Galleries.

Today, our goal will be to achieve a similar layout like Tom Huveners Work page.

First of all, create a category called “Work”. Remember the ID of the category. Lets assume the category ID is 3 for this tutorial.

Now, create a file called work.php in your theme folder (wp-content/themes/x-theme/work.php) and open it for editing.

Remember, wordpress reads the theme file comments to find the page template. You are required to have the following PHP comment to your page template file otherwise wordpress won’t detect the file as a page template.

<?php
/*
Template Name: Work
*/
?>

No template is completed without header. Next, add get_header(); function to the file for header.

<?php get_header(); ?>

Now, to output all posts only form “Work” category (ID# 3), use query_posts(); function with the famous wordpress loop. Here’s an example.

query_posts('cat=3&posts_per_page=-1');
if (have_posts()) : while (have_posts()) : the_post();
?>
  <div class="site">
		<img src="<?php echo get_post_meta($post->ID, 'image_1', true); ?>" height="162px" width="244px" class="col-1" alt="<?php the_title(); ?>" />
		<img src="<?php echo get_post_meta($post->ID, 'image_2', true); ?>" height="162px" width="244px" class="col-2" alt="<?php the_title(); ?>" />
    <div class="col-3">
      <h3><?php the_title(); ?></h3>
      <?php the_excerpt(); ?>
      <a href="<?php echo get_post_meta($post->ID, 'project_url', true); ?>"><img src="<?php bloginfo('template_url'); ?>/images/open_project.jpg" alt="Open Project" class="open_project" /></a>
    </div>
    <hr />
  </div>
<?php endwhile; ?>
<?php else: ?>
  <p>Sorry, portfolio coming soon!</p>
<?php endif; ?>

The argument within query_posts('cat=3&posts_per_page=-1'); orders it to fetch all posts (posts_per_page=-1) from category ID# 3 (cat=3).

get_post_meta(); function is used to fetch values of custom fields of the post. The function requires 3 arguments post id, key name of the custom field and whether to return the value as a string (true) or array (false).

According to our goal, we need two project images and project url. We added the code to read values of project image #1 key (image_1), project image #2 key (image_2) and project url key (project_url).

Custom fields makes it possible to make different kind of systems with WordPress. If you’re creative, you can think of many ways of using custom fields.

Last but not least, add the following last line to the template.

<?php get_footer(); ?>

We have successfully completed writing our custom page template which can be used for portfolios.

We’re not done yet. We need to use the template.

To use the template, create a page and select “Work” from the dropdown list. There is no limitation for page title and permalink. You can even add content to it through admin panel.

Now, you need to add content to your newly created page.  Here are the steps to be followed:

  1. Add a title.
  2. Add content.
  3. Select “Work” from the Category.
  4. Jump to Custom Fields.
  5. Add Image 1 custom field. Key: image_1 Value: Your project first image URL.
  6. Add Image 2 custom field. Key: image_2 Value: Your project second image URL.
  7. Add Project URL custom field. Key: project_url Value: Your project URL.
  8. Click Save or Publish (depending upon your choice).
  9. Smile!

Voila! We’re done. I hope you like my very first tutorial. I am going to keep writing tutorials. If you don’t understand any part of the tutorial, please comment and I’ll help you out.