Creating the Template Files for a WordPress Theme | WEB170 | Students of Premium Design Works

WEB170 » Creating the Template Files for a WordPress Theme

Creating a template file structure for a WordPress site is fairly easy to do and is much like creating a set of include files for a semi-dynamic website like you may have already done in the past.

I started off by using my same old template structure that I always go back to when designing and producing a new website. This way, I was able to develop a WordPress template file structure (system) that was a familiar build for me.

Since I was also familiar with the Anatomy of a WordPress Theme, I was able to take my basic template and break it into the standard template files to begin developing my own WordPress theme:

Example Files of a Theme

See Also:

Step One: Creating the “Include” Files

If you have ever broken a template apart and created a multi-page website using php includes, this should be a relatively familiar concept to you.

See Also: Multiple Pages for Your Website | HCDE532 | Premium Design Works

1) The Document (header.php)

Your Document Head include typically contains everything from your doctype through your main Navigation Menus and possibly beyond.

To create the header.php file, we will need to open the current index.php file that we have created to start our theme. We will then need to cut everything from the doctype thru where our content element starts:

Cut Your Document Header

… create a new file, place and save as header.php:

Save Your Header File

Next, we will need to go back to our index.php file and call the header.php file using the get header function:

Call the Get Header Function

1	<?php get_header(); ?>

2) The Footer (footer.php)

The Footer include usually contains any copyright statements any scripts as well as closing up the page’s code.

To create the footer.php file, we will need to open our index.php file again. This time, we will then need to cut everything from the end of our content element to the end of our document:

Cut Your Document Footer

… create a new file, place and save as footer.php:

Save As Your Footer File

We will need to go back to our index.php file again and this time call the footer.php file using the get footer function:

Call The Footer Function

1	<?php get_footer(); ?>

3) The Sidebar (sidebar.php)

Typically, The Sidebar is a narrow vertical column often jam-packed with lots of information about a website. Found on most WordPress sites, the sidebar is usually placed on the right or left-hand side of the web page. You can find my sidebar on the right hand side of my page. It is where my sub-page navigation lives.

To create the sidebar.php file, we will need to open our index.php file again. This time, we will then need to cut everything from the beginning of our sidebar element to the end of our sidebar element:

Cut Your Sidebar Element

… create a new file, place and save as sidbear.php:

Save As Your Sidebar File

We will need to go back to our index.php file again and this time call the sidbear.php file using the get sidebar function:

Call The Get Sidebar Function

1	<?php get_sidebar(); ?>

If we go back to our site to preview our work, it should appear like nothing happened:

My Site Now Has Include Files

Step Two: Creating the “Page & Posting” Files

Here is where we are going to make our template files for each section of our website.

1) Index (index.php)

When the blog feed loads (or the home page in some cases), you are most likely using the index.php template. Fortunately, we have already created this file. But, let’s make one slight modification to it.

Let’s open the index.php template and tag it: