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.
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
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:
… create a new file, place and save as header.php:
<?php get_header(); ?>
The Footer include usually contains any copyright statements any scripts as well as closing up the page’s code.
… create a new file, place and save as footer.php:
<?php get_footer(); ?>
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 sidbear.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:
… create a new file, place and save as sidbear.php:
<?php get_sidebar(); ?>
If we go back to our site to preview our work, it should appear like nothing happened:
Step Two: Creating the “Page & Posting” Files
Here is where we are going to make our template files for each section of our website.
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:
This way we will be able to see which template is actually loading where:
When you are loading a regular page in your site, you will most likely load the Pages template.
Note: Don’t forget to tag your page.php file!
When you are loading a single blog posting in your site, you will most likely load the Single Posting template.
Note: Don’t forget to tag your single.php file!
Note: Don’t forget to tag your front-page.php file!
Once we have created all of these files, we should be able to see our tags for the different pages of our site: