Our blog, keeping you up-to-date on our latest news.

 

Tutorial: Code a WordPress Theme from Scratch (part 1)

October 19, 2010 at 3:57 pm | Blog | 5 comments

 

Some one asked me to write a tutorial on how to code a wordpress theme. I think Teaching someone fishing is much better than giving him the fish directly. But creating a wordpress theme is really a big topic, and there is so much you can do that i couldn’t nearly cover it all. This tutorial is mainly focusing on on how to turn an HTML/CSS template into a functioning WordPress theme step by step and giving people a general sense that creating a wordpress theme is not hard.

This tutorial only for newbies to wordpress. If you are an experienced user, you may not be interested in this article, it would be too naive to you.

Let’s get start now.

Step 1, Get the HTML/CSS template Ready

I will start from downloading a free HTML/CSS template from smashing magazine. Smashing magazine rocks! Simple Type is “A minimalistic & typographic layout, based on a 960 pixels grid system.” Designed by Ahmed Chergaoui from Agadir, Morocco. It is simple, neat and very suitable for this tutorial. Please download this template. Btw, this template is gift from Smashing magazine, it can even be used for commercial purpose! (If you want to create a wordpress theme from your own HTML/CSS template, it is also the same. But this tutorial will not cover how to create an HTML/CSS from scratch.)

The structure of this HTML/CSS template is:

Simple Type
├───index.html
├───img
│   ├───photo.jpg
│   ├───logo.gif
│   ├───blank_gravatar.png
└───css
    ├───grid
    │   ├───960.css
    │   ├───reset.css
    │   ├───text.css
    └───stylesheet.css

Step 2, Setup the Structure Of the Theme

The structure of a WordPress theme is quite simple, at the very minimum, a WordPress Theme consists of two files:

* style.css
* index.php

And the WordPress Themes live in subdirectories residing in wp-content/themes/. We can copy our HTML/CSS template folder into the theme directory, and create two empty file style.css and index.php files.

So the The structure of our new theme is:

 wp-content/themes/Simple Type/
├───index.php
├───style.css
├───index.html
├───img
│   ├───photo.jpg
│   ├───logo.gif
│   ├───blank_gravatar.png
└───css
    ├───grid
    │   ├───960.css
    │   ├───reset.css
    │   ├───text.css
    └───stylesheet.css

the index.php and style.css are empty, and we are going to add contents into them.

Step 3, style.css

Let’s start with the CSS file. The CSS file defines everything about the theme for WordPress to use. It usually starts with a comments block. Like:

/*
Theme Name: Simple Type
Theme URI: http://pengbos.com/
Description: A simple theme for Tutorial.
Author: Pengbos.com
Version: 0.1
Tags: 960 Grid, minimalistic & typographic layout (optional)
 
General comments and license statement (optional).
*/

“The style sheet must provide details about the Theme in the form of comments. No two Themes are allowed to have the same details listed in their comment headers, as this will lead to problems in the Theme selection dialog. If you make your own Theme by copying an existing one, make sure you change this information first. “

the comments is really very obvious tells WordPress, the name of the theme, the author and version etc. Every theme must have this infomation, just like every people has a profile.

Now, let’s add the real style into the style sheet file. As the template has already defined stylesheet.css, we can copy the content or we can simply import the stylesheet.css.

@import "css/grid/reset.css";
@import "css/grid/text.css";
@import "css/grid/960.css";
@import "css/stylesheet.css";

The main difference between copying the styles into the style.css file and using @import to include all the styles is that, you don’t have to correct all urls for the latter way. For example, if you copy the style

#main h1 a{background: transparent url('../img/logo.gif') top left no-repeat;}

you need to fix the url to

#main h1 a{background: transparent url('img/logo.gif') top left no-repeat;}

So, i prefer to use import way.

Step 4, Index.php

For part 1, I will take the simplest way, to include only one php file for the theme. I will divide the php file into header.php, footer.php, index.php, and home.php in the following posts.

But for this step, let’s copy everything from index.html to index.php. Now the index.php is same to index.html, so everything in the index.php is static, for example the title is

 <title>Simple Type : a minimalistic & typographic layout</title>

it will keep the same for everyone if installed this theme, of course, this is not what we want. so we need to introduce some wordpress tags to make the content dynamically created.

1. The first one is bloginfo(‘name’)

<?php  bloginfo('name'); ?>

It displays your blog’s title. Instead of hard coded the title in the html it will get the blog’s name from database which is set by user at the backend. So we can replace the string “Simple Type : a minimalistic & typographic layout” with the tag.

 <title><?php  bloginfo('name'); ?></title>

2. The Second one is bloginfo(‘stylesheet_url’)

<?php bloginfo('stylesheet_url'); ?>

which is loading the style sheet for the wordpress. As we have already import all style in the single file, we can replace this code snippet with a single tag.

	<link rel="stylesheet" href="css/grid/reset.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="css/grid/text.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="css/grid/960.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="css/stylesheet.css" type="text/css" media="screen" />
 <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />

3. The Thrid one is bloginfo(‘template_directory’)

it returns the theme absolute url like “http://pengbos.com/wp-content/”

we need to fix the urls for the images. for each tag, it use relative url in the HTML template, but for a theme, we need to use the absolute URL. so add this tag before the relative urls. for example
change this

<img src="img/photo.jpg" title="Chefchaouen , Morocco" alt="Chefchaouen , Morocco" />

to

<img src="<?php bloginfo('template_directory'); ?>/img/photo.jpg" title="Chefchaouen , Morocco" alt="Chefchaouen , Morocco" />

notice the tag for the src attribute.

for more wordpress function tags, you can check the wordpress function reference.

if you follow the steps, you can install this theme at your wordpress backend, and activate it. It is working soundly.

More Readings

http://codex.wordpress.org/Theme_Development

http://codex.wordpress.org/Function_Reference

To be Continued…

You can download the mediate theme here simple-type-part1.zip (Size 463.5 kB)

In the next tutorial part 2, I will elaborate on creating header.php, footer.php and the template hierarchy.please stay tuned.

the series

Tutorial: Code a WordPress Theme from Scratch (part 1)
Tutorial: Code a WordPress Theme from Scratch (part 2)
Tutorial: Code a WordPress Theme from Scratch (part 3)
Tutorial: Code a WordPress Theme from Scratch (part 4)

<< Back to Blog Discuss this post

 

5 Comments to “Tutorial: Code a WordPress Theme from Scratch (part 1)”

  1. Sichere Geldanlage 2010 says:

    There is obviously a lot to know about this. I think you made some good points in Features also.
    Keep working ,great job!

  2. porno says:

    I just came from searching for a good site on Yahoo and came to this site. I have to say these templates are quite nice. Thank you for telling us about them in your blog. I will be sure to bookmark this site and return again.

  3. Bree Morsell says:

    I can see that you put allot of time and effort into your blog and I admire the detailed information that you have been posting. I will bookmark your blog and come back to read for more! Thanks for a great read!

  4. You got a really useful blog I have been here reading for about half an hour. I am a newbie and your post is valuable for me.