The first step is to create a directory to contain our theme.
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.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.
index.html
file as index.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 the index.php
page 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.style.css
file 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.
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>