WordPress Customized Theme: Template and Directory Structure

In the previous article, we discussed the HTML structure of a customized theme for WordPress. In this post, we would discuss the template and directory structure for the customized themes. Three main files that we would manipulate during this tutorial are index.php, header.php and footer.php.

index.php and all it’s related files make the web pages as we see in our browser. They’re files with some HTML and HTML-outputting-PHP but in the end they make web pages. When we write out our index.php file, we’re going to concentrate only on the middle bit. But we’re going to call in the beginning bit and the end bit. These beginning and ending bits are header.php and footer.php.

Now the manipulated header.php file would be something like this. (You might want to check out the code from the last article):

While the footer file in the manipulated state would be like this:

Now the HTML structure present in the #main div should be copied to the index.php. The file would be as follows:

With only two small additions we’ll have a perfectly valid WordPress Theme and we’ll be on the right track. We need to call in the header and footer to your theme. At the top of index.php, before anything else, add the following template tag:

This tag gets the header. Similarly, the function that would be included at the bottom of the index.php would be:

Reload your page in the browser and check out the source code. Your index.php code for new theme is almost ready. Customizing Sidebar is also an important factor of customizing the entire theme, which we would discuss in details in the next article.