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 <yourchildthemenamehere>
Theme URI: http://comicpress.org
Template: comicpress
Description: Publish a comic with WordPress.  <a href="http://comicpress.org">Visit the ComicPress Website.</a>
Author: <who you are>
Author URI: <yourwebsitesurl>
Version: 1.0
.
The CSS, XHTML and design is released under GPL v3:

http://www.opensource.org/licenses/gpl-3.0.html

.
*/

@import url("../comicpress/style.css");

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.  <a href="http://comicpress.org">Visit the ComicPress Website.</a>
Author: Philip M. Hofer (Frumph)
Author URI: http://www.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("../comicpress/style.css");

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.

Add these lines:

ini_set( 'display_errors', 0 );
ini_set( 'log_errors', 1 );
ini_set( 'error_log’, WP_CONTENT_DIR . '/debug.log' );

Although the use of WP_CONTENT_DIR doesn’t work for me, I did this instead.

ini_set( 'error_log', dirname(__FILE__) . '/wp-content/debug.log' );

Also, since I don’t want all those silly notices and warning clogging up my debug.log file, I just want errors only, I do this:

ini_set( 'error_reporting', E_ALL ^ E_NOTICE );

This line basically tells the php parser to report all errors, except notices. If more plugin programmers would test their plugins with the notices on then I wouldnt have 3 pages of notices come up inside the debug.log file.

So in summary:

ini_set( 'display_errors', 0 );
ini_set( 'log_errors', 1 );
ini_set( 'error_log', dirname(__FILE__) . '/wp-content/debug.log' );
ini_set( 'error_reporting', E_ALL ^ E_NOTICE );

Based on the comments section, this is a more proper route to go then actually using the defines that were written into the code, dunno why but I take people who know the wordpress core code better then me at their word. Thanks guys for great comments.

——–
Then if you navigate to your server’s wp-content directory there will be a debug.log waiting for you with information in it about what is wrong with your wordpress if an error ever happens.

/wp-content/debug.log

PHP.Net Manual on ini_set: http://www.php.net/ini_set

- Phil (Frumph)

The WordPress gallery function will let you have it so that not only can you have thumbnails neat and tidy within your post but when clicking on them will send you to a gallery page that you can navigate from one to another.   ComicPress already has this template inside of its theme and has been there since before CP 2.5, however not many people have actually used it.

When editing a post or page, the button to choose is this one:

This ‘sun like’ icon on the panel when editing a post or page allows the system to know that you are wanting to add this image to the particular gallery that is embedded on the post or page.

The next step is where you want the gallery to appear inside your post you place this short code:

[ gallery ]

NOTE: No spaces inside the brackets, spaces are there currently so it does not trigger.

Having the code [ gallery ] will tell the WordPress CMS to translate that out to the core gallery functions that are built into WordPress itself.

When you upload a picture into the post using the add to gallery button on the post, it will take a thumbnail image, that thumbnail image can be set width and height in the WordPress dashboards settings. In WordPress 3.0 its the wp-admin -> settings -> media panel and you can set 3 different sizes, the thumbnail, medium and large sizes. These are created automatically when you use the media uploader to upload your image.

If you want the gallery function to work properly so that it displays those images as part of the gallery, do *not* click the ‘insert into post’ button after uploading the media. It still will attach those pictures just not add them to the post. It will however add them to the [ gallery ] code where ever you place that.

Here are some pictures of my dad to show you.

SHORTCODE SHOULD BE HERE:

Notice the above also included the other image that I have placed in this post to describe what button to place. One of the flaws of using the gallery function is that the controls of what goes into the gallery is not coherent enough to the average user to figure out. Going to the media library on your dashboard I did not find a place to add and remove images to a gallery that’s attached to a post.

If you click on any pictures in the gallery I placed in this post, it will go to another page that will let you go back and forth in the gallery and allow your users to comment on each one if they like.

In the gallery itself after clicking on an image, you can have a plugin like lightbox to expand the image nicely on the screen if the image doesnt fit the width available properly.

Pablo uses it over at Wapsi Square for his Wapsi Girl Project.  I have been trying to show David Willis how to use it for his cast page.  Notice on their pages they have extra text and information on the particular images those can be set in the media library per the image  you have associated with the page.

- Phil

WordPress.ORG Codex on Gallery: http://codex.wordpress.org/Gallery_Shortcode

There are 2 different methods of ‘walking’ your comics with ComicPress 2.9, the first is by date.

Every comic post you make is individually made on a single date.  There is, with the limitation of ComicPress 1 comic post day.   This method of navigating by date starts with the oldest date and clicking next brings you up the path to newer dates in time.

The second method is by Category, i.e. a storyline chapter.  This also uses dates but with new navigation buttons it will let you walk the category alone, ignoring other comics that are posted in alternate categories and walks specifically on that one category.

Root Comic Category

When installing ComicPress you have to create both a primary comic category and a primary blog category.   These categories provide the code to understand which posts are the comics and which are the blogs.  Simple to think about yeah?  Well when we start using Storyline’s you now need to think of the primary comic category as the “Root Category” instead of primary.

The root comic category is the highest level parent of all the chapters and books you are going to create.   This is important to name properly for several reasons, the most importan reason is your URI line when people access your site and you’re using a pretty permalinks setup.  I have seen some people name that category the same name as their comic, so when looking at the URI line it appears something like this (in example, mojojocomic is the root category name):

http://mojojocomic.com/mojojocomic/book-1/chapter-1/

We ‘already’ know that the site we’re looking at is the mojojocomic so naming the root category like ‘webcomic’ would be more important.

http://mojojocomic.com/webcomic/book-1/chapter-1/

This will add another level of SEO reference on search engines to know that it’s a webcomic as well.

However, with users that have a different domain then their comic, it would be more advantageous to have the root comic category named as their comic, in this example mojojostudios.com is the studio and Endless Break is the comic’s name, so using the endless-break as the root category name for your comics is appropriate.

http://mojojostudios.com/endless-break/book-1/chapter-1/

This is using the settings -> permalinks -> [x] Custom:  /%category%/%postname%/   as the permalink structure, which I recommend everyone using.

ComicPress Manager -> Storylines

Now comes the fun part, setting up your storylines.   There are three accepted methods of creating storylines.

The first method is to seperate your chapters into seperate books.

The second being just using straight individual chapters.

Or even a mixture of both.

As you see in the above image depictions of the chapter navigation it goes from ‘oldest to newest’ in order of chapters.   However, in the last example the christmas and pinups categories are at the top.   Storyline’s like that do not necessarily have to be in order.

This is because when your navigation from chapter to chapter with the next and previous chapter buttons it will move along the first post made in each category.   This is important to remember because without a post in the category for it to move on the chapter navigation will stop cold and not be able to move further.  For a more visual reference here’s what i’m writing about:

Even though your comics are posted into the individual chapters, the BOOK #’s require to have a post/comic book cover inside of them in order for the chapter navigation to work properly.

!Important

Comic posts require that they ONLY be in a single category i.e. chapter.   When selecting which comic goes into which category you can ONLY HAVE ONE chosen.   In the above example if you have a comic for the WebComic -> Book – 2 -> Chapter 1 – Morbid Curiosity, it can ONLY be set in the ‘Chapter-1 Morbid Curiosity’.    The core code figures out the rest as necessary, do not put more then one category, do not set that comic in the webcomic, book -2 and other categories, the lowest chapter in the hierarchy is what is needed.

ComicPress Navigation Widget’s

Yes, .. widgets.   When storyline’s are enabled, several of the widgets open up ‘new’ options inside of them to handle the storylines.

The most important is the ComicPress Navigation widget.     If you go to appearance-> widgets and have it in a sidebar and then open it up while it’s in the sidebar you will see new options for displaying chapter navigation.   Previous Chapter, Next Chapter, Previous IN Chapter and Next IN Chapter buttons will be available. ..  the Previous and Next IN chapter will allow your readers to walk ‘inside’ that chapter.

The other widget that uses the Storyline code is the ComicPress Archive Dropdown widget.   When you open this widget up you will see that you can then have a drop down that will open up into individual chapters.

- Phil

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

Those action locations allow you to use your child theme to ‘inject’ code into certain areas of the theme. With Easel the action location we are going to use is called ‘easel-menubar-menunav’ and in ComicPress it’s called ‘comicpress-menubar-menunav’ see the trend in the naming conventions yet? /grin

In both themes there’s a file available to be used in your child theme, it’s called “child-functions.php” If you do not have one you can create it.

The first thing we’re going to do is go to the Easel Options & ComicPress Options and disable the RSS feed from displaying in the menubar.

After that, open up the child-functions.php file in your child theme and let’s start adding the code.

For Easel:

add_action('easel-menubar-menunav', 'easel_social_icons');

function easel_social_icons() {
	echo '<a href="http://www.twitter.com/Frumph" title="Follow Frumph on Twitter" class="menunav-social menunav-twitter">Twitter</a>'."rn";
	echo '<a href="http://www.facebook.com/philip.hofer" title="Friend Frumph on Facebook" class="menunav-social menunav-facebook">Facebook</a>'."rn";
	echo '<a href="'.get_bloginfo('rss2_url').'" title="RSS Feed" class="menunav-social menunav-rss2">RSS</a>'."rn";
}

For ComicPress:

add_action('comicpress-menubar-menunav', 'comicpress_social_icons');

function comicpress_social_icons() {
	echo '<a href="http://www.twitter.com/Frumph" title="Follow Frumph on Twitter" class="menunav-social menunav-twitter">Twitter</a>'."rn";
	echo '<a href="http://www.facebook.com/philip.hofer" title="Friend Frumph on Facebook" class="menunav-social menunav-facebook">Facebook</a>'."rn";
	echo '<a href="'.get_bloginfo('rss2_url').'" title="RSS Feed" class="menunav-social menunav-rss2">RSS</a>'."rn";
}

Then we’re going to place 3 images into the images directory of your child theme, I put them into a subdirectory of that images directory called icons because i’m a stickler for organization.

The RSS, Twitter and Facebook images that I use

Notice that with these 3 images that the actually consist of a “normal” state and a “hover” state inside of the image itself, that way we do not need so many images loading all the time. The more CSS proficient people can add them all into a single image and do background-position’ing to find the right locations to use.

Next is the CSS, the CSS is the same for both ComicPress and Easel; you should put the CSS into the child-themes style.css so that it can be easier to path to the images in the images directory.

/* menunav social icons */

.menunav-social {
	text-indent: -9999px;
	display: inline-block;
	float: left;
	height: 25px;
	width: 25px;
}

.menunav-twitter {
	background: url('images/icons/twitter.png') no-repeat;
}

.menunav-rss2 {
	background: url('images/icons/rss.png') no-repeat;
	margin-right: 3px;
}

.menunav-facebook {
	background: url('images/icons/facebook.png') no-repeat;
}	

.menunav-social:hover {
	background-position: 0 -25px;
}

If you look at this css, the .menunav-social sets the block removes the text from displaying and allocations the 25px by 25px space to use, then each of the relative icons have their own class for which image to use, finally the .menunav-social:hover changes the positioning to show the hover state of the graphic when the icon is moused over.

… erm.. and that’s it, now you have social icons in your menubar.

- Phil