Stylehack

In this article we will discuss the housekeeping steps you must perform before you make any modifications to a theme — creating a copy of the theme being modified and making the files “writable” so that you can use the WordPress Theme Editor. For a general review of how your blog is generated by PHP, please read Part 1 of this Series.

IMPORTANT:   For the purpose of this series of tutorials, I’ll be using the WP 2.5.1 DEFAULT template for all examples.

Creating a Copy of the Theme

You should never make major modifications to a theme without making a new working copy of that theme! [I define major as anything other than things like font color or other minor modifications to general styling.]

The reason I say this is primarily because you need a backup copy of the theme you can refer back to if something goes wrong during the modification process. The other reason is also related to potential problems — you need a fallback, the ability to put things back the way they were with a single click “just in case”.

1. Use whatever method you are most comfortable with to create a new theme directory on your server, and then copy the complete contents of the directory containing the theme you will be modifying into that new directory. Take care to maintain the same structure!

   TIP:   Themes are located in [path/to/your/installation]/wp-contents/themes/

   For purposes of this article, I’ve created a new theme directory called “tutorial” and copied the contents of the “default” theme’s directory into the tutorial theme’s directory.
2. 
   The very first thing you should do after creating the copy is to modify the information that WordPress displays in the Dashboard’s Theme panel to help you identify the available installed themes. Strangely enough, this is contained as a comment at the beginning of the main style sheet, usually called “style.css”.

   TIP:   We’re going to work with offline copies of the files for the theme to be modified, because making these changes online via the Theme Editor sometimes requires reselection, reload, etc. So we’ll skip that hassle by working locally and uploading the files.

   1. Download a copy of style.css to your desktop and open it in your preferred text editor — not Word.
   2. 
      Let’s change the information at the top of this file. Here is what it looks like:
      
      /*
      Theme Name: WordPress Default
      Theme URI: http://wordpress.org/
      Description: The default WordPress theme based on the famous Kubrick.
      Version: 1.6
      Author: Michael Heilemann
      Author URI: http://binarybonsai.com/
      Tags: blue, custom header, fixed width, two columns, widgets
      
      Kubrick v1.5
      http://binarybonsai.com/kubrick/
      
      This theme was designed and built by Michael Heilemann,
      whose blog you will find at http://binarybonsai.com/
      
      The CSS, XHTML and design is released under GPL:
      http://www.opensource.org/licenses/gpl-license.php
      
      */
      
      You want to change these items at a minimum:
      
      Theme Name
      Description
      Author
      Author URI
      Tags (as desired)
      The general notes section
      
      Here is what I did with these fields (my changes are in red):
      
      /*
      Theme Name: Modified WordPress Default for Tutorial
      Theme URI: http://wordpress.org/
      Description: My modifications to the default WordPress theme, authored by Michael Heilemann and based on the famous Kubrick.
      Version: 1.0
      Author: Stylehack
      Author URI: http://www.stylehack.com/
      Tags: pink, gray, custom header, fixed width, two columns, widgets
      
      Kubrick v1.5
      http://binarybonsai.com/kubrick/
      
      This theme was designed and built by Michael Heilemann,
      whose blog you will find at http://binarybonsai.com/
      
      It was modified for purposes of a tutorial on customizing themes
      by Becky Peters http://www.stylehack.com
      
      The CSS, XHTML and design is released under GPL:
      http://www.opensource.org/licenses/gpl-license.php
      */
   3. 
      This information is all required if you are creating a theme that you will be releasing for public use. If you design a theme from scratch all the information will probably be about you; in this case, we’re modifying an existing theme so we will leave in most of the information and just add relevant information where it is necessary.
      
      You might ask, why go to all this trouble for one that is being modified for your personal use? Simply because you didn’t actually design this theme so you need to take responsibility for the modifications while preserving the original author’s copyright and intellectual property in accordance with the GPL license.
      
      Also, it’s entirely possible someone could snarf (that’s a technical term) this from your blog and want to use it themselves, even though you didn’t post this for public release. If they are so sad as to snarf it, they probably won’t know to change this info, so at least you and the original author will still get credit should anyone check. “-)
   4. 
      Save your changes to style.css and upload it to your server in the modified theme directory, replacing the copy currently in place. I’m uploading mine to wp-contents/tutorial/.
3. 
   There is a final step that involves creating a screen capture of the modified blog and replacing the existing screenshot.png file. However, we haven’t made any changes to the blog yet, so we’ll just do a generic image so you get some practice.
   1. 
      In your graphic program of choice, create a new image that is 300px wide by 225 pixels tall. Add whatever you want to it (keeping it simple)… perhaps “My Modified Theme” or “Coming Soon”
   2. 
      Save/Export the file as “screenshot.png”. You want to export it as a colored 8-bit PNG, assuming you used colors. Note: If your program doesn’t allow 8-bit color as a choice, look for “Pallet-based” as an option. The object is to make it a nice clear file with a small footprint in terms of file size.
   3. 
      Upload this image to your server in the modified theme directory, replacing the copy currently in place. I’m uploading mine to wp-contents/tutorial/. It does not belong in the images directory!

That’s it for Housekeeping Step 1!

Making the Theme Files Writable

I’m not going to go into the whys/wherefores of making files writable or the many ways it can be done. You can Google that information to your heart’s content. I’ll simply tell you what you need to accomplish and how I do it as a guide.

1. You need to make all the files in the modified theme’s directory “world writable” on most servers. This means you have to change the file permissions to “777″ (no quotes). (You could also try 755, but that doesn’t work very often in my experience, so might as well jump to 777 and get it over with in one step. Anyone who disagrees is welcome to keep their own opinion.)
2. 
   I use my FTP client’s CHMOD tool to do this; you may decide to use cPanel or Plesk or shell access… your choice and/or up to your host. If you need help using an FTP client, here is a free tutorial for WS_FTP LE and CuteFTP. If you use SmartFTP, they offer a very nice free tutorial in their support area.
   
   If you are going to use cPanel, Plesk, shell access or some other method and need assistance, I’d suggest you look to your host for help.

And that’s it for Housekeeping Step 2!

Assigning the New Theme to Your Blog

I know I said there are only 2 preparatory housekeeping steps, but let’s just add a quick third step here so we don’t have to address it when we make our first modification — let’s apply this new theme to your blog! Okay, it’s not going to look any different than it does right now, but it will eventually.

1. Login to the Dashboard for your WordPress blog.
2. 
   Click on the Design Tab to see the available installed themes. Your new theme should be listed here:
   
   
   
3. 
   Click on your theme to apply it to your blog. Here’s what you should now see in that panel:
   
   
   
4. 
   Just for fun, let’s make sure that your theme files are all editable using the Theme Editor by clicking on Theme Editor in the Design Panel.
   
   
   If you see this…
   
   
   
   you did not complete Housekeeping Step 2 successfully. Please go back and try again.
   
   If you see this…
   
   
   
   your files are writable using the Theme Editor!
5. 
   Congratulations! You are now ready to move on to the next article in this series.

In Article 3 we’ll make our first modification by replacing the header image with one of our own images. Please visit again soon or use one of the subscription links at the top of the sidebar on the right to be notified when the next article is posted.