Categories
Tutorials WordPress

Custom Page Templates in TwentyTen


With the release of WordPress 3.1 came a new version of the stock TwentyTen theme with some subtle changes, most importantly the move of all the loop elements in the templates (the code that runs through the database and gathers info like title, date, author, categories, content, images etc) into their own files. In the first release of TwentyTen this was restricted to just the single post view (loop in loop-single.php) but now it also extends to among other files the page tempalte (loop-page.php).

The problem arises when you want to create custom page templates. Previously all you needed to do was copy the page.php file and make the changes you wanted in the loop. But with the new system copying the page.php file alone won’t let you make any changes to the loop, just the overall structure (header, sidebar, footer etc). To make changes to the loop you have to either copy the loop code out of loop-page.php and into your custom page template or use a conditional statement along with the is_page_template() function in the loop-page.php file to detect that a custom page template is being used and then make the changes. The video above demonstrates both approaches.

By Morten Rand-Hendriksen

Morten Rand-Hendriksen is a staff author at LinkedIn Learning and lynda.com specializing in WordPress and web design and development and an instructor at Emily Carr University of Art and Design. He is a popular speaker and educator on all things design, web standards and open source. As the owner and Web Head at Pink & Yellow Media, a boutique style digital media company in Burnaby, BC, Canada, he has created WordPress-based web solutions for multi-national companies, political parties, banks, and small businesses and bloggers alike. He also contributes to the local WordPress community by organizing Meetups and WordCamps.

17 replies on “Custom Page Templates in TwentyTen”

Wouldn’t this be the better way: in stead of wrapping the whole check, just adding a specific elseif statement?

<?php if ( is_front_page() ) { ?>
<h2 class="entry-title"><?php the_title(); ?></h2>
<?php } elseif ( is_page_template('customPage.php') ) { ?>
<p>Do Stuff, ignore header on customPage.php</p>
<?php } else { ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php } ?>

You could definitely do that, but if you did you would not be able to use the Custom Page Template on the front page – the two would become mutually exclusive. By wrapping the front page in the custom page template check you allow the user to control the front page more dynamically.

You need to add wmode=”opaque” in your Flash videos, so that your drop-down-menu won’t behind the videos. ^_^ By the way, I love your tutorial videos!

Thank you soooo much! I’ve been working on this all day!

Exactly what I needed… even though I had to watch it about 10 times figure it out. Awesome!

Beautiful! I have been looking for a simple video with this kind of explanation as to content for pages. Thanks a lot!

Just getting into WP. Your video answered a burning question for me – “What’s up with the snipet of code involving the loop.’ Thanks a bunch!

Parse error: syntax error, unexpected T_STRING in (cpanel path omitted/loop-page.php on line 32

Hey I didn’t touch line 32. Line 32 is just jealous of all the other lines.

What happened?

Morton, I have been loving your tuts on lynda.com, just fantastic. I made my first child theme thanks to you. Now I’m having some trouble getting the single column width twentyten theme page to become a two column static template. But I’ll look on this website and see if I can figure it out. Thanks again, you’re really great to listen to!

I went to the WordPress Forums. I need answers now-ish. Update for my btw, I got the code working, but now the style’s been stripped. Trying to figure that out now …

That type of error generally indicates a problem in the code somewhere else. It could be as simple as missing a semicolon or a parentheses or curly bracket. PHP is tricky to debug because the errors don’t report cleanly: If there is something wrong the code generally terminates right where it is and provides a weird error message. I would look for missing parentheses and semicolons first and move from there.

Thanks. Got so bogged down in it, it took me a while to get back here. I’m getting it little by little. You were right, if I remember right, it was a single character somewhere.

I’d love to dig in some more, but I only have so much time. But I love to learn too 🙂

Hello Morten,
I’ve used this for quite a while, and have learnt a little more, especially from your courses on Lynda.com. Thank you.

This is a good solution across a website with many pages, enabling easy display, or not, of the title of the page, and I have adapted it for displaying header image, or not, as needed.
However, I now realise from understanding SEO a little better, that the h1 title is not displayed at all when checking ‘view source’ with this method. Instead using

`.page-template-page_whatever-php #content .entry-title {
display: none;} `

in the css, achieves the same outcome, but still includes the h1 title when viewing source in the browser.
Would this be a better way for SEO purposes?
Thanks
Mark

Comments are closed.