Creating A Custom Wordpress Theme

NOTE: Click on the icon immediately above to download all the resources used in this lesson

Introduction

Creating a custom WordPress theme basically starts off by creating place holders for your BLOG’s content using HTML codespec. Before starting on the journey of a custom Wordpress theme creation, you need to first have a clear picture in your mind of what would be its structure.

The easiest way to have clarity about a custom theme is to first create a simple paper / pencil sketch of what the BLOG’s content placeholders should look like. Take a look at diagram 1 for an example. In diagram 1 each rectangle represents a BLOG container that will display some BLOG content or the other.

In case you are wondering where the BLOG content is located, a lot of it is in the Wordpress database, some content such as images used on the BLOG and style sheets that style BLOG content would be in different folders and so on which are all part of the Wordpress installation.

Step 1: Theme Sketch

• Create a simple sketch using a piece of paper and a pencil of what the themes, content holders, should look like. Diagram 1 is an example.

Diagram 1

• Once a preliminary, free hand, pencil sketch is done fair this out i.e. create a neater sketch of this on another piece of paper, where you mention the size of the containers, and give these containers appropriate names as shown in Diagram 2.

Diagram 2

Once the theme has been faired out and has taken on a satisfying look, it’s time to actually create these containers using HTML code, and style each container as desired using a cascading style sheet.

We will start by creating a simple HTML based theme that looks like diagram 2.

Once the HTML codespec is satisfactory, we will convert the HTML code to PHP.

This is done by adding appropriate PHP codespec to the HTML file to enhance the functionality of static HTML codespec.

The PHP codespec added, permits access to the Wordpress database and /or folders to obtain various BLOG resources that must be displayed on the BLOG post or web page.

Native Wordpress PHP methods are added within each place holder <div></div> created.

These methods talk to the Wordpress database. They pick up BLOG information or Page information from the Wordpress database and display this within the placeholder.

Hence, it a great idea to name the place holder Divs descriptively and sensibly as shown in diagram 2.

Step2: Converting The Sketch To An HTML File

• It’s now time to convert the faired out pencil sketch in to an HTML file. Open any editor of your choice and create the HTML file whose structure contains a series of using Divs as shown in diagram 3.

Diagram 3

1. Create a folder named mytemplate on your hard disk
2. Save this HTML file as index.html to this folder in its root
3. This is the skeleton of the Wordpress theme
4. To help identify the containers visually we shall color each container with a different pastel color

To achieve this we should create a Cascading Style Sheet (CSS) file where you can define each containers height, width, background color and so on. This file is named style.css and saved in the same folder that index.html is saved.

Let’s name the CSS file as style.css .

NOTE: It’s mandatory that the CSS file be named style.css.

A sample of the codespec of style.css is shown below:

Diagram 4

NOTE: The folder mytemplate now contains index.html and its associated style sheet style.css.

If index.html is run in any Browser the output would be as shown in diagram 4.

This completes creating the HTML and CSS codespec for the Wordpress theme.

In the next lesson, we will take a look at a very simple technique to convert this HTML based theme to a proper PHP based Wordpress BLOG template quite capable of displaying actual BLOG content within the containers created to hold such content.

• Next >