WordPress Child Theme

mysimplistixdirectory

I’ve had this domain for a few years and have mainly used it to make pages to share with friends. The main tool that I used was Homesite or just hand rolled a page (Lightroom has an excellent export function for photo webpages). I’ve used WordPress for a number of sites that I developed for my work but never set WP up on this domain.

As with any theme, you are going to want to make changes. The nice thing about WordPress 2.7 is that it can handle child themes. Using a Child Theme will help you localize and organize the changes that you make to your WordPress site theme. Sam didn’t include a child theme to his theme but I’m sure he will add this feature in his next rev. Using a Child theme will help when the Parent theme has an update, you would simply update/upgrade the files within the parent theme.

Let me show you the steps to create the Child Theme.

Read

1.Simplistix theme. is my Parent Theme for my WordPress site (using version 2.7 at this time).

2. Create a directory within the wordpress themes directory. I named the directory mysimplistix for my Child Theme files.

wordpress/wp-content/themes/mysimplistix

3. Create and open a file named style.css within your child theme directory. I posted the full code for this style.css file below. The header to this file contains information which will let wordpress know that this is a child theme. The style.css contains a line that imports the characteristics from the parent theme.


@import url("../wp-simplistix/style.css");

4. Edit and save the style.css file. If you look at my style.css you will see the specific changes that I made for my site. You can modify, delete or add any elements that you want for your site.

5. Within your WordPress administrator panel you will now see that the child theme is now present in the available themes. In the style.css file I name the theme Son of Simplistix so that is the theme that I will tell WordPress to use for the site. (note that the Child theme does not show a thumbnail of the site, that’s OK for now, we can work on this extra in the future).

The image is a shot of my wordpress theme directory:

You can see the style.css file within the mysimplistix theme directory.

Making additions and changes within the style.css file let’s me make changes to the “chrome” of the parent theme.

Did you notice that I have other files within the mysimpistix directory? Those files let me make my specific changes to the overall behavior of the theme and specific page layouts. I will put up another post that talks about these specific changes and tweaks, all easily tracked and located with the child theme function of WordPress.

  

  

BONUS:
THE LOOP is a good page to read about how WordPress works.

style.css that is located in wordpress/wp-content/themes/mysimplistix

/*
Theme Name: Son of Simplistix Child Theme
Theme URI: http://www.samburdge.co.uk
Description: Child theme for Simplistix. Make all your custom changes in the themes/mysimplistix folder.
Author: RickHap
Author URI: http://www.flyhypersonic.com
Template: wp-simplistix

An extension to the Simplistix Theme created by Sam Burdge http://www.samburdge.co.uk
*/

/* Import Stylesheets, don't remove these.
-----------------------------------------------------------*/

@import url("../wp-simplistix/style.css");

/* Required WordPress Classes, don't remove these.
-----------------------------------------------------------*/
.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft { float: left; }
.alignright { float: right; }

/* Make all custom CSS changes BELOW this line
-----------------------------------------------------------*/
/* Example: Background Color
#rap {style.css
background:#FFFFFF none repeat scroll 0 0;
color:#333333;
margin:0 auto;
padding:20px;
text-align:left;
width:88em;
}
*/
#rap {style.css
background:#FFFFFF none repeat scroll 0 0;
color:#FFFFFF;
border:0px solid #FFFFFF;
margin:0 auto;
padding:20px;
text-align:left;
width:88em;
}

body {
background: #FFFFFF;
}

.textarea, textarea {
width: 400px;
margin: 0;
background: #ffffff;
color: #333333;
}

51 thoughts on “WordPress Child Theme

Leave a Reply

Your email address will not be published. Required fields are marked *