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:
   
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:
   

   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
   
2. Single Page – Comic
   
3. Single Page – Blog Post
   
4. 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. 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!
       

       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