Understanding How a WordPress Theme Works

WordPress is a popular blogging platform. Like me, everyone wants to have a unique theme for their wordpress blog. Although there are lots of free themes available for download, most of them are either common or have unwanted sponsored footer links. I personally don’t like to put in any footer link except the designer link and wordpress.org link. So, how can we get a cool looking free unique theme. The best way to get a unique theme is to design a wordpress especially for yourself.

Designing a wordpress theme is not that tough but it’s also not going to be that easy. In this article I will help you to understand a wordpress themes file. Without a proper understanding of wordpress theme files and tags, it can be a frustrating project. I am sure, after reading this article, you might give a try.

Before I start, I suggest you install wordpress on your local system. For that you will need to make your local computer act as a local server. If you are on windows OS, I suggest you install WampServer. If you’re running a Mac you can use MAMP. After installing, you will be able to install and run wordpress on your local system. If you are facing any trouble installing or don’t want the headache of making a local server, you can install wordpress on a web server. In this article, I am not going to explain to “How to install WampServer and install wordpress on a local system”. But hopefully I will soon post an article on how to install wordpress on a local system.

There is a good article about wordpress theme development at wordpress.org

You can learn many good points from this link. Let’s start understanding a wordpress theme.

Introduction:

A wordpress theme is combination of few templates files. Below is the list of all files of a wordpress theme.

• style.css
• index.php
• header.php
• sidebar.php
• footer.php
• comments.php
• comments-popup.php
• archive.php
• single.php
• page.php
• category.php
• search.php
• 404.php
• author.php
• date.php
• links.php
• functions.php

Each wordpress page/post is made up of combination of many theme files. For example,  the homepage of a wordpress blog is a combination of  the following files.

Header.php, Index.php, Sidebar.php and footer.php

Below image will help you understand my point better…

The header file is called using code:

<?php get_header(); ?>

And similarly, we can call sidebar and footer template file.

* To include the header, use the get_header() template tag.
* To include the sidebar, use the get_sidebar() template tag.
* To include the footer, use the get_footer() template tag.

WordPress Loop

Understanding loop is very important in developing a wordpress theme. Loop is used to call custom wordpress function and display on the current page. The loop is used in index.php file and any file that displays post information.

WordPress Function File

Every wordpress theme has a function file named as functions.php The function file defines functions used in the theme.

Home Page
wordpress will search for home.php first and then index.php for home page. It is main page of your wordpress site.

WordPress Page
Pages in wordpress acts as static pages, like you can have contact page, about page, advertise page.

WordPress Post
The post you make on wordpress are posts pages. Single.php is your blog post page. If the theme don’t have single.php page, it will show index.php page

WordPress Category
Your posts on a wordpress blog is categorized, if you don’t specify any category, it goes to a default category. Category page displays posts of that particular category.

WordPress comments
comments.php file is used to show comment box and show comments on the blog. If it is not present in the template file, wordpress will use comments.php from the “default” theme.

WordPress Archive
It shows your wordpress posts based on date like archive of May, 2009 posts.

404.php
The 404 Not Found page is used by WordPress when it cannot find a post or page that matches the query.

Similarly we have author.php, date.php, search.php files.

Now you understand the wordpress theme files, I will explain how to start making a wordpress theme, but I won’t be able to tell youthe exact coding and complete tutorial. This is just a brief introduction. But don’t worry, soon I will post a complete coding tutorial for making a wordpress theme.

Step1:
Go to you wordpress theme folder (wp-content/themes) and create a new folder and name it as “test”. So, we have created a new theme folder of name “test”. Login in to your wordpress admin panel and Navigate to Appearance >>Themes.

You will find that there is no theme of name” test”. It’s because two theme files are needed for wordpress to recognize a wordpress theme.

These two files are:
Index.php and css.php

So, create two notepad files in test folder and rename theme to index.php and style.css

After creating these two files, wordpress will show a new theme of name “test”.

Step 2:
Index.php is the main page of your blog. Next important file is style.css This file is present in every theme, it defines the theme layout and style. The style.css file also stores information about the theme like theme name, theme version, theme url, theme author, theme author url etc.

The first few lines of CSS should be like this:
/*
Theme Name: YourThemeName
Theme URI: the-theme’s-web-page
Description: a-brief-description about the theme
Author: your-name
Author URI: your webpage url.
Template: use-this-to-define-a-parent-theme–optional
Version: theme version
.
General comments/License Statement if any.
.
*/

I have used following lines for our test wordpress theme CSS file

And the wordpress admin panel will show this information for “test” theme as shown below.

Step 3:
You will see that our “test” wordpress theme don’t have any screenshot preview image in admin panel. It’s because we have not added any screenshot image file in test folder. Add a image file of name screenshot.png and of size 300 X 225px in test theme folder.

Now, this image will be shown as screenshot in wordpress admin panel.

Step 4:
Activate your “test” theme. Now your wordpress blog will show a blank page as our index.php file is empty.

Add some HTML codes in index.php file. I have added following codes:

<h1> This is a Test wordpress page</h1>

Now our wordpress test theme will show a page saying “This is a Test wordpress page”

So, if you add anything in index.php file it will appear on first page of the blog. In next step we will call other file like header.php, sidebar.php, footer.php

Step 5:
In this step we will learn about header file. Open notepad and create a new text file, save it in test theme folder and name it as header.php

So, we have following files in our test folder.

Add following codes in header.php file

<center><h2> This is header file</h2></center>

Now we will call header.php file in index.php file.

Add following codes in index.php file.

<?php get_header(); ?>

Save both header.php and index.php file. Now refresh your wordpress blog. It will appear like this.

similarly we will create footer.php and sidebar.php and call these files in index.php page.

Step 6:
In this step we will look in more details in header.php file and we will also add some functions in header file. First we will add title. Just copy paste below code to add title in theme.

<title><?php wp_title(‘&laquo;’, true, ‘right’); ?> <?php bloginfo(‘name’); ?></title>

Now we will import style sheet in header.php. Copy paste below code just below title code to import style.css file in header file.

<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />

Similarly we have to add codes in footer.php and sidebar.php etc files. For coding you need some basic knowledge about HTML, CSS and PHP. I am sorry, I have not mentioned coding of the wordpress theme in this post, but soon I will post a complete coding of a wordpress theme.

Comments

About Author