Sometimes you need to display a certain post or page of your Thematic child theme differently than the standard template. If it is simply style changes, the best way to do this is generally with the dynamic body classes and targeted css. But if you need to alter the the html code or add extra markup, you would likely use a combination of body classes and a custom page template.
For an example of this, let’s create a full page template for Thematic so that certain pages or posts will use the entire width of the container instead of displaying a sidebar.
Create a Full Page Template in Thematic
- Copy “page.php” from the Thematic directory into your child theme directory.
- Rename the file “template-fullpage.php”
- Open the file add the code to specify it as a custom template:
<?php /* Template Name: Full Page */ ?>
- Remove the line that calls the sidebar from the template. It looks like this:
// calling the standard sidebar thematic_sidebar(); - Upload this file to your site.
- Now open a page in your site and set the “Template” to “Full Page” and view it.
- If we’ve done everything right, your page should display exactly the same but with no sidebar.
- Now, we’ll add two css rules to the stylesheet to make the column of this page template display full width:
/* =Page Templates -------------------------------------------------------------- */ .page-template-template-fullpage-php #container { width:940px; float:left; } .page-template-template-fullpage-php #content { margin:0 0 0 10px; width:940px; overflow:hidden; } - Once this has been uploaded, your new page should display the full width of the container.
Complete Code for the Full Width Thematic Template
<?php
/*
Template Name: Full Page
*/
?>
<?php
// calling the header.php
get_header();
// action hook for placing content above #container
thematic_abovecontainer();
?>
<div id="container">
<div id="content">
<?php
// calling the widget area 'page-top'
get_sidebar('page-top');
the_post();
?>
<div id="post-<?php the_ID(); ?>" class="<?php thematic_post_class() ?>">
<?php
// creating the post header
thematic_postheader();
?>
<div class="entry-content">
<?php
the_content();
wp_link_pages("\t\t\t\t\t<div class='page-link'>".__('Pages: ', 'thematic'), "</div>\n", 'number');
edit_post_link(__('Edit', 'thematic'),'<span class="edit-link">','</span>') ?>
</div>
</div><!-- .post -->
<?php
if ( get_post_custom_values('comments') )
thematic_comments_template(); // Add a key/value of "comments" to enable comments on pages!
// calling the widget area 'page-bottom'
get_sidebar('page-bottom');
?>
</div><!-- #content -->
</div><!-- #container -->
<?php
// action hook for placing content below #container
thematic_belowcontainer();
// calling footer.php
get_footer();
?>
thanks!
I’d managed a workaround using simply css but it’s great to be able to make a page template for future use.
I think you might have been reading my mind. I was literally just going to learn how to do this when I saw your post at themeshaper. btw- you have a typo in your CSS.
.page-template-template-fullpage-php
when the body class is actually
.page-template-fullpage-php
Once I deleted that extra word it worked perfectly. Many thanks!
@Kathy It depends what you’ve named the page template. I named mine, “template-fullwidth.php” so it has the two “templates” in the css body class. If you just named the template “fullwidth.php” it would work perfect with your css. Glad you could use the code!
Ok not a typo then. :) But worth pointing out in case someone else comes along and forgets to read Step 2. doh!
btw- your site is really a gold mine for learning to create thematic child themes! thank you!
Thanks so much for this. Worked perfectly. However, I have a slightly strange request in that I only need to remove the right hand side bar. I am using the 3 column fixed width Thematic layout. I am a complete novice when it comes to php I am afraid. Would this be easy to do?
I may have a chance to look at it later in the week, but you could post your question in the Thematic Forum in the meantime.
Hi Devin,
I was trying to make it work for like two weeks which made me think that I’m like officially retarded :-). but while doing a clean instal of Thematic I wanted to give it another try at 0123 AM :-).
Of course it didn’t work but I found out why. It won’t work for people who literally Copy&Paste Your code – cause when You name the template “template-fullwidth.php” the CSS must say
“.page-template-template-fullwidth-php” and not
“.page-template-template-fullpage-php” as in Your example.
me very glad that me not retarded ;-) and that it works.
Thanks. I need a copy editor. I made the change in the text, so hopefully we’ll save some other folks two weeks of work. :)
Yeah man. I’m pretty stupid too. I’m so glad I read this comment. Thanks for saving me hours of headache.
Thank you Devin!
That was concise and clear. While I had found other references to using page templates I was having a hard time understanding how to get the CSS working and this cleared that right up.
Very helpful info! Thanks for the post. Got it to work with a right sidebar.
What do I need to tweak to have this display correctly on a left sidebar page?
Thanks for sharing! Exactly what I needed. Well, my theme broke with
float: leftin your css, but once I removed it, it became exactly what I needed. Thanks again.I’m adding some of these page templates to Thematic trunk, so hopefully in the next release some additional page templates like full-width will be available by default. If you want to test them out: http://themeshaper.com/forums/topic/new-page-templates-in-thematic
Thanks for much for this concise article. Helped me quickly when I needed it.
Devin,
If one wanted to put `thematic_page_title` near/at the top of the custom page template, where would it go? Also, if the page-template in question is for a custom post type, how do you filter `thematic_page_title` to display the post type and description in the same html format as the other archive pages (i.e.
[Custom Post Type Name][Description])?I think this is great and I “get it.” I would like to create several page template variations for thematic.
such as:
sidebar/sidebar/content
sidebar/content/sidebar
content/sidebar
sidebar/content
Etc.
Any good tips or resources on how to do that?
You can set up those layouts by just using CSS. I’d create the different page templates by just copying the page.php and giving it the different template names (so when it is selected your page will have the template body class). Then use the body classes to style the different layouts. For an example, look at how the full page template works and/or read my post about body classes: http://wptheming.com/2009/12/dynamic-body-classes-wordpress-styling
Devin, thanks for this! Discovered this post through the Thematic forums after doing my usual scouring, to find solutions to my seemingly obscure problems :-)
Nice easy one this time, so cheers!
Jim.
Freakin Awesome. Thanks so much for sharing. I am definitely bookmarking this!
Hey Devin, thanks a lot for this.
Could you make a tutorial going a little further into page templates.
What I’m trying to do is create a template that will load two sidebars on the right side, ideally a few templates that let me pick what side the sidebars show up on. and even a template that uses the power bog style Crown widget area.. afraid id break everything even trying. .
Hi Devin , is there any idea or tutorials helping me to create Filterable portfolio page on Thematic child theme ?
Thanks
You could use my Portfolio Post Type plugin: http://wordpress.org/extend/plugins/portfolio-post-type/
And just add the templates that you need.