Open Source Tutorials - Open Source Training
Open source training & tutorials from experienced, passionate people
chrome icon firefox icon ie icon opera icon safari icon Sings in these Browsers
A- A A+

By A Web Design

pdf icons text icons

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.

diagram1.png
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.


diagram2.png
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.

diagram3.png
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:

/* CSS Document */
/* Styling HTML tags */

body{
margin:0;
padding:0;

font-family:Arial, Helvetica, sans-serif;
font-size:11pt;
font-weight:normal;
}

/* Styling User Defined IDs */
#divOuterParent
{
width:100%;
height:auto;
float:left;
background:url(images/bg240.jpg) repeat-x scroll 0 0 ;
}

#divParent
{
width:1016px;
height:auto;
/*border:1px solid black;*/
margin-left:auto;
margin-right:auto;
}

#divHeader
{
float:left;
width:100%;
height:250px;

background-color:#FFFFCC;
}

#divTopMenu
{
float:left;
width:100%;
height:60px;

background-color:#CCFF99;
}

#divContent
{
float:left;
width:68%;
height:610px;
background-color:#CCCCCC;
}

#divLeftCol
{
float:left;
width:15%;
height:600px;

padding:5px 5px 5px 5px;
background-color:#D2F0EF;
}

#divRightCol
{
float:right;
width:15%;
height:600px;

padding:5px 5px 5px 5px;
background-color:#FFFFCC;
}

#divFooter
{
float:left;
width:100%;
height:40px;

background-color:#F8729A;
}

#divFooterNav
{
height:30px;
text-align:center;
padding-top:10px;
}

diagram.png
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.

Container Name The Content It Holds
HEADER This container will hold and display all the content associated with the Header section of the BLOG page.
TOP MENU This container will hold and display all the menu items of the BLOG. These menu items permit user navigation through various BLOG resources, such as BLOG pages or BLOG archives and so on.
CONTENT This container will hold and display all the BLOG posts or BLOG pages created using the admin tools of Wordpress
LEFT This container will hold and display a number of BLOG components ( or BLOG attributes ) such as a Login In module, or a Polls module, Visitors to the BLOG and so on
RIGHT This container will hold and display any additional BLOG components or widgets necessary that add value to your BLOG
FOOTER This container will hold and display all the the content associated with the Footer section of the BLOG page.