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/
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(); ?>
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();
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.
Thankyou for the tutorial. It was perfect timing, about the same day my client said she wanted this.
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 :)
Hi,
Will this technique be fully compatible with future versions of thesis?
Cheers,
Brian
Absolutely!
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.
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!
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?
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?
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(); ?>
Hi Greg, great tutorial! I’ve been in search of answers on this topic on an off for a while now, and you provide the best examples and the clearest descriptions of how it all works.
I’m looking forward to testing it out.
Can I ask, is there a way to have custom templates for post pages? I’m wanting to show a 3 col format on the blog home page and 2 col for the post pages themselves.
thanks again for your great content!
Greg – your two posts about creating custom thesis templates have been nothing short of amazing. I’ve had a hard time doing tutorials like these but yours have been very easy and produced really good results. Thanks so much for the time and effort you put into these tutorials. I have one question; on this tutorial, the css isn’t “kicking in” for lack of better term. In other words, on the home page custom template, the home.php kept all my design within the main content section of thesis….with your tutorial above my content is covering my entire screen and there’s none of the thesis framework to be seen. What am I doing wrong?
I just followed the tutorial and I am adding a new page but I don’t see the option for my new page template in the drop down menu. ???? Is there any reason, beside user error, why this would be?
Well, I figured it out…. yup.. user error. I put the file into the custom folder.
note to self: try again before asking for help.
Does this work with Thesis 18? I’m having trouble getting everything to stay in the middle. Its all been thrown right out to the sides.
Hey, great stuff. very very useful. Just having some similar probs to some of the others- my header, nav bar and content ignore the framework that has been set in thesis. any ideas?
Holy moly, I’ve been looking for a clear explanation on using multiple custom pages on thesis for months. You are the man! Cheers!
I too find the tutorial clear and easy to follow, very chuffed to have created a custom page for myself. I also find that it opens up without the Thesis framework, and have no idea how to proceed with the “List of Thesis Functions and Frameworks” short of taking a course in How to Use Thesis Functions and Frameworks to edit custom page. Do you have another tutorial on this? I also notice the comments all date from 2010 and have not been responded to.