How To: Create a Custom Page Template

Custom page templates are the easiest way to make a whole new web design – inside of Thesis. Imagine, all of this space could be yours to code however YOU want…INSIDE of Thesis.

Use the blank space Luke...

In this tutorial, I’ll show you how to create a custom homepage template, while using a conditional tag and a little custom PHP code.

Step 1. Create a new PHP page and name it home.php. Upload it to: /wp-content/themes/thesis_16/custom/

Step 2. Open custom-functions.php and paste this at the bottom of the file.

// Remove Default Page Template
remove_action('thesis_hook_custom_template', 'thesis_custom_template_sample');

// Custom Page Template
function custom_homepage() {
	if ( is_front_page() ) {
		include (TEMPLATEPATH . '/custom/home.php');
	}
}
add_action('thesis_hook_custom_template', 'custom_homepage');

Step 3. Log-in to your WP Dashboard and click on Pages –> Add New

Step 4. Type “Homepage”, leave the content area blank, select “Custom Template”, and then click “Publish”

Step 5. Go to Settings –> Reading and check “A static page”, then select “Homepage”. Click Save.

Step 6. The Result:

The possibilities are endless here. If you’ve ever seen a Thesis design that DIDN’T look like Thesis, chances are they are using custom page templates.

UPDATE: 3/3/10

Here is a real-world working example of home.php below (See it live)

<?php echo thesis_sidebars(); ?>
<div>
 <a href="#"><img src="<?php echo get_bloginfo('template_url'); ?>/custom/images/multimedia-box.jpg" /></a>
 <a href="#"><img src="<?php echo get_bloginfo('template_url'); ?>/custom/images/multimedia-box1.jpg" /></a>
 <a href="#"><img src="<?php echo get_bloginfo('template_url'); ?>/custom/images/multimedia-box2.jpg" /></a>
</div>
<div id="news">
 <img src="<?php echo get_bloginfo('template_url'); ?>/custom/images/bar-1.jpg" /><br />
<?php
$category_box_1 = new WP_Query("cat=1&showposts=2");
while ($category_box_1->have_posts()) : $category_box_1->the_post();
$category_link = get_category_link('1');
?>
<div class="news">
 <div id="headline">
  <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
 </div>
 <div id="thumb">
  <?php the_post_thumbnail( array(100,100) );  ?>
 </div>
 <div id="excerpt">
  <p><?php the_excerpt(); ?>...<br />
   <a href="<?php echo $category_link; ?>"><?php $category = get_the_category(); echo $category[0]->cat_name; ?><?php $category = get_the_category(); echo $category[1]->cat_name; ?></a> | <a href="<?php the_permalink(); ?>"><?php echo thesis_teaser_link_text(); ?></a> | <a href="<?php the_permalink(); ?>#respond">Comments {<?php comments_number('0','1','%'); ?>}</a>
  </p>
 </div>
</div>
  <?php endwhile; ?>
  <h3><a href="<?php echo $category_link; ?>">Read More <?php $category = get_the_category(); echo $category[0]->cat_name; ?>...</a></h3>
</div>
<div id="flickr">
 <ul>
  <?php    if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar 1') ){ ?><?php } ?>
 </ul>
</div>

It’s calling for the Thesis Sidebars, creating a jQuery slide-show, and a sub-loop for the news box.

Tagged as: Customization, Screencast, Thesis Tutorials, Video