Creating a WordPress Theme Template
Over the past couple of weeks, I have begun learning how to create a WordPress theme. As I make progress on my first theme, I will continue to add these posts, covering what I have learnt. The purpose of this is to help others going through the same process. In the first two postings, I covered how to setup a work environment and what files are initially needed to begin creating a WordPress theme. With this post, I will explain what is included in the template files.
As mentioned in the last post, a WordPress theme requires a stylesheet named style.css and a template PHP file called index. That is the bare minimum and I have broken the index file down into several additional template files written in PHP, header, sidebar, and footer. In addition to these files, I have also created a PHP file called functions that will contain all of the individual PHP functions used in this theme.
The Index Template
First, let us take a look at the index.php file. Here is the source code used:
Right off the bat, you will notice that I use PHP to grab the header template
grow your small business
learn more about the creation of a business blog
Basically, this entire template is built using HTML, with CSS specified in the stylesheet. Whenever I need to grab information from the WordPress database (pages, posts, titles, categories, etc.), PHP is used. PHP code always started with
In addition to building the template with the index file, the index file also grabs information from the WordPress database to display posts and pages. You can consider the index file as containing the main content and structure of your WordPress pages and posts. In order to display information from the WordPress database, a PHP loop is needed. The loop starts with
The Header Template
At the very beginning of the index template, the header information is referenced from the header template. Here is the source code:
This includes meta information, links to stylesheets, and anything else that you want to include inside the
Additional meta information and a more detailed header can be built into the header template file. If you think the header template looks pretty bare right now, wait till you look at the footer template. The footer template, as I have it right now includes the following code, with no PHP references:
Again, the footer can contain whatever information from the WordPress database that you would like to automatically include in the footer of every page.
The Sidebar Template
As of the writing of this post, my sidebar template automatically includes a category and archive widget. I have not set this as optional and it is automatically included on every page and post:
That covers the template files used so far. The style sheet, which already contains the base information needed by WordPress to recognize the theme, will also include some basic CSS to begin styling the look of the site. That is my next step. With this very basic template and HTML structure in place, I will begin styling the site, before learning how to include various WordPress functions, which will be placed in the PHP functions file.
With the included code, you have what is needed to display the test data with a basic WordPress theme. By the time I create my next posting, I will have a live preview of how the site looks so far, with additional styling. Join me next time for a more in depth look at WordPress functions and how they can be included in a template to add widgets and additional options.
If you are looking for affordable web design services for your business, Cloudy Mouse provides timely personalized service. Our focus is creating great looking responsive website designs for small businesses without breaking their bank.
Take a look at our Web Design Services and discover how we can get your business into the cloud.