Creating a Custom Child Theme for ComicPress 2.9

Mar21
by on March 21, 2010 at 5:38 am
Posted In: FAQ, Wordpress

As explained in the post: ComicPress 2.9 Parent -> Child Theme Relationships, ComicPress 2.9 can now use Child Themes to customize your site with.   In this post I’m going to explain how to do that.

The first step is to create a comicpress-<childthemename> directory.   You can look at the comicpress-silver and comicpress-boxed child themes as examples to how to do this.    On my site, I have the comicpress-frumph  directory name.

Inside the newly created directory under themes, in your installation, you’re going to want to put a style.css file, .. mind you, this is *not* the original style.css that is inside the comicpress installed directory, this child theme style.css is unique to your custom theme.  Again, the best method would probably to take the style.css from inside of the comicpress-boxed.zip or comicpress-silver.zip and use that as a base.

Inside the child theme now, is the basic style.css for that child theme, at the top of that style.css should be this information:

/*
Theme Name: ComicPress &lt;yourchildthemenamehere&gt;
Theme URI: http://comicpress.org
Template: comicpress
Description: Publish a comic with WordPress.  &lt;a href=&quot;http://comicpress.org&quot;&gt;Visit the ComicPress Website.&lt;/a&gt;
Author: &lt;who you are&gt;
Author URI: &lt;yourwebsitesurl&gt;
Version: 1.0
.
The CSS, XHTML and design is released under GPL v3:
http://www.opensource.org/licenses/gpl-3.0.html
.
*/

@import url(&quot;../comicpress/style.css&quot;);

The “Theme Name: ComicPress ” needs to be a unique name, pretty much denoting your comic/sites name as well as something identifying the directory name you chose.

This part, “Template: comicpress” means that the comicpress theme (/themes/comicpress/) is what is going to be used as the parent, and the “@import url(“../comicpress/style.css”);” means to use the style.css from inside the parent theme, then everything *after* that will be overrides or changes to that parent style sheet, pretty much like how you would use theme companion.

Now, your themes directory on your server looks something like this (using my frumph child theme as example):

/wp-content/themes/
/wp-content/themes/comicpress
/wp-content/themes/comicpress/* .. all the files used with comicpress parent.
/wp-content/themes/comicpress-frumph
/wp-content/themes/comicpress-frumph/style.css

When customizing your theme, all the ‘new changes to the css’ can go into the style.css of your custom child theme that you created, for example if you wanted to change the background of the body (using the frumph child theme example again):

/*
Theme Name: ComicPress Frumph
Theme URI: http://comicpress.org
Template: comicpress
Description: Publish a comic with WordPress.  &lt;a href=&quot;http://comicpress.org&quot;&gt;Visit the ComicPress Website.&lt;/a&gt;
Author: Philip M. Hofer (Frumph)
Author URI: https://frumph.net/
Version: 1.0
.
The CSS, XHTML and design is released under GPL v3:
http://www.opensource.org/licenses/gpl-3.0.html
.
*/

@import url(&quot;../comicpress/style.css&quot;);

body {
	background: #271200 url('images/background.jpg') top center repeat-x;
}

Create an “images” directory inside the child theme and put the background.jpg inside of it. Since I am “ONLY” putting changes that I want the CSS to have inside the child themes style.css and not the full replication of the original style.css, I can find the changes I made easily. This also lets me upgrade ComicPress and use the original comicpress parent themes style.css without editing the original and making some horrible change that I won’t be able to fix. Since I am not touching the original there will not be that problem.

The directory structure looks like this:

/wp-content/themes/
/wp-content/themes/comicpress
/wp-content/themes/comicpress/* .. all the files used with comicpress parent.
/wp-content/themes/comicpress-frumph
/wp-content/themes/comicpress-frumph/style.css
/wp-content/themes/comicpress-frumph/images
/wp-content/themes/comicpress-frumph/images/background.jpg

Any images I create for my site, I will put inside of the images directory for the child theme.

[members]

Advanced Child Theme Information

When creating your child theme and you want to make custom navigation, moods, calendar graphics and more, you can simple mimic the original parents image path to those files inside your child theme. For example (using the comicpress-frumph example):

/wp-content/themes/
/wp-content/themes/comicpress
/wp-content/themes/comicpress/* .. all the files used with comicpress parent.
/wp-content/themes/comicpress-frumph
/wp-content/themes/comicpress-frumph/style.css
/wp-content/themes/comicpress-frumph/images
/wp-content/themes/comicpress-frumph/images/background.jpg
/wp-content/themes/comicpress-frumph/images/nav
/wp-content/themes/comicpress-frumph/images/nav/frumphnav
/wp-content/themes/comicpress-frumph/images/nav/frumphnav/navstyle.css

On the same note, you can mimic the moods directory structure of the parent theme like comicpress/images/moods// as well, and toss in some graphics for a custom set of moods, .. can do the same with avatars and even the calendar.

[/members]

└ Tags: