How To: Create a Custom Page Template

by Greg Rickaby on January 7, 2010

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.

{ 30 comments… read them below or add one }

O.C. Search Consulting August 11, 2010 at 18:26

Thanks for this technique, I’ve used it three time so far with no problems. I have one question though – My clients would like to edit their home page content inside the Wordpress admin and NOT by having to edit home.php. Is there anyway to apply this same technique but make the home page content editable from the WP administration panel (e.g. edit the “home” page)?

How To: Create a Custom Page Template

UPDATE: 3/3/10

Follow Me

Endorsements

Trending Posts