Thesis Tutorial: Multiple Custom Page Templates

I have been working with Thesis for a little over a month now. Thesis is a relatively new templating platform for WordPress. Thesis has unmatched SEO, cross-browser compatibility, and top-notch HTML + CSS architecture. This website runs on Thesis.

I was looking through the Thesis forums and tweeting with others on how to get a solution to an issue. The issue has to do with creating custom templates. I want a custom home page design. I also want a custom template for other pages. Basically I want multiple custom templates available under one design. I have tried to explain what I have found below. I welcome your comments and ideas. There may be other ways to do this (usually is) but here is how I did it. Hopefully this can help others.

A Little Thesis Primer

If you are familiar with Thesis you can probably skip to, “Getting To It.” The way Thesis works is to keep all customization inside of one folder–that is part of its genius. Whenever the templating system is updated you overwrite the entire file structure, save your custom folder, and replace that back in and voila you have arguably the best templating system under the hood while keeping your design in tact. This may not seem like much to the layperson, but for those of us that design and develop web sites on platforms like WordPress it is a godsend.

So back to multiple custom templates inside of Thesis.

All of the custom files sit within one folder in ~/wp-content/themes/thesis/custom/

Every customized design using Thesis has their custom templates, css, and images stored within this folder.

To create custom page templates you need to use Thesis’ ingenious “hook” system that allows you to tinker with the components of any part of the standard layout or, if you are brave, roll your own layouts and custom designs. The best entry-level instruction I have found for understanding and using “hooks” is at the web site of Sugarrae: here it is.

Once you have the basic understanding of “hooks” under your belt, have your designs ready to go, and have some WordPress chops, you are ready to create multiple custom page templates.

Getting To It

First thing you need to do is make sure you have your “home page” set to really be the home page. Whenyou are logged in as the admin go to settings/reading. “A static page (select below)” should be set to your homepage. See this image:

Once I have done this I then need to make sure I have selected the “Custom Template”option from the drop down menu on the right side when you are editing any page (not posts!):

So, first I want a custom home page template.

In the file thesis/custom/custom_functions.php I added:

/* HOME PAGE CUSTOM TEMPLATE */

function home_pagecustom() {
/* check to see if homepage. has to happen inside the function */
if (is_home() || is_front_page())  {
?>
...Your custom layout goes here...
<?php } }

/* Now we tell Thesis to use the home page custom template */

remove_action('thesis_hook_custom_template', 'thesis_custom_template_sample');
add_action('thesis_hook_custom_template', 'home_pagecustom');

The code above has been whittled down to show only the essential code. It works to display a custom home page as long as you have selected “custom template” from the pulldown menu when editing the ‘home’ page.

You may insert any HTML and style it in the custom.css file. Be sure to save custom_functions.php and custom.css and upload to your ~/wp-content/themes/thesis/custom/ directory.

One Custom Page Down.
How About A Second?

So how do you add another custom template after defining the home page template?

You need to define another function for your next page template. You can add as many functions (think page templates) that you like. Each one needs a unique name. You also need to define the conditional properly. You need to make sure that the conditional is within the function—it will not work outside of it.

Use the right *if* statement to make sure you apply the right template to the right page. I typically put the page tag and the page ID—a type of insurance. You can find a page ID by hovering your mouse over the link to edit the page when viewing a page list within the admin area of WordPress.

This example below is testing for the “press page” and if it is, puts the WordPress content on the left side of the page and both sidebars to the right:

/* CUSTOM PRESS TEMPLATE */

function new_presspage() {
if (is_page('press') || is_page('512')) { ?>

<div id="content">
<div class="post_box">
<div class="headline_area">
	<h2>Your Headline</h2>
</div>
...This is where your content goes...
</div>
</div>
<div id="sidebars">
<?php thesis_build_sidebars(); ?>
</div>		

<?php } }

add_action('thesis_hook_custom_template', 'new_presspage');

Since you already invoked the “remove_action” on the ‘thesis_hook_custom_template’ in order to replace the home page first you do not need to repeat it.

The example above looks exactly like the standard content column on the left with dual sidebars on the right. I used a custom template in this instance because I wanted to perform specific calls to the database and produce specific lists of posts. Since I am doing it this way I also create the ability to style the page however I like through the use of creative CSS implementation.

Wash, Rinse, Repeat

You could then repeat the code above and apply it to any number of specific custom templates you would like. All you need to do is

1. create a unique function name
2. reference the right page in the conditional
3. make sure conditional is within the function
4. place whatever content you would like within the proper divs
5. style the content within the custom.css file
6. make sure your page within WordPress has the custom template selected as its template option
7. test, test, test

That’s it. This tutorial should get you well on your way to creating multiple custom page templates within the single custom_functions.php file. If you have any questions, comments, or suggestions I welcome them below.

Hope this helps.

Tagged as: Design, Thesis, WordPress, Work

Do you need help with Wordpress, or the Thesis theme?

If you are a web designer or web developer needing help, or a 'do-it-yourselfer' looking for a professional Internet presence I can help.

If you need help with a specific WordPress or Thesis theme issue or a complete website, I offer consultation, complete web design, and web development services.

Get in touch and we can talk about your needs and start the process.