How to create wordpress custom page template – Custom wordpress page

WordPress is one of the best web software in which developers and designers can create, design and build anything that they wish for. If you wish so then all you need is some creativity and coding skills. There are tons of resources for wordpress (themes, plugins) in which you can achieve your dream website or blog or ecommerce site. Most of the premium wordpress themes these days come with various page templates in order to fit various page types. But, what if you wish to make a page look completely different? That is where you need to create and use a custom page template. Here we will see how to create wordpress custom page template in simple easy steps.

What is a wordpress custom page template?

In your wordpress theme directory you will see a template file named page.php. By default when you create a new page, wordpress uses this page.php file in order to make the page look like in a manner. So the custom page template file is an alternative to default page.php file. It contains all sorts of template tags and PHP lines which will get you custom layout and look for that particular page that the template is assigned.

A custom page template will be useful if you wish to have a page look different than rest of your pages. For example you can create custom page template for your blog page, landing page, portfolio page, home page, newsletter opt in page and sales page. Creating a custom page template with unique layout for specific pages will make your site more interesting.

For example let’s say the page that uses the default page.php file displays header, footer, body and sidebar. Now the page that uses custom page template (full-width-page.php) will show header, body and footer and not sidebar. By creating a custom page template you can get all the desired feel and unique look for any particular page. But to style and customize the page design you need some knowledge in CSS, HTML and PHP.

How to create wordpress custom page template

Creating a custom page template in wordpress is simple. Just copy the following line and paste it in a notepad. Now name the template and save it as a PHP file (Name the template file that is easy to recognize). In our case, to make you better understand we are naming the template as “Full width Custom Template” and saving it as custom-fullwidth-template.php.

<?php
/*
Template Name: Full width Custom Template
*/
?>

To create a custom template you have to access your theme directory. By using FTP client transfer the custom-fullwidth-template.phpfile to your main theme folder that is in wp-content >> themes >> theme name.

Now you have created a custom page template and you can specify this custom template for any page from attributes box.

WordPress will recognize your custom page template, but right now the page will display nothing. Why not? You have to start calling the necessary template tags such as header, footer, sidebar etc. To call header and footer just add the following line in custom-fullwidth-template.php and save it.

<?php get_header(); ?>
<?php get_footer(); ?>

So the custom-fullwidth-template.php file looks like this.

<?php
/*
Template Name: Full width Custom Template
*/
?>

<?php get_header(); ?>

<?php get_footer(); ?>

Now assign this template for a page and check it where you will see header as well as footer. If you are an expert then you can go solo by creating a custom header, footer and make the page look completely different.

To demonstrate you, we are going to create a full width page template in twenty twelve theme. So here comes the step.

Open default page.php file and copy the lines to custom-fullwidth-template.php and save it. Now the custom-fullwidth-template.php file will finally looks like the one below.

<?php
/*
Template Name: Full width Custom Template
*/
?>

<?php get_header(); ?>
  <div id="primary" class="site-content">
		<div id="content" role="main">

			<?php while ( have_posts() ) : the_post(); ?>
				<?php get_template_part( 'content', 'page' ); ?>
				<?php comments_template( '', true ); ?>
			<?php endwhile; // end of the loop. ?>

		</div><!-- #content -->
	</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Now we are creating a new page by assigning it to full width custom template and the page looks like this which shows sidebar.

This is a full width template and so to remove the sidebar we are just removing the

<?php get_sidebar(); ?>

from custom-fullwidth-template.php.

Now it removes the sidebar, but the page is not aligned to full width and this is where CSS comes in. To make the template full width you have to specify a class and call it from style sheet.

In custom template file the specified class is site-content. Now what we will do is change the “site-content” to “full-width-page” and save the template file. Now open style sheet in theme directory and add the following CSS and save it.

.full-width-page {
      width: 100%;
}

Now finally we have created a full width page template in twenty twelve theme.

Hope this post helped you on how to create wordpress custom page template. Share it and make your comments below. To get more updates subscribe to our RSS feeds.