I created a new WordPress theme and started using it on the website. This post is for geeks who are interested in the technical details of the webpage. For me, I’ll use it to document what I did.

Conclusion

The good news is …. drum roll please ….. I’ve introduced great new theme called Clearcreek …. Ta Da! I’ve also learned a lot about HTML, CSS, java script, mySQL, PHP, Ajax, and WordPress themes, which was my real goal.

The bad news is that after spending quite a bit of time reading two books and fiddling around with CSS and js and php files, my new theme doesn’t do much more than my old one, and I won’t make millions selling my theme (as the ‘Wicked’ book, described below, suggests). I won’t even make a dime 🙂 . If you want to use my theme, I’ll make it available for download. I’ve also learned that doing web development isn’t really much fun (for me anyway).

I now know enough to be dangerous, and, if I have time and motivation, I have some ideas for future upgrades to my theme.

Background

For those of you not familiar with WordPress, a ‘theme’ is kind of like the ‘skin’ for your WordPress website. There are thousands of themes available, many of which are free. You can easily download one and activate it, and Voila! your site looks different. The ‘backend’ of the website is the interface that the web administrator uses to change various settings and widgets that affect the look and feel of the site. Each theme adds its own backend interface to give you different options and settings.

I’ve been using the theme that comes with the ‘out of box’ WordPress installation, which WordPress named the ‘TwentyEleven’ theme. It’s fine, and really does everything I want. So, why change it? And why write my own theme instead of using one of the thousands of free ones? One thing I wanted that the TwentyEleven theme didn’t provide is that the page with the post has the list of recent posts. I tried various free themes, but none were quite what I wanted. I decided to write my own theme mainly to learn more about web development. It seemed like a nice little practical project that I could use to apply what I learned.

Books

I tried learning how to create the theme by trial and error, and using online material. However, I wasn’t making very fast progress. I decided I needed some more ‘formal’ training by reading some books.

“HTML, XHTML, &CSS All-In-One for Dummies”

I’ll refer to this as the ‘dummies’ book. The author is Andy Harris.

This is, for me, a great book. I have experience writing software, but I was a dummy about web development. I had poked around enough while trying to learn on my own to know there is an alphabet soup of acronyms describing programming languages and syntax that are needed, and it was getting very confusing. This book covered them all in a cohesive and easy to learn style. It saved buying a bunch of books for each topic (e.g. one for CSS, one for PHP, etc), and then trying to piece together all the different concepts. The book is a thousand pages containing 8 books in one. The 8 books are:

1. HTML/XHTML
2. CSS
3. Positional CSS
4. JavaScript
5. PHP
6. MySQL
7. AJAX
8. Creating a Web Site

Some of the book was basic programming 101, which I could skim read. One thing I really liked was the fairly detailed descriptions of a lot of free tools that are very useful. I now use the following free tools:

1. xampp: this allows me to host my website on my own personal computer. I use this for developing the site. Once I get it how I like it, then I can download it the hosting computer.
2. GIMP: A free PhotoShop-like program. They say it does everything photoshop does.
3. IrfanView: A nice program for messing with images.
4. Notepadd++: A nice editor.
5. Komodo Edit: A nice development environment.
6. Aptana: A free IDE (Integrated Development Environment).
7. Firefox Web developer enhancements, including FireBug.

“Build Your Own Wicked WordPress Themes”

I’ll refer to this as the ‘wicked’ book. The author’s are Allan Cole, Raena Jackson Armitage, Brandon R. Jones, and Jeffrey Way.

This isn’t a great book, but it had information that was very useful to me. One thing I like is that it assumes the use of the ‘Thematic’ framework theme. The easiest way to write your own them is to create what WordPress calls a ‘child theme’. The child then uses an existing theme as the ‘parent’ (this can be any of the thousands of available WordPress themes), and allows you to customize it to your own needs. The advantage of this is that you get all the features from the ‘parent’ with no additional work. Some of the WordPress themes are designed to be a parent rather than a standalone theme. Themes like this are called ‘framework’ themes, because they provide a framework for you to use with your child theme. My friend Dave (www.barkingdawgs.com) recommended the Thematic theme, and I found out that it’s very popular and used for a lot of WordPress themes. I decided to try it. This book fit the bill because it describes how to create your own theme using the Thematic framework theme.

The book isn’t very many pages (approximately 200 pages), so it’s stingy with details (especially compared to the ‘dummies’ book above!). About half of the book wasn’t much help to me. That half describes how to make a site look great so that you can create a theme that you can sell and make millions. My interest was only to improve my own site and not make a theme that I could sell, although making millions was appealing to me. The second half had practical details and examples of using Thematic and making your own theme. This was the useful part for me (so only 100 pages of useful stuff). It explains how to make the child theme, and how to customize the parent without changing the parent at all. This is all I’ve done so far with the Clearcreek theme. The book also describes how to create custom widgets, shortcodes, custom pages, and a backend options page for your theme. These are interesting and I may use them on my theme later.

The approach of the book was to go through examples. They provided a site where I could download the examples and run them. I worked through most of the examples, and found a lot of errors. In some cases the example code just didn’t work at all. It was frustrating to debug their problems while trying to learn at the same time. This is in contrast to the dummies book, where all of the example code worked exactly as advertised. The ‘wicked’ book has a website to submit errors found in the book, and I submitted all the ones I found. If you want to know what they are, I’ll add them to this post.

The Clearcreek Theme

In this section I’ll briefly describe what I did to create the Clearcreek theme. I did everything on my home computer using the xampp server software that I downloaded for free (see the description of the ‘dummies’ book above). Once I got my new theme working I just downloaded it to my website and activated it.

Here are the steps I followed:

1. I downloaded the Thematic theme.
2. I copied the ‘thematicsamplechildtheme’ directory and contents from the Thematic directory into the ‘themes’ directory, and then renamed it to ‘Clearcreek’.
3. I edited the ‘styles.css’ file as described in the ‘wicked’ book such that my new Clearcreek theme will use Thematic as a parent. This makes the Clearcreek theme show up on the ‘theme’ page on the WordPress dashboard.
4. Activate the new Clearcreek theme (just do the following: dashboard -> Appearance -> themes and activate the Clearcreek theme).
5. I copied the file ‘default.css’ from thematic/library/styles to my Clearcreek directory, and renamed it to cc-default.css. The ‘cc’ prefix stands for my Clearcreek them.
6. I updated the the ‘styles.css’ file to reference cc-default.css instead of the thematic default.css file.
7. I messed around with the cc-default.css file to make the page look like what I wanted. This was a lot of trial and error, and I can’t say I created a great looking page. I used some of what was in the ‘wicked’ book, and also made it so that the header image changes randomly every time the page is loaded. This is called an image ‘rotator’. More on the ‘rotate’ later in this post.

I know that the resulting webpage won’t wow visitors with it’s edgy look, and I sure couldn’t sell Clearcreek and make millions. I view it as just a start, and I’ve learned enough to be able to make more enhancements if I have the time and motivation.

Rotator for the header images

The header image changes every time you reload the page. The image is randomly picked from images in a directory. To accomplish this I did the following:

1. Created a directory under themes/clearcreek called ‘images_header’
2. Put the header images in that directory.
3. Put a php in that directory called ‘rotator.php’. Here is a link with information about this php: http://ma.tt/2003/05/a-better-image-rotator/
4. In cc-default.css I replaced the reference to the header image with a reference to the rotator.php file.

Of course, I had to make the images the right size for the header. If I wanted to create a theme to sell and make millions, I would have to create a backend that allows the user to upload and crop the image to the right size. I took the easy way and sized the image myself before downloading it to the images_header directory. There are lots of different tools out there that you can use to resize an image. I could use IrfanView or GIMP (see description of the ‘dummies’ book). However, I found that the software I got for free with my Canon camera worked well. It’s called Digital Photo Professional, or DPP for short. I’ll briefly describe my process for resizing an image so I can use it in the header. The process takes about 2 minutes, so it’s easy to do.

1. Open the raw image in DPP (you can use any format, including jpeg or png, but I take pictures in raw, which for Canon is a.CR2 file).
2. Crop the image to whichever part you would like to show in the header, using a 3/1 aspect ratio (i.e. width/height = 3/1).
3. On DPP: select file->convert and save, then do the following:
   – make the dpi (dots per inch) field = 10,000
   – click the ‘resize’ box
   – put 960 in the ‘width’ field. The ‘height’ field will be automatically updated to 32o. 960 pixels is the width of the theme header. Note: the reason I used 10,000 dpi in the first bullet above is to get enough accuracy so that the final result is exactly 960X320 pixels.
   – Save the file by clicking the ‘Save’ button. Since I’m using xampp, I save it directly in the images_header directory on my local computer.