How to Create Custom Page Template ?

You must have noticed Some Blog have pages totally change from the rest of the Blogs. Even if they are using the same theme you are using. They do it when they want to create specific content to look out of the box or simply different from rest.

This is done by creating Custom Page Templates. With a little know how of html you can also have a Custom Page. You can use this trick for any purpose you want like if you want your homepage to look different then Blog or maybe a unique About me Page, or a Sitemap or Image Gallery even.

Starting from the scratch, You should have a HTML editor handy (Dreamweaver/Frontpage).

Open a Blank File.

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

 

The Design Side:

If you want your new Page to look totally different from the Blog just design the Page as whatever you want with no restrictions. Remember to define CSS in the theme CSS file, if you are adding new effects and divs.

But If you want the content are to look different and use same Header and Footer and/or Sidebar.

Add this code, It’ll call header.php in the page.
<?php get_header(); ?>
This php command calls the header of your Blog.

Create divs, Put Images/ Content and what so ever you may wish. Then just add this line to call Footer to your Page Template.
<?php get_footer(); ?>

And in case you also want the Sidebar to appear. Add this code right above the Footer code. It will look like this, then.
<?php get_sidebar(); ?>
<?php get_footer(); ?>

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 as filaneme.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 Easy Way !

As it looks like you have come to end of the post reading very keenly to learn How to Create a Custom Page Template. Here’s a trick for you to do it more easily. 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”>
<?php if (have_posts()) : ?>
<div>
<h2><?php the_title(); ?></h2>
<?php while (have_posts()) : the_post(); ?>
<div id=”post-<?php the_ID(); ?>”>
<div>
<?php the_content(‘<span>Continue Reading</span>’); ?>
</div>
</div><!–/post–>
<?php endwhile; ?>
</div>
<?php endif; ?>
</div><!–/grid_10–>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Just copy this page with another name, 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 don’t have to mess with the header footer code, no problems of DIVs, footers, etc.

Add a Comment

Your email address will not be published. Required fields are marked *