HowTo – Understanding The WordPress Theme Template Process

Filed under: Wordpress Tips

wordpress_logoWhen designing your website with WordPress there will be times when you need to alter the standard layout to display custom information or provide a specialized look and feel for your site.

In Static Website design every page has its own file. You design a single template based on the look that you want to give your site and  if you need to add a new page you copy it – fill it with content – add it to your site and your visitors view it.

Includes help
The main problem with a Static HTML website is that if you add a new page you need to update every html file with a new menu reference so your visitors can get to that page. With the use of PHP, Perl or SHTML you can add includes. This is when the main file calls the content of an outside file to be inserted.

Many things on a website will not change or if they do change the update is necessary across your site. Your header with logo, your menu system, your sidebars that show advertisements, your page footer all of these areas across your site are pretty constant and splitting out these parts and including them and wrapping them around your content pages is a good way to minimize work of managing a site.

The use of includes still means that each content page will require its own file and the includes will be added to each of them as calls to outside files. In Php that might look like this:

<?php include("header.php"); ?>
<?php include("menu.php"); ?>
your content would be here
<?php include("footer.php"); ?>

CMS Blog Systems like WordPress take the idea of includes to the next step. We learned that websites that make use of includes use them to wrap and insert content into files that hold the actual content of the pages visitors view.

With the use of a database WordPress stores that page specific content and displays it based on the URL that is called.  Previously if a visitor wanted to see your about page you would have made an about.php file and added it to your site.  With WordPress you make an page.php file and when a visitor goes to www.yoursite.com/about or www.yoursite.com/contact the single.php theme template file is used to display and format that page.  The actual content is pulled from the database.

There are a few different template files that are available to WordPress developers lets take a look at some of them.

Manditory Theme Files

In your theme directory you will find 3 primary template files.

header.php – Starts your page output and includes the top portion of your page down to the main area just above your loop. Doctype, HTML head, Meta, Script, CSS and other information is included in this area. At least one menu will be located within this file normally the Pages Menu.

index.php – Includes the main area of your page. Normally this file is for display of your home page and will show a loop of most recent posts however with Conditional Statements the Index.php could act as the only template for showing HomePage, Pages, Posts, Categories, Archives. A call to a Post Category sidebar.php file is common for navigation of posts by category.

footer.php – This file is used to close the remainder of your page it may include the bottom bar of your html page and any additional javascript and HTML to tell the browser the page is completed.

After the three mandatory template files you will find template files that automatically replace the index.php to display content based on the content the visitor is viewing.

Secondary Theme Files

Most themes will have more then the basic mandatory theme templates we have already mentioned 2 of them but lets look at ones you will probably come across in your theme directory. There is a hierarchy to the theme templates so if one is missing it will use the index.php file or one higher in the list.

page.php – Used to format pages (not posts)

single.php – Used to format posts

home.php – Can be used as your home page to format the first page the visitor sees. (for non blog style sites this is very important to use.)

sidebar.php – Used to display left, right or multiple sidebar menus and columns on your pages.

archive.php – Used to format lists of pages for Archives (based on date) or Categories (limited to a Category)

search.php – Shows your search results

author.php – displays posts from an author (may also be found in archive.php)

tag.php – displays posts of a specific tag (may also be found in archive.php)

category.php – displays lists of files when a visitor clicks on a category menu (may also be found in archive.php)

date.php  – displays lists of files by date  (may also be found in archive.php)

404.php – Used to display information when a visitor trys to view a page that is not available.

Other Special Theme Files

category-17.php – This file would be used to display a list of posts in category 17 only. Useful if you need to sort the posts in a different way or if you want to display just a list of post titles and not the content for a directory type display of a specific category.

You must know the category ID to use in the template file name.

Page Templates -As you know the page.php is used to format your pages but when necessary you can apply a special template.

To create a Specific Page template that will only format those pages you normally would start by copping your page.php file and rename it aboutpagetemplate.php and then to make use of the template for a specific page you must add a template header to that file.

Place the following at the very top of the new template file aboutpagetemplate.php.

<?php
/*
Template Name: AboutPageTemplate
*/
?>

Now open your about page in wordpress or create it if you need to and on the right side of your edit page you will see an option to use a different template for your page. Select the one you want from the list and update or publish then check your results.

Internal Theme Templates

There are also a number of internal theme template files that can help you format your site.

comments.php – Can be used to format the way your post comments look.

comments-popup.php – might be used in some themes to format how a popup looks when using comments.

If neither a comments or comments-popup file is used in your theme wordpress will use its internal comments formatting to format your comments area and provide standard CSS IDs and Classes so you can change their appearance.

sidebar.php files can be also be added in unconventional areas where you want to include widgets or control the content within WordPress. Name the files sidebar1.php sidebar2.php and so on and then add them to your functions.php file so they will be availiable in your widgets area.

attachment.php can be used to format the display of attachment types.

User Made Includes are also good for designing your site. If you need to include information from outside wordpress the use of an include can call a store script or other application. You may need to display the information in an IFrame or use AJAX to display info that will update based on user input.

Another way to do that is to develop your own plugin .

Note

So hopefully you now understand that there are many different theme templates that you can use to format your site specifically the way you like. You do not need to have a site that looks like a standard blog the ability of the software to display information is up to your creativity.

In other HowTos we will cover some of the possibilities of special theme templates in more detail.

Just remember that when you are starting off your designs the Theme System should be thought of as a Wrapper of your content where you can format and inject content and display it with control.