Custom Page Templates with Thematic

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

  1. Copy “page.php” from the Thematic directory into your child theme directory.
  2. Rename the file “template-fullpage.php”
  3. Open the file add the code to specify it as a custom template:
    <?php
    /*
    Template Name: Full Page
    */
    ?>
    
  4. Remove the line that calls the sidebar from the template. It looks like this:
    // calling the standard sidebar 
        thematic_sidebar();
    
  5. Upload this file to your site.
  6. Now open a page in your site and set the “Template” to “Full Page” and view it.
  7. If we’ve done everything right, your page should display exactly the same but with no sidebar.
  8. 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;
    }
    
  9. 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();

?>

About Devin

I'm a WordPress developer based in Austin, Texas. I run a little theme shop called DevPress and work for a startup called Cratejoy. Find me on twitter @devinsays.

22 Responses

  1. xxxevilgrinxxx

    thanks!
    I’d managed a workaround using simply css but it’s great to be able to make a page template for future use.

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

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

  4. Sammy

    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?

  5. Marcin

    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.

  6. Gaillen

    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.

  7. John

    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?

  8. Thanks for sharing! Exactly what I needed. Well, my theme broke with float: left in your css, but once I removed it, it became exactly what I needed. Thanks again.

  9. 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])?

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

  11. 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.

  12. christoph

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

  13. Rasha

    Hi Devin , is there any idea or tutorials helping me to create Filterable portfolio page on Thematic child theme ?
    Thanks

Leave a Reply