Let’s take a look first and understand how the flow of information gets sent to the visiting user without a child theme.   The visitor uses their browser and contacts the  WordPress CMS to request the page they want to view, WordPress then talks to the theme.   The theme grabs the comic image necessary and it all then is compiled out to the visitor.

With ComicPress 2.9  we have introduced another step in the process called a “Child Theme”  a child theme is pretty much just like a regular theme but the core code execution on how the theme behaves is handled by the parent theme, in this case the ComicPress theme.    The visitor uses their browser and contacts the WordPress CMS to request the page they want to view, wordpress them talks to the Child Theme which utilizes the code from the parent theme which grabs the comic image and then outputs the design style of what the child theme has out to the visitor.

This allows the site designer to create their own theme which uses the ComicPress core functions without modifying or editing the original ComicPress theme.   Yes, like Companion, however with the added bonus that whatever files you have in the child theme will override any from the original theme.

This also allows us to provide distributable theme designs that utilize the ComicPress core functions without the core, allowing us to provide the users of ComicPress with a variety of different layouts and designs that can be utilized as base designs to start from.

More information on what a child theme is here:
http://frumph.net/wordpress/comicpress-2-9-parent-child-theme-relationship/

Original Post is here:
http://frumph.net/wordpress/faq/creating-a-custom-child-theme-for-comicpress-2-9/

A child theme will contain your graphic sets for navigation, avatars, calendars, moods and site graphics;  Your custom CSS, widgets and code overrides.

I have provided a blank comicpress child theme here:
http://frumph.net/downloads/comicpress-blank.zip

1. Modify the directory name to one of your chosing, i.e. /comicpress-mysitename/
2. Change the ‘Theme Name, Author and Author URI’ inside the child theme’s style.css to your custom names.
3. Put your custom sets of navigation, avatars, calanders, moods in the images folder in this Child Theme, uses the same base structure as the main ComicPress theme, (if you have them, otherwise you can make them later).
4. If you are using a custom-menubar.php, that too goes into this child theme.
5. The widgets directory in the child theme is where you can place custom widgets if you make any.
6. Design your site with Companion or putting the CSS into this child theme’s style.css
7. Take a screen capture of your designed site and replace the screenshot.png file in this child theme.

1. Modify the directory name.

The comicpress-blank.zip file has a directory inside of it called comicpress-blank, you can either upload it via the dashboard -> themes -> add new [upload], or you can ftp the contents into the wp-content/themes directory of your wordpress installation.

When it is on your server, rename the directory to something more coherent then ‘blank’ so that you can recognize it as your own.

The end result will be something like this  /wp-content/themes/comicpress-yoursitename/  and the style.css for the child theme is in the /wp-content/themes/comicpress-yoursitename/style.css

2. Change relevant information inside the style.css of your child theme.

/*
Theme Name: ComicPress Blank
Theme URI: http://comicpress.org
Template: comicpress
Description: Publish a comic with WordPress.  <a href="http://comicpress.org">Visit the ComicPress Website.</a>
Author: Your Name Here
Author URI: http://Your personal site url here/
Version: 1.0
*/

This is how the blank child theme originally looks. You will want to modify this to have the information you want in your child theme. Change the theme name to represent your webcomic or site. You’re the author, change that as well and your website too.

4. Put your custom stuff in the child theme.

Now that you have your own child theme you can centralize the location of all of your images & stuff that is used on your site. The child themes images directory is where you place your site design images that are relevant to the style.css inside the child theme directory. When using the child themes style.css and your images are in the child themes images directory you can use this path structure in example:

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

Notice that the url(‘ portion is basically just looking into the images directory that is under the style.css that is calling for that image instead of using some huge http:// patch structure.

Your other graphic sets, like navigation, moods, etc behave the same way as if they were put into the main theme. If you have custom navigation graphics with it’s own navstyle.css that you created, instead of going into the /comicpress/images/nav// directory you would put them into the child theme instead, such as /comicpress-yoursitename/images/nav// and ComicPress will check there as well for the options area in the dashboard when configuring your site.

5. custom-menubar.php goes into the child theme

The custom-header.php is basically a file that can be injected into the menubar position wherever it is on your site, instead of the menubar showing it will instead load this file. This allows you to create your own look and feel for your menubar. This custom-header.php file when using a child theme needs to be in the child theme directory.

6 . The widgets directory in the child theme

You can create your own custom widgets or ones that are specific for your child theme. This directory gets auto loaded when the theme gets executed to be seen in the widgets area of the dashboard.

7. Put your CSS changes into the style.css of the child theme.

In order to continue with this whole “don’t edit your comicpress theme” method of thinking. Some of you use Companion to do this exact same thing. However I want to touch up on an important note to those modifying CSS. You do NOT put the entire style.css set of elements into the custom area or companion. You ONLY put changes. For example, in the main ComicPress theme’s style.css you see:

body {
	margin: 0;
	font-family: 'Arial' , sans-serif;
	font-size: 14px;
	color: #000;
}

And you want to add a background to the body area and change the color from black to white. You would want to ONLY put what is changed, like this inside of the style.css of the child theme OR companion:

body {
	background: #fff url('images/background.jpg') top center no-repeat;
	color: #000;
}

Notice that not *all* of the elements are there, ONLY what is changed. This allows you to recognize what specific thing is changed instead of trying to figure out a difference between your original and your changes.

Good luck! If any of you need any assistance in creating your own custom child theme, please do not hesitate to contact me!

- Phil (Frumph)

The following is the method on how to include your child themes with your main parent theme download.

The WordPress Dev team doesn’t recommend this method. In the future there will be child-themes available to be added to the repo, however this is just a side note on how to implement it if you want to.

The first step is to create a directory in your parent theme called “child-themes” and inside that directory, toss all of your child themes that are available for your parent theme into it.

Then, open up your parent themes functions.php file and we’re going to add some code to it, preferably where you init your other functions.

add_action('init', 'easel_init_child_theme_directory');

function easel_init_child_theme_directory() {
	register_theme_directory(get_template_directory().'child-themes');
// fix for windows servers and the  / issue.
	add_filter('stylesheet_uri', 'easel_fix_path');
}

function easel_fix_path($stylesheet_uri) {
	$stylesheet_uri = str_replace('', '/', $stylesheet_uri);
	return $stylesheet_uri;
}

Using the above addition to your functions.php file is telling WordPress to register the child-themes directory that is IN your template directory (parent) as an additional theme directory to look at for themes. Also take note to use the instead of / when using the register_theme_directory() function.

The next step is adjusting your child themes css import, normally with a child theme you would import by going up one directory and then back down to the parent theme directory to find the style.css of the parent, like so:

@import url('../easel/style.css');

However, since the child themes are now being stored within the parent we need to change the location of where to find the style.css of the parent for importing, such as this:

@import url('../../style.css');

Basically going up two directories to where the parent themes template root is.

.. and that’s it. Now when people activate the theme and go to look in the appearance -> themes, it will also show all the child themes you have available AND you now can distribute your child themes with your parent theme, even on the WordPress.org repository.

- Phil