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.
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?
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.
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.
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?
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!
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.