In Chapter 4 ofJesse Friedman’s book (affiliate link)we finally stop blathering about hierarchy and start making a real theme. A simple little theme, but a real theme nonetheless. So exciting.  I went back to my WAMP to make this theme, rather than working online. It’s up to you which one you do. While the WAMP is finicky on my ancient laptop, it does have the advantage of not requiring an Internet connection.

First File – style.css

Contents of style.css file

You start off by going to the folder you set up for your site, and making another folder for your theme. I called mine MyFirstTheme. Inside the theme folder you make a blank file named style.css.  I use Notepad++ (a free download for Windows from http://notepad-plus-plus.org/). Any text editor will do, but I happen to like that one.

The style.css file will contain the theme definitions. The book has an error there in that it says “Feel free to replace the text in maroon with your information. The black text must be absolutely perfect and mirror what you see above. Changing ‘Theme Name’ to ‘ThemeName’ will result in a broken theme.” As you can see, the whole thing is maroon, so I just assumed that everything on the left was required and replaced the rest with my own information. Clicking on the picture will take you to a larger one that will hopefully be a little less illegible.

Second File – index.php

We now create another blank file in the theme folder and name it index.php. It will be the master file for our theme, but for the moment it is a perfect and absolute blank.

Uploading the Theme

Believe it or not, we now actually have a working theme. The next step is to zip it up (by making a zip file – instructions here for Windows and Mac.) Now we go to the WP dashboard (which for me is at http://localhost/HadassEviatar/wp-admin), and click on Appearance->Themes->Install Themes. If you click on upload, it will allow you to upload a zipped file. Go back to Themes, and here’s what you see (click on the picture to see it in a larger format):

Yay for the blank theme!

Of course it is blank because we didn’t give it a thumbnail, but it is unmistakably there! So exciting. We can activate it like any other theme, go to the site, and see – nothing. Because, you know, we didn’t actually put anything in there.

Adding Stuff

Jesse kindly helps us here by giving us a link to download some content for this site. He’s given me explicit permission to share the links, by the way, in case you were wondering. You can cut and paste this into the index.php file we made and then upload it, or you can go to Appearance->Editor and edit the index.php file directly on the site. At least, I did that in WAMP. Please let me know if it doesn’t work on a remote server. Refresh the page and here’s what we see (click to enlarge):

The site with Jesse’s HTML

Yay, a real, live working theme! Of course, it isn’t very pretty and it doesn’t do anything dynamically (remember all that talk about choosing the right page?). It’s just a static page of HTML, and when you click a link it goes to a page that’s programmed into the HTML, but it can’t be changed on the fly.

In the next post, I’ll show you how I learned from Jesse to replace all that HTML with WordPress calls to make things dynamic rather than static.

Give it a try and let me know how it goes!