There are currently only a handful of themes that have native support Comic Easel, that doesn’t mean they can’t, it’s just that the code inside of the theme is not added yet, so it’s up to you if you want to use the theme to add the support for it.

Support for Comic Easel is quite simple, there are really just only a couple lines of code to add to the theme; and those are ‘action’ codes that WordPress uses to declare a specific position to enable things to link into it. With Comic Easel, we use the comic-area action location primarily for displaying the comic.

do_action('comic-area');

This code should reside in whatever is used to display the home page and the single content pages. There are additional action sections available, but we’re going to focus on this one.

A user sent me a theme called Spacious to modify to allow Comic Easel to work with it, and this is what I did to make that happen.

The first thing is that I have the theme added and installed of course. This is what it looks like when I first activate it on my development site:

spacious-1

Pretty clean looking really, the next thing I want to do is figure out if I want the comic to display in the content column or above the content AND the sidebar, as shown in the red arrows in this image:

spacious-2

This is important because you need to look at the right HTML section in the code that outputs for where you would put it inside of the respective files.

Looking at the site with Firebug it appears that if I want it above both sections I would look and keep my eyes open for id=”main” inside the code.

spacious-3

However, if I wanted it inside the content column, I would be keeping an eye out for for id=”primary” which is what this theme uses to declare the contents of the content column.

spacious-4

Now I open up the index.php which is generally what themes use to display the home page and I notice this:

spacious-5

I’m looking for id=”main” and i’m not seeing it, however I do see id=”primary” which means that if I wanted it into the content column, all I would do is add the directly below the id=”primary”

Changing this:

	<div id="primary">
		<div id="content" class="clearfix">

to this:

	<div id="primary">
		<?php do_action('comic-area'); ?>
		<?php do_action('comic-blog-area'); ?>
		<div id="content" class="clearfix">

^ Notice that if I want the blog portion of the comic to display on the home page I also added the comic-blog-area action.

But, since I don’t see the id=”main” there, I need to look at a file that happens before the index.php and the single.php and that would be the header.php file, which looks like this (at the end of the file since it’s too long to display as an image):

spacious-6

..and bam, there it is, the div id=”main” I was looking for, so if I want the comic to appear above both the content and sidebar I add that do_actions directly under that line.

turning this:

	<div id="main" class="clearfix">
		<div class="inner-wrap">

into this, in the header.php file:

	<div id="main" class="clearfix">
		<?php do_action('comic-area'); ?>
		<div class="inner-wrap">

Now, that’s all good and fine, but that header.php file displays in ALL files, so what we’re going to have to do is put an IF statement there to make sure that they only display on the HOME and or/comic custom post type single files and we do that like this:

	<div id="main" class="clearfix">
		<?php
			if (is_home() || is_front_page() || (is_single() && $post->post_type == 'comic')) {
				do_action('comic-area');
			}
		?>
		<div class="inner-wrap">

What that above first if statement says is, if it’s the home page (or the front page that is set in the settings) OR it’s a single page and that single page is the post_type ‘comic’ then do what’s inside the {}’s

But notice that since I want to keep the comic’s blog post in the content column, i’m going to have to do this on the index.php page that I opened earlier as well:

	<div id="primary">
		<?php do_action('comic-blog-area'); ?>
		<div id="content" class="clearfix">

That will make the comic blog post stay in the content column on the index/home page and not fill the entire space as it is above both the content and the sidebar. Now that, those two action locations are set in the theme, this is what it looks like:

spacious-7

Pretty much “almost” what we wanted it too look like, unfortunately the theme is making the ‘table’ for the navigation go full width so we adjust that with this overide CSS:

table#comic-nav-wrapper {
     width: auto!important;
}

And that will make the width of the default/custom nav bars stay consistent when people do something to the table CSS that makes it go full width like that.

You would add that code to Jetpack’s Edit CSS module (my recommendation) or the child themes style.css

Now the site looks like this:

spacious-8

Which is pretty much what we’re going for, .. and no, we’re not done yet. Cause if we use the navigation that comes with Comic Easel this is what happens:

spacious-9

Don’t see what’s wrong? .. well first it’s still display regular blog post navigation in there AND it doesn’t have the chapters: characters: info from Comic Easel, .. that’s another action altogether. Action names can be found here and what they do. Looking at that list tells us we’ need to add the comic-post-info action location to the code.

So, opening up the single.php we see this:

spacious-10

This is telling us that the ‘blog’ section of the single page is being loaded from a file called “content-single.php” which comes from this line in the PHP:

<?php get_template_part( 'content', 'single' ); ?>

It’s also telling us that navigation line that’s supposed to be for blog posts only is the next part under it with this:

<?php get_template_part( 'navigation', 'archive' ); ?>

So, since we’re not going to add the post-comic-info action to this file, but we do need to make the navigation display on posts only and not on comics, we’re going to edit this file anyways and add an if statement to get_template_part for the navigation-archive

<?php if ($post->post_type !== 'comic') get_template_part( 'navigation', 'archive' ); ?>

That if statement basically says if the post’s post type is NOT the ‘comic’ post type then go ahead and do this, .. saving this file and moving on, next file we open in the content-single.php as said previously.

spacious-11

Looking at this code, it’s pretty clear I want to have it placed above the display of the content (which is that the_content();) line on there.

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<?php do_action( 'spacious_before_post_content' ); ?>
	<?php do_action('comic-post-info'); ?>
	<div class="entry-content clearfix">

With this theme, the title is displayed way above the comic (nice place for it btw, looks good) but this now adds the comic post info to the blog post

Now we have both the single pages and the home page look exactly how we wanted it, with only minor differences if we wanted to add the do_action(‘comic-area’) inside the content column or have it above everything:

spacious-12

…tada!

oh crud, we’re not done, after clicking the link for ‘the comic’ as the chapter in this example, I got to the archive/search page:

spacious-13

..and I notice it’s displaying the featured image twice.. once by the theme and once by comic easel injecting it into those sections..

So, there are two options we can take, the first and easiest is just to to the comic -> config section in your dashboard and disable the archive/search display image, what image to use there, by selecting none:

spacious-14

The other is to open the archive.php and search.php files for your theme and make how it displays the featured image use an if statement:

if ($post->post_type !== 'comic') { do stuff here }

Basically saying that if it’s not a comic do stuff.

But yeah, just setting it to none in the comic->config is easy enough.

and finally:

spacious-15

I went with just disabling it and it looks fine, theme default look and all.

..now we’re done.

If you have any questions, post comments.