How To Create Personalized Templates for the Pages of WordPress?

In the past lesson we saw a bit more in detail how does the hierarchy of the template work and  how to create a personalized template to use to show the contents of the articles.

Today instead we’ll see how to create a template to assign to the different pages that we have created on our blog/site.

1. What’s the name of the template to assign to the pages of WordPress?

According to the indications given by the hierarcy of the template, seen in the past lesson, the file assigned to the template of the WordPress pages must be called page.php; if this isn’t present in the theme folder, the contents of the pages will be visualized with the general template: index.php.

Ready for a trial test?

2. Create the template to assign to the pages of WordPress

We copy the entire content of our file index.php and we paste it inside the new file. We save this file with the name page.php.

In this way we created a copy of our general template – in a file called page.php – to use for the visualization of the pages. Before we make any kind of changes let’s first see how the contents of the page About is visualized with the use of the present template (Figure 1).

Figure 01 - Screenshot of about page

3. Modify the page.php file

To the page.php file we can now make all the changes we want to adapt the layout of the pages of our blog/site to our needs.

First of all we want to eliminate from the pages the date and  the author that are visualized immediately under the title and after the category shown at the end of the contents of the page, usually these are useless information in a page.

So we eliminate the concerned lines from the markup of the template:

<!-- START DATE -->
<p>
	<?php the_time('j F Y') ?> by <?php the_author() ?>
</p>
<!-- END DATE -->

And afterwards:

<!-- START CATEGORY POST -->
<p class="postmetadata">
	Published in <?php the_category(', ') ?>
</p>
<!-- END CATEGORY POST -->

Now what else can we personalize?

We can personalize everything that we want: we can load a header different from the standard one or we can eliminate the sidebar adapting the template to one single column or we can also show a sidebar different from the one visualized in the generic template. Everything  of course in function of what we effectively want to create.

In Figure 2 you can see a screenshot with all the changes made to the template of the pages of the theme we are developing.

Figure 2 - About page displayed with page.php template changed

4. How to create a personalized template to assign to a specific page?

WordPress doesn’t only give the possibility to create a template to use when needed to visualize the contents of the different pages, it also offers the opportunity to create template to assign to a single page:  this way we can create a  personalized model of  a page to suit our needs.

An example? Let’s create a template to assign only to the Contact page that must contain, besides a short text, a contact module that allow the users to send us an e-mail.

We start with the template we created for the visualization of the pages (page.php), we copy the whole contents and we paste it inside a new file that we’ll call contact.php (the name here can  be whatever because it doesn’t matter with the hierarchy of the templates).

We personalize this  template according to our needs, adding a module that allow users to contact us.

As the first thing, we have to indicate to WordPress the name with which we want to identify the template, first of all we immediately add at the beginning of the file, the following code lines:


<?php

/*

Template Name: Contacts

*/

?>

In this way we’re telling WordPress that the name of this template is “Contacts”.

Now we can proceed with the real changes; immediately after the first loop we add the markup necessary for the creation of our contact module:

<!-- START CONTACT FORM -->
<form id="contacts" method="post" action="">
	<fieldset>
		<legend>Contact form</legend>
		<label for="visitor">Name:</label>
		<input tabindex="1" type="text" id="visitor" name="visitor" value="" /><br/>

		<label for="visitortel">Phonel:</label>
		<input tabindex="2" type="text" id="visitortel" name="visitortel" value="" /><br/>

		<label for="visitormail">E-mail:</label>
		<input tabindex="3" type="text" id="visitormail" name="visitormail" value="" /><br/>

		<label for="notes">Message:</label>
		<textarea tabindex="4" id="notes" name="notes" cols="30" rows="3"></textarea><br/>

		<input tabindex="5" type="submit" id="submit" name="submit" value="submit" />
	</fieldset>
</form>
<!-- END CONTACT FORM -->

As you can see I simply just added the different fields of the module without worrying about the effective functioning of the contact module as this argument is beyond today’s lesson.

Let’s give a quick going-over also to the way the module will be presented adding these rules to our style sheet:


/*form*/

legend {font-weight:bold;font-size:1.2em;}

input,textarea {margin:10px 0;width:250px;padding:5px;}

label {width:6em;float:left;display:block;padding:10px 0;clear:left;}

input[type="submit"] {width:100px;}

The next step is to make WordPress understand that this template must be used by the Contact page created in one of the past lessons.

To obtain this, we modify the concerned page from the Administration Panel. On the left side, among  the attributes of the page,we can choose one of the templates available to apply (Figure 3). We select the template Contacts and click on the Update button to make effective the modify we made.

Figure 3 - To assign a Template to a WordPress page

Now if we go and visualize the contents of our page Contact – clicking on the link on the navigation bar – we should visualize , besides the contents, the module that we added at the bottom of it (Figure 4).

Figure 4 - Contact's page content

The 2.9 version of WordPress has introduced the possibility of creating personalized templates for single pages using the id or the abbreviation (slug) of the page, for example:

  • page-ID.php (page-24.php)
  • Page-slug.php (page-contact.php)

In this way it isn’t necessary  to assign manually the template  to the relative page, since that the platform of the necessary association will directly deal with it, using the hierarchy of the template.

5. Conclusions

Also this lesson arrived to the end. There’re only another two lessons left, at this point of the course WordPress shouldn’t have secrets for you and you should be able to develop a graphic theme personalizing when it occurs all the templates you need.

Lesson after lesson we saw how to personalize every single detail that forms a site/blog managed by WordPress. Now that you came in contact with the potentiality of this platform I would like to know your opinion on all it’s possible use.

6. Index of the articles dealt in this guide

In order to make the consulting of this guide easier at the end of each article I will bring the index of all the issues treated.

  1. How to Install WordPress locally?
  2. WordPress: Let’s have a look at the Administration Panel
  3. How to Create a WordPress Template Starting from Scratch?
  4. WordPress: How to Create the Theme header? (part 1) (part 2)
  5. Let’s take a look at WordPress Loop
  6. Adding the Sidebar to our theme
  7. WordPress: how to make dynamic the Header and the Sidebar of the template?
  8. Hierarchy of the templates and their use: how to create a template for the articles?
  9. How to Create Personalized Templates for WordPress Pages?
  10. WordPress: preset the sidebar for widget
  11. Personalizing the Template of WordPress Comments

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
[pdf]Scarica articolo in PDF[/pdf]
Tags: ,

The Author

Nando is administrator of Edi Group, a Sicilian web agency founded in 2005. He deals with the development of web applications in php language and the implementation and administration of databases. And besides Microsoft Trainer with years of experience in regional and private training courses as a designer and lecturer.

Author's web site | Other articles written by

Related Posts

You may be interested in the following articles:

6 comments

Trackback e pingback

  1. Tweets that mention How To Create Personalized Templates for the Pages of WordPress? | Your Inspiration Web -- Topsy.com
    [...] This post was mentioned on Twitter by V. Tavares (E-Goi), Tom Bangham. Tom Bangham said: How To Create Personalized …
  2. utolsó | Mézeskalács Tündér
    [...] How To Create Personalized Templates for the Pages of WordPress? [...]
  3. wp-popular.com » Blog Archive » How To Create Personalized Templates for the Pages of WordPress? | Your Inspiration Web
    [...] the article here: How To Create Personalized Templates for the Pages of WordPress? | Your Inspiration Web Tags: afg-inspiration, …
  4. wp-popular.com » Blog Archive » How To Create Personalized Templates for the Pages of WordPress? | Your Inspiration Web
    [...] the article here: How To Create Personalized Templates for the Pages of WordPress? | Your Inspiration Web Tags: afg-inspiration, …
  5. Listed on FAQPAL.com
    How To Create Personalized Templates for the Pages of WordPress?... In the past lesson we saw a bit more in detail …

Leave a Reply

Current month ye@r day *