How to Create Custom Page Template in WordPress?

Sat, Mar 28, 2009

Wordpress

Custom Page Template

Every wondered why some blogs don’t look the way they should? Even when they are using the same theme you are.. Its because the Custom Page Template. Some Bloggers create custom Page Templates for their homepage to look different or not to look like a Blog. And some use for different purposes as Image Gallery, Charts, etc.

Here I’m gonna share a simple yet usefull tutorial on How to create a Custom Page Template for your Blog.
Starting from the scratch, You should have a html editor handy (Dreamweaver/Frontpage).

Open a Blank File.

Write this PHP code at the very top of your file.

/*
Template Name: Archives Page
*/

Html editors automatically add usefull tags like <html><body> in the document. Don’t forget to clean them all, We need a Blank Page !

This code helps WordPress Theme recognize the file as the Page Template and call it in the Page Template Menu when you go at the “Add New Page” Page.

page-template

Coming to the designing side, if you want your Page to look totally different from the Blog. Just design the page as whatever you want. Its all yours !
But you just want the content area to look different. As if you want the same  header and footer of your Blog to stay at their places, changing the content in between.

If you want the header, write this after the Page Template Code

<?php get_header(); ?>

This php command calls the header of your Blog.

Create tables, put images, or do what so ever you want in the Content Area, then put this Code to call your Footer.

<?php get_footer(); ?>

So here you are done with header and footer.. Sometimes you also want the Sidebar. Put this code just before the code you used for footer.

<?php get_sidebar(); ?>

Its just as easy as that.. You don’t want the default header, footer and sidebars. Don’t put any code rather than just the code you used to call your Page Template in WordPress.

Save the file has .php and upload it in your themes folder.Mostly:

http://www.domainname.com/wp-content/themes/yourtheme/

Go to your Dashboard > Pages > Add New > Select your Page template as shown in the Image above. Write a suitable name for your Page, Click Publish.

You may need to edit and Upload your Page a couple of times to look perfectly for your Blog. Because every theme has its own set of divs and structure and you have to stick to it.

The Trick !

As it looks like you have come to end of the post reading very keenly to learn how to create a custom Page.  Heres a trick for you to do it more easy. But this is only when you need Header and Footer at the same Place.

What  to do ?

Every theme has its default Page Template, Open it in a good html editor and the code looks like this (mostly).

<?php get_header(); ?>
<div id="centercol" class="grid_10">
<?php if (have_posts()) : ?>
<div class="box">
<h2><?php the_title(); ?></h2>
<?php while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<div class="entry">
<?php the_content('<span class="continue">Continue Reading</span>'); ?>
</div>
</div><!--/post-->
<?php endwhile; ?>
</div>
 <?php endif; ?>
</div><!--/grid_10-->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Just copy this theme with anothername, We assume CustomPage.php
Write this Code at the very top of the already written code.

/*
Template Name: Archives Page
*/

Remove all the code between the <?php get_header(); ?> and <?php get_sidebar(); ?>, even the sidebar command if you don’t want sidebar and want a wide open space.
Do whatever you want in between these header and footer commands.
Upload in your theme folder.
Write New Page, Select Page Template. Give suitable name and Publish.

The advantage of this trick is you dont have to mess wht the header footer code, no problems of divs, footers, etc.

If you still have any questions to ask, or even if you want to point out any mistakes I made. Feel free to comment and share ! :)

Related posts:
  1. Create Custom Sidebar in WordPress Blog
  2. How to remove Sidebar from a WordPress Page?
  3. How to Exclude Specific Categories from Navigation

, ,

This post was written by:

- who has written 88 posts on Wordpress Tutorials.

I'm one of the Administrators of CHIDIMAR.com. I also own I'm Enk.. I'm 18 years old Blogger and Graphics Designer looking for Freelance work. You can follow me @enked

Contact the author

2 Comments For This Post

  1. Simon | Teenius Says:

    Cool post Enk, really great stuff.

    btw.. you spelt ‘custom’ wrong in the title :D ;)

    [Reply]

  2. Enk. Says:

    Well, I don’t think its written wrong. What do you spell it ? :D

    [Reply]

Leave a Reply