Create a new theme directory

To get started, we'll create a copy of the existing default theme. I'm using a development installation of WordPress 2.8.5 on my local machine within MAMP. If you're working remotely, you can follow my instructions using an FTP client instead of the desktop Copy and Paste commands.

1. Create a new directory that has a completely unique name that best suits your project.

2. Important! Don't skip this step! Copy in your XHTML/CSS mockup files and the image directory. Rename your index.html file to index.php. WordPress template files follow what's known as the Template Hierarchy. That hierarchy looks first for an index.php page. Leaving the page as .html or attempting to name it anything else at this point will result in your template not working correctly.

3. We'll be referencing WordPress PHP code from the default theme. Make sure the default theme template files are handy (if working remotely via FTP, I like to just copy that directory down locally so I can access its template files quickly).

Find out more about the WordPress Template Hierarchy:

Certain WordPress template pages will override other pages. Not being aware of which files override which ones within your template hierarchy can make troubleshooting your template a real pain. We'll talk about this more in Chapter 6, which deals with WordPress Reference, and you can read through the WordPress codex online at http:// codex.wordpress.org/Template_Hierarchy.

4. Now, we're going to reference the default theme's style.css file. In your editor, open up the original stylesheet into the Code view. There are 18 lines of commented out code that contain the theme's information for WordPress. Copy those 18 lines to the top of your style.css sheet, before your style rules.

5. Leaving the text before the colons in each line alone, update the information to the right of each colon to accommodate your own theme. For instance:

/*Theme Name: 1 OpenSource Online Magazine Theme URI: http://hyper3media.com/

Description: A WordPress Theme created originally for <a href="http://insideopenoffice.org">InsideOpenOffice.org</a> and then modified for Packt Publishing's WordPress Theme Design. Version: 1.4

Author: Tessa Blakeley Silver

Author URI: http://hyper3media.com

The CSS, XHTML and design is released under GPL:

http://www.opensource.org/licenses/gpl-license.php

6. In your WordPress, go to Administration | Appearance | Themes

(or Administration | Design | Themes in 2.5). There, you'll be able to select and Activate the new theme you just created. (Note that your theme won't have a thumbnail image, which will be displayed in the Administration panel dash board.)

Finding your new theme.

I gave my theme a name that started with "01". I did this only for development purposes, so it would be easy to find in the list of many themes that come with my installation of WordPress. Before I actually deploy the theme, I'll remove the "01" from the name in the stylesheet. You may do the same when you develop, or you may choose to intentionally name your theme with a number or the letter "A" so that it shows up closer to the top within the list of themes.

Instant Ways To Monetize Your Blog

Instant Ways To Monetize Your Blog

Get Paid For What You’re Worth. Benefit From Your Talent. Get Your Due Credit. Provide Your Skills A Platform To Shine. Enhance Your Opportunities. Learn how to monetize your blog and reap the rewards of your skills.

Get My Free Ebook


Post a comment