Thursday, April 18, 2024

How to Create Custom Page Templates in WordPress

There are a number of ways you can customize WordPress. You can install or create a custom theme design. You even take the default theme and modify it. One of the most effective ways to create a custom website with WordPress is using the custom page templates feature. Custom page templates are relatively easy to create, and come particularly in use when you want to quickly create a new look for a section of your website or the entire website. Let’s look at how to access custom page templates and then how to create your own templates.

When you create and publish a page in WordPress, the file page.php is used for this. page.php in this case is the template used by default. To create a custom page you have two options. you can either modify the default page template or you can create one of your own. You could, for example, use custom page templates for a certain section of your website and use the default template for the rest. You can build and deploy as many different templates as you like, so once you understand them, it really opens up a lot of options to customize your WordPress site to meet the needs of your website. Note that page templates are theme specific.

Let’s get cracking. Log into your WordPress setup and go to >Pages -> Add New. Under the Page Attribute pane, which will mostly be on the right hand side of the admin panel, you will see an option titled Template. Click on the drop down menu to view the existing options. You will mostly have two option. The Default Template and another one with one column, no sidebar.

Image 1

To create a custom page template you will need to have access to your WordPress setup files. We will modify the files related to your theme, so it might be a good idea to take a backup of your theme. I will be working with the default WordPress theme in version 3, Twenty Ten. Go to the location wordpress/wp-content/themes/twentyten. This is the theme directory and also the location where your template, along with the default page template, will reside. Create a new file with a suitable name. For example, create a file called random_page.php. In the file enter the following:

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

Save the file and to go Pages -> Add New in the WordPress admin panel. You should now be able to find a new entry in the templates drop down menu called Address Book Template. If you select this template and publish or update the page at hand you will see a blank page when you load it. The reason for this is that we have not defined anything here. So let’s do that.

To begin with we’ll add some basic stuff like a header and a footer. Add the following lines below the template declaration.

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

Image 2

Save the file and load the page again. You will see the header and footer appear. Now let’s add a body of content. Make sure you enter a title and a body of text to your post. Save it and return to the random_page.php. Add the following in between the header and footer entries you made earlier.

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php the_title(); ?>
<?php the_content(); ?>
<?php endwhile; endif; ?>

Here we are using a basic if statement to check if there is any content to be displayed and displaying it. Save the file and refresh the page in your browser. You should be able to see the title and body texts. don’t worry too much about how it looks right now. All that will be adjusted using CSS. The template does not control that part.

Image 3

There are a number of other items you can add to your custom template. For example if you want to display a list of all the categories in the form of a list of all the categories on your blog as a list you can use the following bit of code.

<h1>Archives</h1>

<h2>Archives by Subject</h2>
<ul>
<?php wp_list_cats(); ?>
</ul>

Image 4

To bring up the sidebar add the line <?php get_sidebar(); ?>. You can view a list of template tags for WordPress in the Codex documentation. There are a number of additions you can make. You may have to play and figure out where to add which tag to maintain a certain order in things. You can also create a set of custom CSS classes for your custom page template and define it in the CSS file so that you have give your template pages a different look than the other pages.

Figure 5

A good approach to take it to look at the default page.php file of your theme as an example. This default page template will give you an idea of how things are organized and you can take some ideas from it. You can also copy the file and modify it to create your own template.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured