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.
{ 6 comments… read them below or add one }
Hi,
Will this technique be fully compatible with future versions of thesis?
Cheers,
Brian
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.