Hierarchy of the templates and their use: how to create a template for the articles?

In the last lesson we completed the realization of the base of the template (index.php) that will be used by WordPress to present the many contents that will be  from time to time requested by the users. Every time the user will request a page or an article or will visualize the index of a category, WordPress – in absence of other templates- will use this  basis template to show the contents. The inconvenience is that in this way we’ll have one single template for every kind of contents to show. And if we want to visualize the contents  of the articles with a template slightly different from the  base one.

Today we’ll see how the hierarchy of the templates of WordPress works and how to create a template to use exclusively for the visualization of the articles. Are you ready?

Index of the article

  1. Which template uses WordPress when it visualizes a certain type of page?
    1. Example.
    2. Panoramic View.
  2. How to create a template for the visualization of the articles?
  3. Conclusions
  4. Index of the articles dealt in this guide

1. Which template uses WordPress when it visualizes a certain type of page?

Last week we saw the  difference between  the terms “theme” and “template, important concepts to better understand the pararagraph you’re going to read.

WordPress uses it’s own hierarchy of template inside a theme: this means that,  on the base of the page requested by the user, it associates a certain template to use to show the contents. Let’s see in detail how this process works.

WordPress uses the “Query String” (the informations contained in every url of our site)  to decide which template will be used to visualize the requested page.

  1. In the first place compare the Query String contained in the url of the requested page to value the type (research page, category page, home page, article page, etc.).
  2. The template to use is chosen according to the order suggested by the hierarchy of the Template of  WordPress: dipending if  the required templates are available or not inside the theme folder, WordPress searches the template file with the specific name and uses the first corresponding template  found.
  3. In addition of the base template (index.php) we can choose whether or not to create other template files.  If  WordPress can’t find a file of Template  with the relative corresponding name, it will pass to the name of the next file according to the hierarchy of the templates. If WordPress doesn’t find no correspondence in the template files, then will be used the base template (index.php)

1.1 Example

If your blog is at the address  http://example.com/wp/ and a visitor clicks on the link of a category like the following one:

http://example.com/wp/category/your-cat/

WordPress will search for a template file in the folder of the current theme corresponding the ID of the category your-cat. If the ID of this category is 4, WordPress will search for template file denominated category-4.php. If this file is not present, WordPress will look for a generic template file for the categories: category.php. If this file doesn’t exist WordPress will search for the generic template  used for the visualization of the archives: archive.php. At the end, even if this file doesn’t exist also, WordPress will choose the generic theme index.php. Exactly how the hierarchy of the templates establishes . (Figure 1.)

1.2 Panoramica View

The following graphic shows which template files are called to generate a page based on the hierarchy of the templates of WordPress.

Figure 1 - hierarchy of the templates of WordPress

After this introduction on the use of the different templates, let’s go and personalize further our theme creating a template for the visualization of the single articles.

2. How to create a template for the visualization of the articles?

Taking a look at the hierarchy of the templates (Figure 1) we immediately see that the template file used for the visualization of the single articles is called single.php, so in the folder of our theme we have to create a file with this name so that WordPress can find it when it has to visualize the content of an article.

As the first step we create a copy of the general template (index.php) and we rename it in single.php. Le jeux son fait, from now on WordPress will always use this file when it will visualize the contents of a single article.

Let’s visualize the contents of an article to see how it seems on the monitor(Figure 2).

Figure 2 - Template used for the articles

At this point we can make all the changes we want to this file (single.php), according to our needs.

Let’s consider the case that we want to visualize, at the end of the article, a message that invites the user to subscribe the feed rss of our blog. To do this will add a small icon  to visually recall the Feed and a short text message.

Let’s prepare the ground before we start writing the markup necessary.

Inside the main folder of the theme we create a new folder called images that will serve to contain all the images that we’ll use in our theme. Inside the folder images we copy the icon that we want to use to represent visually the Feed rss (Figure 3).

Figure 3 - Rss feed icon

The structure of our theme now should appear like in Figure 4.

Figure 4 - Theme structure

Now the time has come to write the required markup to visualize the invitation to subscribe to the Feed. We open the new file that we created, single.php, we’ll put it immediately after the markup that visualizes the comments and we add the following lines of code:

<!-- START FEED -->
<p class="feed">
	If you like my articles,
	<a href="#">subscribe our feed</a>
	to read all our news!
</p>
<!-- END FEED -->

At the style sheet we add the following rule

p.feed  {
    background:url('images/feed.png') no-repeat 10px center;
    padding:20px 0 20px 80px;
    margin:70px 0 0 0;
    border:2px solid #7f192f;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
}

Now if we reload the page of the article we should visualize what is shown in Figure 5.

Figure 5 - Article's template after the personalization

3. Conclusion

We started creating a template dedicated to the visualization of the articles. On the template single.php we can put all the changes we want to adapt the layout to our needs.

We stop here for today, hope the mechanism concerning the hierarchy of the templates of WordPress is clear, this is another important argument  that – if well understood – permits to personalize every single aspect of the platform according to one’s needs

In one of the next lessons we’ll see how to add  on the template of the article also the possibility to leave and visualize the comments, one of the most important characteristics for a blog that permits the interaction between the users and the author of the blog.

I wish that even the lesson of this week has meet your approval and I’ll give you appointment for the next week.

4. 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. Using the Widgets on the Sidebar of Our Template
  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:

5 comments

  1. neo

Trackback e pingback

  1. Tweets that mention Hierarchy of the templates and their use: how to create a template for the articles? | Your Inspiration Web -- Topsy.com
    [...] This post was mentioned on Twitter by Web RSS News, soshableweb and Tom Bangham, V. Tavares (E-Goi). V. Tavares …
  2. How To Create Personalized Templates for the Pages of WordPress? | Your Inspiration Web
    [...] feed for updates on this topic. In the …
  3. Abriendo boca para el curso de WordPress | ceslava - Diseño y Formación
    [...] the Sidebar to our themeWordPress: how to make dynamic the Header and the Sidebar of the template?Hierarchy of the …

Leave a Reply

Current month ye@r day *