In order to study and customize the theme freely without affecting the live blog, this is highly suggested to installed WordPress v3.2.1 on a XAMPP development server on your local computer. Actually we are going to customize WordPress theme on a development server in this tutorial series.

Where Are Themes of WordPress Saved (Themes Folder)?

If you have navigated through the folders and files structures of WordPress website before. You should find out that the files of WordPress templates are saved in the following directory:

home/wp-content/themes/

The location of WordPress themes folder is shown in the diagram below:

This is also quite obvious that the files of the two WordPress themes, Twenty Eleven and Twenty Ten, that come with default installation, are saved in the twenteleven directory and twentyten directory respectively.

Study WordPress Themes File Structure

We already found and located the WordPress themes folders. The files of our current themes (Twenty Ten) that we are using is saved in the following folder:

home/wp-content/themes/twentyten/

Let’s open the /twentyten/ directory and take a preliminary study at the WordPress file structures of the theme files. This is shown in the diagram below:

As expected, the file names of WordPress theme are very familiar as they are almost the same as other portal websites, for example, osCommerce. Obviously the index.php should be the main template file that used to compose the template, the header.php should be used to compose the Header Section, the sidebar.php should be used to compose the Left or Right Column Section, and the footer.php should be used to compose the Footer Section, etc.

Hence our preliminary assumption is that WordPress is mainly composed of four section, namely:

  • Header Section
  • Main Content Section, or Blog Posts Section
  • Sidebar Section
  • Footer

This can be illustrated in the diagram below:

Before start customizing the theme of WordPress, let’s study the file structure of some theme files.

Study WordPress Main Themes File Structure (index.php)

It is time to study some of the theme files of WordPress. In order to customize the theme of WordPress, this is necessary to have some basic idea of the file structure.

The first WordPress theme file to study is surely the index.php, the main theme file. This file is very simple. It simply calls the Header file, Sidebar file, Footer bar, and run the loop to output the posts for the Main Content.

Let’s play around with the WordPress Main Content Section by replacing the loop that used to output the posts with “Main Contents Display Here!”. The index.php file now looks like:

Look! The Main Contents Section now is displaying “Main Contents Display Here!” as shown in the diagram below:

Now you should have some basic idea the file structure of the main theme file (index.php) file of WordPress.

Study WordPress Header Section File Structure (header.php)

The Header Section of WordPress theme include the Blog Title, Blog Description, Banner and Navigation Menu. The layout of the WordPress Header Section can best be illustrated with the diagram below.

WordPress header.php File

Open the WordPress header.php file inside the template folder (e.g. twentyten). The PHP codes for the Blog Title, Blog Description, Banner and Navigation Menu can easily be identified. Actually the codes of WordPress files are commented very well.

Let’s play around to see if our assumption is corrected or not.

WordPress Header Title and Description

Replace the block of codes of Header Title and Description of the header.php with “Header Title and Description Display Here!” as shown below:

Refresh the browser to see the changes. The result is shown as below:

Yeah! these two block of codes are for the Header Title and Header Description.

WordPress Header Banner

Remove the block of codes for the WordPress banner as shown in the diagram below:

Refresh the browser to see the changes. The WordPress theme is now shown as below:

Now you should have some basic idea of the code structure of WordPress Header. This is very useful to customize the theme of WordPress Header. Actually the WordPress Header Section is usually the first place to customize.

Study WordPress Sidebar Section File Structure (sidebar.php)

The file structure of WordPress Sidebar Section (sidebar.php) is also very simple. The codes are very easy to understand and follow since all the codes are commented very well. I noticed that the Sidebar seems to be a place to embed the Widgets. Interesting enough, the widget areas are divided into two sections – the primary widget area and the secondary widget area.

Let’s take a look what widgets are already put on the Widget Area. Widgets can be managed in the WordPress Admin Panel at Dashboard -> Appearance -> Widgets as shown in the diagram below:

Take a look at what widgets are already put on the Widget Area. There are already 6 widgets put on the Primary Widget Area by default when WordPress was installed.

However there is no any widget put on the Secondary Widget Area. Let’s put on a widget (Calendar) to the Secondary Widget Area to see how it will be displayed. As expected the Calendar display immediately below the Primary Widget Area. In other words, the Secondary Widget Area is just below the Primary Secondary Area.

Another interesting thing we found out is that the WordPress programmer do not wish the Sidebar Area appear to be blank when there is no any widget put on it. Take a look at the codes:

Note that if there is no any widget on the Primary Widget Area, the hard-code widgets will be used. Therefore the Primary Widget Area will never be empty.

We will shows how to write codes for widgets to insert into Sidebar and other sections later. Please read on…..