GCO Studios: Web Design

In the previous lesson we covered the general WordPress directory structure, created the required folder and files and pasted in the minimum code in the “style.css” file to define the theme in the admin section. In this lesson we will begin the process of building the style sheet.

Methods of Styling (Method One)

There are various ways to approach this and I’m going to talk about the pros and cons of each. The first method or approach is to import the parent theme and then create overrides to the parent theme. Below you can see the import method used to bring in the default parent theme.

1
2
3
4
5
6
7
8
9
10
11
12

/*
Theme Name: Generic
Theme URI: http://www.xxx.com/
Description: A Twenty Ten Child Theme.
Author: Your Name
Author URI: http://www.xxx.net/
Template: twentyten
Version: 0.0.1
Tags: some, tags, to, describe, the, theme
*/
 
@import url("../twentyten/style.css");

Continue reading →

There are many tutorials on the Internet which address aspects of child theme development; however, many are based on other frameworks instead of the default “Twenty Ten”. “Twenty Ten” is the newest default theme which comes with WordPress 3.x. The aim of this tutorial is to walk a novice through the process of creating their own child theme from scratch. For the purpose of this tutorial it is assumed that WordPress is already setup and running.

WordPress Directory Structure:

In order to commence development of a theme, the directory structure must be understood first. The image to the left is used to illustrate the overall “directory structure” of WordPress. The main folder that we are concerned with is the “themes” folder located in the “wp-content” folder. Any theme that is created must be placed within this folder.

In this tutorial a generic theme will be created to illustrate the creation process. First it is recommended that the following tools be used:

• Firefox as the default browser
• FireFTP if needed for file uploads to a remote server
• Firebug used as a tool to examine css code
• A text editor or any favorite program to edit css and php code

Even though Firefox is recommended it is not necessary. Once the theme is completed it is important to test your final theme with various web browsers to ensure compatibility is met.
Continue reading →