Creating WordPress Custom Page Templates

wp-custom-page-template

In WordPress you start off with 2 default types of posts you have the standard posts and you also have pages.

For these types of posts WordPress will use different PHP files to display the content, the standard posts will use the single.php file and the pages will use the page.php file.

But the problem with this is that you can only use one file for your pages so you can't have different page layouts or styles. This is why WordPress created the ability to create custom page templates, which allows developers to create as many different page templates as they want.

Create A Custom Page Template

To create a custom page template all you have to do is add a new blank php file to your theme directory and save this as custom_page_template.php. Within this new file all you have to do is add comments to the top of the file.

<?php
/*
Template Name: Custom Page Template
*/
?>

Adding this to the top will automatically add this file to a drop down when adding a new page, from the drop down you will see the default template (page.php) and Custom Page Template.

If you select the new page to use the Custom Page Template then this will override the page.php and your page will use your custom page template.

Examples Of Custom Page Template

Some of the common examples of custom page templates are contact pages, full width pages and archive pages.

Create A Contact Page Template

The contact page will make it easy for your website visitors to send an email to the admin email address of your WordPress blog.

Below is an example to use for a contact us page, you can copy and paste this code into a new PHP file to easily add contact pages to your WordPress theme.

<?php
/*
Template Name: Contact
*/
?>
<?php 

$nameError = '';
$emailError = '';
$commentError = '';
$sumError = '';

if(isset($_POST['submitted'])) {
		if(trim($_POST['contactName']) === '') {
			$nameError = 'Please enter your name.';
			$hasError = true;
		} else {
			$name = trim($_POST['contactName']);
		}
		
		if(trim($_POST['email']) === '')  {
			$emailError = 'Please enter your email address.';
			$hasError = true;
		} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
			$emailError = 'You entered an invalid email address.';
			$hasError = true;
		} else {
			$email = trim($_POST['email']);
		}
			
		if(trim($_POST['comments']) === '') {
			$commentError = 'Please enter a message.';
			$hasError = true;
		} else {
			if(function_exists('stripslashes')) {
				$comments = stripslashes(trim($_POST['comments']));
			} else {
				$comments = trim($_POST['comments']);
			}
		}
		
		if(trim($_POST['sum']) === '' || trim($_POST['sum']) != '11' ){
			$sumError = "Please enter what's 7 + 4";
			$hasError = true;
		}
			
		if(!isset($hasError)) {
			$emailTo = get_option('pu_email');
			if (!isset($emailTo) || ($emailTo == '') ){
				$emailTo = get_option('admin_email');
			}
			$subject = '[Contact Form] From '.$name;
			$body = "Name: $name \n\nEmail: $email \n\nComments: $comments";
			$headers = 'From: '.$name.' <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $emailTo;
			
			mail($emailTo, $subject, $body, $headers);
			$emailSent = true;
		}
	
} ?>

<?php get_header(); ?>

<section class="box grid_9 list_posts">
  		<div class="inner">
                
				<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
					
					<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
                    
						<h1 class="entry-title"><?php the_title(); ?></h1>
						
						<div class="entry-content">
                        
							<div class="contact-form clearfix">
                        
							<?php if(isset($emailSent) && $emailSent == true) { ?>

                                <div class="thanks">
                                    <p><?php _e('Thanks, your email was sent successfully.', 'framework') ?></p>
                                </div>
            
                            <?php } else { ?>
            
                                <?php the_content(); ?>
                    
                                <?php if(isset($hasError) || isset($captchaError)) { ?>
                                    <p class="error"><?php _e('Sorry, an error occured.', 'framework') ?><p>
                                <?php } ?>
                
                                <form action="<?php the_permalink(); ?>" id="contactForm" method="post">
                                    <ul class="contactform">
                                        <li><label for="contactName"><?php _e('Name:', 'framework') ?></label>
                                            <input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="required requiredField" />
                                            <?php if($nameError != '') { ?>
                                                <span class="error"><?php echo $nameError; ?></span> 
                                            <?php } ?>
                                        </li>
                            
                                        <li><label for="email"><?php _e('Email:', 'framework') ?></label>
                                            <input type="text" name="email" id="email" value="<?php if(isset($_POST['email']))  echo $_POST['email'];?>" class="required requiredField email" />
                                            <?php if($emailError != '') { ?>
                                                <span class="error"><?php echo $emailError; ?></span>
                                            <?php } ?>
                                        </li>
                            
                                        <li class="textarea"><label for="commentsText"><?php _e('Message:', 'framework') ?></label>
                                            <textarea name="comments" id="commentsText" rows="20" cols="30" class="required requiredField"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
                                            <?php if($commentError != '') { ?>
                                                <span class="error"><?php echo $commentError; ?></span> 
                                            <?php } ?>
                                        </li>
                                        
                                        <li><label for="sum"><?php _e('7 + 4:', 'framework') ?></label>
                                            <input type="text" name="sum" id="sum" value="<?php if(isset($_POST['sum'])) echo $_POST['sum'];?>" class="required requiredField" />
                                            <?php if($sumError != '') { ?>
                                                <br/><span class="error"><?php echo $sumError; ?></span> 
                                            <?php } ?>
                                        </li>
                            
                                        <li class="buttons">
                                            <input type="hidden" name="submitted" id="submitted" value="true" />
                                            <label></label><button class="button-message" type="submit"><?php _e('Send Email', 'framework') ?></button>
                                        </li>
                                    </ul>
                                </form>
                            <?php } ?>
                        
							</div>
						</div>
					</div>
	
					<?php endwhile; else: ?>
	
					<div id="post-0" <?php post_class() ?>>
					
						<h1 class="entry-title"><?php _e('Error 404 - Not Found', 'framework') ?></h1>
					
						<div class="entry-content">
							<p><?php _e("Sorry, but you are looking for something that isn't here.", "framework") ?></p>
							<?php get_search_form(); ?>
						</div>
					</div>
	
				<?php endif; ?>
							
			</div>
    </section>
    
    <?php get_sidebar(); ?>

<?php get_footer(); ?>

Full Width Page Template

The full width page template is a template I use which the main difference is that the sidebar has been removed and makes the content area stretch across the width of the page.

<?php
/*
Template Name: Fullwidth
*/
?>

<?php get_header(); ?>

<section class="box grid_12 list_posts">
  		<div class="inner">
			
			<article id="primary" class="hfeed">
			<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

				<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
					<h1 class="entry-title"><?php the_title(); ?></h1>

					<div class="entry-content">
						<?php the_content(); ?>
						<?php wp_link_pages(array('before' => '<p><strong>'.__('Pages:', 'framework').'</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

					</div>
				</div>
				
				<?php comments_template('', true); ?>

				<?php endwhile; endif; ?>
			</article>
			</div>
		</section>

<?php get_footer(); ?>

Create An Archives Page Template

The archive page template will display a list of all your old post. In this template it will list all the posts from the previous 30 days, list the posts by month and list the posts by category.

Copy the following in a new PHP page template.

<?php
/*
Template Name: Archives
*/
?>

<?php get_header(); ?>

<section class="box grid_9 list_posts">
  		<div class="inner">
                
				<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
				
					<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
                    
						<h1 class="entry-title"><?php the_title(); ?></h1>
						
						<div class="entry-content">
                        
                            <div class="archive-lists">
                                
                                <h4><?php _e('Last 30 Posts', 'framework') ?></h4>
                                
                                <ul>
                                <?php $archive_30 = get_posts('numberposts=30');
                                foreach($archive_30 as $post) : ?>
                                    <li><a href="<?php the_permalink(); ?>"><?php the_title();?></a></li>
                                <?php endforeach; ?>
                                </ul>
                                
                                <h4><?php _e('Archives by Month:', 'framework') ?></h4>
                                
                                <ul>
                                    <?php wp_get_archives('type=monthly'); ?>
                                </ul>
                    
                                <h4><?php _e('Archives by Subject:', 'framework') ?></h4>
                                
                                <ul>
                                    <?php wp_list_categories( 'title_li=' ); ?>
                                </ul>
                            
                            </div>                            
			</div>
		</div>
	
					<?php endwhile; else: ?>
	
					<div id="post-0" <?php post_class() ?>>
					
						<h1 class="entry-title"><?php _e('Error 404 - Not Found', 'framework') ?></h1>
					
						<div class="entry-content">
							<p><?php _e("Sorry, but you are looking for something that isn't here.", "framework") ?></p>
							<?php get_search_form(); ?>
						</div>
					</div>
	
				<?php endif; ?>				
    	</div>
    </section>
    
    <?php get_sidebar(); ?>

<?php get_footer(); ?>

Which custom page templates do you use?

Advertise here

Comment