WordPress Template Hierarchy – Practical Application

Archive (Photo credit: aftab.)

Let’s implement what you have learned from the above template hierarchy details. One of the best application is customizing your themes. For example, supposing your theme only uses archive.php to display the following content:

• Categories


• Tags


• Date archives

One limitation of this setup is that there is only one template file to display three different sections of content. If you are going to customize your categories, tags and date archives such that they look differently from each other; then you will rely heavily on WordPress conditional tags to get the result.

This sounds OK for minor theme customization. A typical example is when you are implementing different styles for your H1 header tag for categories, tags and date archives. You can do this by setting different id that can be used by your CSS file in returning specific header tag style. A short PHP script using WordPress conditional tags can be implemented such as shown below:

<?php
if (is_category()) {
//This is category page
echo ‘<h1 id=”categoryheader”>This is your category header</h1>’;
}
if (is_tag()) {
//This is tag page
echo ‘<h1 id=”tagheader”>This is your tag page header</h1>’;
}
if (is_date()) {
//This is a date archive page
echo ‘<h1 id=”datearchive”>This is your date archive header</h1>’;
}
?>

Then in your CSS file (style.css for example), you can customize H1 tags to provide different size of fonts such as:

#categoryheader {font-size:20px;}
#tagheader {font-size:25px;}
#datearchive {font-size:30px;}

But if you are doing massive changes in your theme, then you might need to create the canonical template to make things easier to manage. In this case, you will not be using conditional tags anymore since you can directly coding the changes to the corresponding template file without using PHP.

So how are you going to create the canonical template for each types of content (tags and categories) based on the available archive.php?

Follow the steps below:

1. Download archive.php to your desktop. Make a backup of it.


2. Open archive.php using your favourite code editor (notepad will do).


3. Open another blank file using a text editor.


4. Copy and paste all the code from archive.php to this blank file.


5. Save the file as category.php.


6. Open another blank text file.


7. Copy and paste all code from archive.php to this file.


8. Save it as tag.php


9. Upload both category.php and tag.php back to your WordPress theme directory.


10. Access your site to see the changes. Go to any archive, categories or tag page, you should see no errors.

Now you have specific template for each sections, its time to implement any massive design or coding changes that are specific to each templates. Using the previous example if you are implementing different styles to your header H1 tags on categories, tags and date archives without using PHP and conditonal tags:

In category.php template only add:

<h1 id="categoryheader">This is your category header</h1>

In tag.php template only add:

<h1 id="tagheader">This is your tag page header</h1>

In archive.php template only (where this is used for generating the date archive content) add:

<h1 id="datearchive">This is your date archive header</h1>

As you can see, you can implement the changes directly to the template file using HTML and not using PHP.

This is a part of WordPress Template Hierarchy tutorial.

The post WordPress Template Hierarchy – Practical Application appeared first on Tutorial Mini.

Related posts:

1. WordPress Template Hierarchy – Template hierarchy in details


2. WordPress Template Hierarchy


3. The Anatomy of a WordPress Theme – Theme Files and Typical File Structure

via Tutorial Mini http://tutorialmini.com/wordpress-template-hierarchy-practical-application/