A few weeks ago I showed you how to make a Custom Homepage Template. Today, I will show you how to create additional page templates which will allow you to further customize Thesis without hacking core files.
This tutorial is based on my WidgetMe Framework. Which allows you to create additional page templates with page specific widgets.Why would you need this functionality? Take a look at a recent PSD Conversion and pay attention to pages that have their own sidebars and menus. This is all done with a Custom Page Templates.
Easy Breezy
Step 1: Create a new PHP document, and paste this code in the top:
<?php
/**
* Template Name: About Us
*/
Explanation: What you’ve just done is created some code for WordPress to scan. WordPress will read these four lines of code and automatically add this page to a list of page templates. (This functionality is actually a native WordPress feature – not Thesis!)
Step 2: Save the PHP file as “about-us.php” Note: the file name MUST match line 3, using dashes for spaces
Step 3: Upload this to: /wp-content/themes/thesis_16/
Step 4: Create a new page (or edit an existing one) and select “About Us” from the drop-down
Now publish.
The Fun Part
Let’s get coding.
<?php
/**
* Template Name: About Us
*/
?>
<div id="custom-page">
<div class="content-column">
A whole bunch of content here.
</div>
<div class="sidebars">
<?php echo thesis_sidebars(); ?>
</div>
</div>
When finished, save and upload. Nothing elaborate, but end result of this would be:
Taking it to the next level
If you noticed, I used:
<?php echo thesis_sidebars(); ?>to place my sidebars from Thesis into this page template. That’s not the only Thesis function you can add. For example:
thesis_default_header();
thesis_nav_menu();
thesis_footer_area();
etc…
Explanation: What you’re doing is actually PHP 101. You’re simply calling a function that Chris Pearson wrote for Thesis and printing it. Let’s see a more advanced example:
<?php
/**
* Template Name: About Us
*/
?>
<?php echo thesis_header(); ?>
<?php echo thesis_nav_menu(); ?>
<div id="custom-page">
<div class="content-column">
A whole bunch of content here.
</div>
<div class="sidebars">
<?php echo thesis_sidebars(); ?>
</div>
</div>
<?php echo thesis_footer_area(); ?>
Will return this:
Putting it all together
We’re getting there! All that’s missing is CSS. Let’s call some style-sheets:
<?php
/**
* Template Name: About Us
*/
?>
<head>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/custom/layout.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/custom/custom.css" type="text/css" media="screen, projection" />
</head>
<?php echo thesis_header(); ?>
<?php echo thesis_nav_menu(); ?>
<div id="custom-page">
<div class="content-column">
A whole bunch of content here.
</div>
<div class="sidebars">
<?php echo thesis_sidebars(); ?>
</div>
</div>
<?php echo thesis_footer_area(); ?>
Returns this: http://gregrickaby.com/sample-about-us-for-tutorial (go ahead and view-source)
As you can see, you get to re-invent the wheel – except in your toolbox you have WordPress and Thesis! 
Have fun.
List of Thesis Functions & Frameworks
Header
thesis_header_area();
Content
thesis_content();
Sidebars
thesis_sidebars();
thesis_sidebar_1();
thesis_sidebar_2();
Footer
thesis_footer_area();
thesis_attribution();
Full-Width Framework
thesis_wrap_header();
thesis_wrap_content();
thesis_wrap_footer();
The Mac-Daddy Framework (when used, will simply print Thesis as a whole)
thesis_html_framework();
There are actually about 50 more of these, but those listed above encompass all the smaller ones. For a complete list of Functions, navigate to: /wp-content/themes/thesis_16/lib/html/ and take a look.
Related posts:
{ 14 comments… read them below or add one }
Trying again….
<head> <link rel="stylesheet" href="<?php bloginfo(‘template_url’); ?>/style.css" type="text/css" media="screen, projection" /> <link rel="stylesheet" href="<?php bloginfo(‘template_url’); ?>/custom/layout.css" type="text/css" media="screen, projection" /> <link rel="stylesheet" href="<?php bloginfo(‘template_url’); ?>/custom/custom.css" type="text/css" media="screen, projection" /></head><?php echo thesis_sidebar_1(); ?>
I’m having a similar problem to Dave I believe. I have created my static homepage and have tried to pull in my sidebar #1. The content is coming in, but the stylesheets aren’t being used. Here’s my home.php code:
<link rel="stylesheet" href="/style.css" type="text/css"
media="screen, projection" />
<link rel="stylesheet" href="/custom/layout.css"
type="text/css" media="screen, projection" />
<link rel="stylesheet" href="/custom/custom.css"
type="text/css" media="screen, projection" />
What’s wrong?
This is great, Greg. The one thing I can’t figure out is how to get all the rest of the header information into the template – the doctype, title, etc. I haven’t found a hook to pull that in. Using your method above, I do get a page that displays but it’s not well-formed. Am I missing something?
Cool… think I’m going to have to try this. So with these custom templates you can still adjust all the SEO options Thesis gives you? Thanks!
You’re welcome!
Step 4: Create a new page (or edit an existing one) and select “About Us” from the drop-down
Can you please explain this in more detail. How and where does one create a new page and where is the drop-down to select the About-Us Page?
Regards, Charles Pisano
WP-Dashboard –> Pages –> Add New
Then…underneath the “Publish” button, you will see the drop-down.
Hi,
Will this technique be fully compatible with future versions of thesis?
Cheers,
Brian
Absolutely!
Nice but how to apply CSS to this page?
I tried to use the same class i’m using in other pages but the page is not styled
Any idea why is that?
Thanks
Thankyou for the tutorial. It was perfect timing, about the same day my client said she wanted this.
Very helpful tutorial.
I’ve always wondered (and am not advanced enough in PHP to figure out), is there a way to include page templates in a separate folder? I know it would usually be pointless, but let’s say I wanted to add custom page template files in the Custom folder of Thesis so I can keep all of my custom files in the same place (making it easier to update in the future).
Well, if you use this tutorial you could: http://gregrickaby.com/2010/01/how-to-create-a-custom-page-template.html
I’m well versed in that, haha. I was more leaning towards having multiple selectable page templates from the page screen (instead of just custom template) and keeping all of the extra templates in the custom folder.
Thanks though, all of your articles are great.
{ 1 trackback }