The first step is to create a directory to contain our theme.
- Create a new directory that has a completely unique name that best suits your project. This needs to go in the
wp-content/themes/directory. You can see the theme folders for our theme in the illustration below, which is taken from the FTP client FileZilla.Note
We've given the theme directory a name of
opensourcemagazine_ch3, as we'll be saving a version of the theme for each chapter to capture our progress. We'll also add the chapter number to the Theme Name in the stylesheet and save it into the code packs so you can work along and see the progress of the theme as you move through the book. This also helps us see in the WordPress Theme Manager screen what theme to select to work on. You'll just name your theme whatever you'd like it to appear as in the Theme Manager screen.
- Copy your HTML/CSS mockup files and the image directory into this new directory.
- Rename your
index.htmlfile asindex.php. Again, because WordPress template files follow the template hierarchy, that hierarchy looks first for all sorts of other template page types, but will always settle for theindex.phppage if none of the others exist. Leaving the page as.html, or attempting to name it anything else at this point, will result in your template not working correctly. - Open the
style.cssfile and add the following at the very top, above any other code:/* Theme Name: Open Source Online Magazine chapter 3 Theme URI: http://rachelmccollin.co.uk/opensourcemagazine Author: Tessa Blakeley Silver / Rachel McCollin Author URI: Description: Theme to accompany WordPress 3.4 Theme Development Beginners Guide Version: Tags: */
The details of what you add will be different for your theme—you'll need to replace our theme name, URI, author, and description with your own and add more information as relevant.
- Save your stylesheet.
- Now, in WordPress, go to Appearance | Themes. There, you'll be able to select and Activate the new theme you just created. (Note that our theme doesn't have a thumbnail image, which would be displayed in the Administration panel Dashboard, as we haven't created one.)
We created a new theme folder and uploaded our code to it.
By making sure the properly formatted WordPress information was at the top of the stylesheet, we were able to see the new folder and files we created as a theme in the Administration panel's Theme Manager and select it.
When you point your browser to your WordPress installation, you should see your mockup's unstyled HTML as shown in the following screenshot:
The next step is to attach the stylesheet to the index.php page so that WordPress reads your styles.
To get the index.php page to read your style.css page, we need to find the call to the stylesheet in the index.php file. This will take one of the following two forms:
<link rel="stylesheet" href="[stylesheet name]">
or
<style>@import "[stylesheet name]"</style>