Webcomic Tutorial: Step-by-Step Customization of WordPress Theme for Your Website with the Comic Easel Plugin

Everything you need to know to get your WordPress Webcomic site up and running!

So you wake up one day with an idea for a Webcomic that is sure to take the Internet by storm! It has a compelling

cast of characters that would make George R. R. Martin blush. You have drawn a month’s worth of buffer that should, hopefully, save you from your procrastinating self. You have come up with the punniest title for your comic. Shockingly, a domain name, that perfectly matches your title, is available and you didn’t waste any time registering it. While you were at it, you purchased some web hosting which includes this thingamajig called WordPress that your friends are always raving about. You already have a WordPress theme that perfectly fits your Webcomic. But then, you are stuck with the question: how the heck do I get it to display my Webcomic?!

Not to worry, that’s where this tutorial comes in. I aim to give you a step-by-step guide on customizing your WordPress theme from start to finish. For this mission, should you choose to accept it, I will assume you have a basic understanding of HTML and CSS. You will also need a willingness to get your hands dirty with a few lines of PHP code. You’ll of course be working a lot with WordPress and the Comic Easel Plugin. One other plugin you will be installing is the popular JetPack plugin(a must have for any WordPress website). Installing JetPack will have your website humming, but the main reason we will be adding it to your WordPress installation, is to make use of it’s Sharing feature. More on this later.

Let me touch a little bit on the plugin we will be using: Comic Easel. This is a great plugin that was built to provide just about everything your need to manage a Webcomic site. This includes: a Content Management System(CMS) for adding, editing and deleting your comics, navigation for your comics, an archive, and much, much more. The plugin was developed by Philip M. Hofer who built on the work done by Tyler Martin, creator of the popular WordPress theme ComicPress. You can find more information on the plugin here. A couple more notes (don’t worry, we’ll be starting soon. Patience grasshopper).

We will be doing a little bit of coding in PHP, so it would serve you well to spend at least a few minutes getting yourself acquainted with the language. There are some great, short, beginner level tutorials you can find here. But once again, I will be guiding you through the code, so not to worry.

Please note, the level of customization may vary, depending on which theme you choose to use. All you need to know is that all WordPress themes have the same basic structure with at least two files (index.php and a style.css). Most themes split up the index.php file into: header.php, index.php, sidebar.php and footer.php. For the purposes of this tutorial, I’ll be customizing the Inkblot theme, which is a fully responsive, highly customizable, and a Webcomic-ready theme.

Interested in trying out a new theme for webcomics? Checkout the following video tutorial showing you how to quickly get started publishing comics on a WordPress website!

Hopefully, I have not alarmed you at this point. Don’t worry, I’ll try to make the process as painless as possible.

Are you ready?! Then let’s get started!

Step 1: Install Your WordPress Theme

  1. Login into your WordPress’ admin dashboard. Usually accessed by going to http://www.yourdomainname.com/wp-admin It should looks as follows:
    Screenshot of WordPress Dashboard
  2. Install and activate your WordPress theme(we’ll be using InkBlot for this tutorial)
  3. Hover over Appearance to the left of your dashboard menu, then click Themes.
  4. Click on Add New button that appears at the top of the Themes page.
  5. In the Search themes… text field type in the name of the theme you wish to use (InkBlot in my case).
  6. Click on the Install button.
  7. Once it’s successfully installed, click on the Activate link.

Step 2: Install Comic Easel

  1. Hover over Plugins to the left of your dashboard menu, then click Add New
  2. In the Search Plugins text field type in Comic Easel
  3. You should see the plugin listed with the Install Now button. Click on it.
  4. Once it’s successfully installed, click on the Activate Plugin link

Step 3: Install JetPack

  1. Repeat Step 2, but this time, searching for JetPack in the Search Plugins field instead
  2. You can now take a look at your website. It should look something like this:
    Screenshot of Activated WordPress theme

    Notice the fancy Share: section below the blog post? This was automatically added into your theme by the JetPack plugin. It will give your readers the ability to share your Webcomic with their favorite social media platform.

    We are getting close. Let’s start customizing!

Step 4: Design Your Page Layout

Before you start customizing your theme, you should decide how the layout of your website will look like. In this tutorial, our layout will feature the comic strip prominently on the homepage, with a blog section right under the comic strip. The header(logo section plus the main navigation bar) and footer should already be built into your theme. For this tutorial we will be focusing on customizing the homepage, the single page view for a comic, the single page view of a blog post, and an archive page. The respective layouts will be as follows:

  1. Homepage
    Webcomic Website - Homepage Layout
  2. Single Page – Comic
    Webcomic Website - Single Page - Comic - Layout
  3. Single Page – Blog Post
    Webcomic Website - Single Page - Blog Post
  4. Archive page
    Webcomic Website - Archive Page

Step 5: Customizing the Homepage and the Single Page(for Both a Comic and a Blog Post)

  1. Go back to your WordPress dashboard
  2. Hover of Appearance on the left of your navigation bar, then click Editor. This should open up your Advanced Code Editor. We will be using this great feature of WordPress to make custom changes to your theme’s files.
  3. To the the right of your screen, you’ll see a list of all your files in your theme. Locate the header.php file and click on it. This file contains all the content that goes at the top of the web page.
  4. Right at the bottom of the file, copy and paste in the following code:
    <?php
     if (is_home() || is_front_page() || (is_single() && $post->post_type == 'comic')) {
     do_action('comic-area');
     }
     ?>

    This code first checks to see if we are on the home page OR, if we are on a single post page displaying a comic.

    That’s all it takes! With just a few lines of PHP code, we have added your comic to both the homepage and the single page view for comics. The single page view for regular blogs is already built into theme, so we are almost done!

  5. From your theme’s list of files on the right side of the Advanced Code Editor, locate the file labeled Main Index Template and click on it. A couple of things to point out before we go any further.

    This is the index.php file we mentioned in our introduction. It contains the main content of your theme. We have already dealt with header.php, but recall we also mentioned sidebar.php, footer.php and style.css earlier? You may customize these files if you want to make significant changes to the look of your theme (e.g changing the logo in the header, adding links to the navigation, adding a background image). This will be covered in a future tutorial. But our focus for this tutorial will be getting the theme to display your webcomic.

    Once you open index.php you will see two key PHP functions: get_header() and get_footer(). These functions are used by WordPress to include the header.php and footer.php files in the index.php file. This saves you the hassle of having to update the header and footer on every page of your website whenever changes need to be made. Pretty Cool, huh?

  6. In the index.php file that is now open in the Advanced Code Editor, locate the following code:
    if (have_posts()) :
     while (have_posts()) : the_post();
     get_template_part('content', get_post_format());
     endwhile;
     
     print inkblot_posts_nav(false, get_theme_mod('paged_navigation', true));
     else :
     get_template_part('content', 'none');
     endif;
    
  7. Right above it, just after
    <?php

    paste in the following code:

    do_action('comic-blog-area');

    This simply displays a blog post tied to the current comic being displayed on the home page.

Step 6: Uploading a Comic

Now we get to see how your comic will look like on your theme.

    1. Hover over Comics to the left of your dashboard menu, then click Add Comic.
    2. In the Enter title here field, type in a descriptive title for your comic(remember not to give away the punch line).
    3. In the big textarea field below the title field, if you wish, enter some text related to the comic.

      This will be the blog post that will be tied to your comic. Typically, one may just write a brief description of the inspiration for the comic.

    4. To upload your comic, click on the Set featured image link in the section labeled Set Comic/Featured Image on the right of the page.

      This will open up a pop-up window with the Media Library selected by default. The library displays all the images that have been uploaded to your WordPress site. Since we haven’t uploaded your comic yet, proceed as follows.

    5. Click on the Upload Files tab.
    6. Click on the Select Files button.
    7. Browse to the local copy of your comic, select it and click the Open button.

      The file should upload and you will get redirected back to the Media Library tab.

    8. Click the Set featured image button. This should close the pop-up window and the comic should now be attached to your post.
    9. Under the Publish section on the right of the page, Click the Publish button(note this will publish the comic to the live version of the site).
    10. Now we can take a look at your comic in all it’s glory!
      Webcomic in All It's Glory

      If you are using the InkBlot theme, you will notice a small thumbnail of the comic next to the comic’s blog post. We will take care of that in the next step.

Step 7: Deleting Thumbnail(Applicable Only to InkBlot Theme).

  1. Open the Advanced Code Editor(covered in Step 5 above).
  2. Locate content.php from the list of files on the right of the screen. Click on it.
  3. Locate the following code near the top of the page:
    <?php if (has_post_thumbnail()) : ?>
    		
    		<div class="post-image"><?php the_post_thumbnail(); ?></div><!-- .post-image -->
    		
    	<?php endif; ?>
  4. Highlight this snippet of code and delete it(you can use the Delete button on your keyboard). Be careful not to delete the page!
  5. Click the Update File button. The thumbnail should no longer show up on the homepage.

Step 8: Customizing the Archive Page

  1. Open the Advanced Code Editor
  2. Locate the file labeled Archives. Click on it.
  3. Select the following code:
    <main role="main">
    	
    	<?php if (have_posts()) : ?>
    		
    		<header class="page-header">
    			<h1>
    				
    				<?php
    					is_post_type_archive()
    					? post_type_archive_title(sprintf('<span class="screen-reader-text">%s </span>', __('Custom post type archive', 'inkblot')))
    					: _e('Archive', 'inkblot');
    				?>
    				
    			</h1>
    		</header><!-- .page-header -->
    		
    		<?php if (is_post_type_archive() and $post_type = get_queried_object() and $post_type->description) : ?>
    			
    			<div class="page-content"><?php print wpautop($post_type->description); ?></div><!-- .page-content -->
    			
    		<?php endif; ?>
    		
    		<?php
    			while (have_posts()) : the_post();
    				(webcomic() and is_a_webcomic())
    				? get_template_part('webcomic/content', get_post_type())
    				: get_template_part('content', get_post_format());
    			endwhile;
    			
    			print inkblot_posts_nav(false, get_theme_mod('paged_navigation', true));
    		else:
    			get_template_part('content', 'none');
    		endif;
    	?>
    	
    </main>
  4. Replace it with this:
    <main role="main">
    <header class="page-header">
    <h1>Archive</h1>
    </header><!-- .page-header -->
    <?php echo do_shortcode("[comic-archive list=0]"); ?>
    </main>
  5. Click the Update File button.

Congratulations – you’re ready to launch!

Now that wasn’t to hard, was it?

If you’ve followed the steps in this guide, you should now have a fully-functional Webcomic WordPress website!

One final note. Say you login into your WordPress dashboard one day, and you notice an alert that your theme needs to be updated. You proceed to click on the enticing Update now link. Once successfully updated, you check on your website to see what new features were added to your theme. To your horror, you realize all the hard work we covered in this tutorial has been wiped out! Moral of the story, if you choose to customize a theme directly, you’ll have to either avoid updating it, or, keep repeating the steps we went through on every update. “So is there a way I can update my theme without losing my changes?”, you may ask. Why yes: with the use of child themes. This will be covered in a future tutorial.

Hope you found this step-by-step tutorial useful – but if you have any more questions, or need help with one of the steps highlighted, I’d be happy to be your guide. My contact details can be found here. Also there’s plenty of helpful resources from Comic Easel’s website.

Last, but not least..

If you find my tutorial useful, please feel free to share this page or comment below. This will let me know you are interested in more upcoming tutorials.

Now get out there and conquer the Interwebs!

Thanks

19 thoughts on “Webcomic Tutorial: Step-by-Step Customization of WordPress Theme for Your Website with the Comic Easel Plugin

  1. I cant believe I never ran into this website. Good info here. I cannot for the life of me get the archive-thumbnail images to show up in comic easel with Avada. The initial implementation was pretty easy and I figured out the cast thumbnails but the Archive comic thumbnails I cannot get. Thanks for the post it helped a lot.

  2. How do you make the comic panels responsive?

    1. @Mambru It involves a bit of trickery between CSS and the way you setup the comic image. What I do is split up the comic into individual panels. A four panel comic would therefore have four images. Then using what is called CSS media queries, I either show all the four images in one row horizontally, or stack them up vertically based on the screen width. Hope that makes sense.

  3. For some reason my featured comic page shows twice when I preview the page. How wold I fix that?

    1. Hmmm, not sure why without access to your website.

      1. Oh, it’s fine now, I just had to reinstall my theme

  4. Can you have just a blog post homepage and the comic on another page?

    1. Yes you can. All you have to is add the page that will have your comic, then add the following code:

      Please note though you cannot not add PHP code directly into a WordPress page. You’d have to do a bit of trickery. This tutorial should help:

      http://www.wpbeginner.com/plugins/how-to-allow-php-in-wordpress-posts-and-pages/

      Good Luck!

  5. Hi there. I’m really inexperienced with this, and I’m looking forward to learning as I go along. I was following this tutorial and when I got to the part about the pasting in code to header and index etc. I wondered if these are things I need to do if i’m using your Sunny and Blue theme and not Inkblot. I’ll keep playing around with it for now, using Comic Easel and your theme.

    1. Okay, I don’t really know what I’m doing, haha. I’ll go check out that wpbeginner site you have linked. http://www.wingedkitten.com to see what’s up, so if you have any insights. Also, in chrome, i keep seeing a ‘wigitized footer right column’ bar that appears about mid-way through the page. I don’t see this on your site though, so I dunno. Also i’m getting the double posting of comic image.

      Again, any insights would be appreciated. I’ll go head over to that wpbeginner site to see what I can learn!

      1. Hey tweak’n. Did you get everything figured out?

        1. Hiyas, yes I did get things figured out.

          I looked online for the issue I was having with the footer displaying mid-way through a page. I ran the page through http://validator.w3.org/ and found the pages.php had an extra < at the very beginning (at first i thought it was the header.php, but trial and error pointed to pages.php). I deleted that extra < in pages.php and all is well! I also found out that seeing the 'wigetized footer' message was because 'if admin, display message' basically.

          As for the double Image posting, i went back to the initial question if i needed to add the code from step if I'm using your theme. I removed the code from steps 5.4 and 5.6 and all was grand!

          So if anyone is having the same issues, I hope these discoveries can help them. Thanks for a nice theme, I'm really enjoying learning from it!

        2. Great! Glad you figured it out.

  6. In the previous comics, it displays the comic twice: one normal version of the strip and one that acts as a gigantic header. How do I remove the big header? Or edit the formatting of the “old” strips?

    1. Hey Robin. Could you send me a link to where you are encountering this issue?

      1. Sure! The site is:
        http://twistedtalesoftimmy.com/
        I had been trying to alter it over the last few days so if you visited it during any of those times, you may not have seen what I saw.
        In any event, I have somewhat identified when the problem occurs. From the homepage, everything starts off fine. But if you go to any other comic (eg previous), then it acts like a blog page and displays the comic twice. This still occurs when going back to the most recent strip.
        My questions are these:
        1) is it possible to not display the comic twice?
        2) is it possible to never have any strip treated like a single blog post? In other words, it always looks like you’re on the front page and only the displayed comic changes?
        Thanks for this site. I’ve found it extremely helpful!

        1. Hey Robin. May have to do with the kind of WordPress theme you are using. Sounds like the comic code has been placed in both the header and single blog post page. Cannot know for sure without looking at your code. Just make sure the following is added only once to the header.php file(and nowhere else):

          post_type == 'comic')) {
          do_action('comic-area');
          }
          ?>

          With regards to your second question, all you have to do is remove the following code:

          do_action('comic-blog-area');

          Hope that helps.

  7. Thanks for this tutorial!

    Pretty useful!

Leave a Reply