Plugins for WordPress – making your like easier
In the last post, we started to add pages and widgets to the website so it would be a little more functional. Now we need to take advantage of the WordPress developer community and install some plugins to make our site more effective.

As I mentioned in the first post in this series, one of the best things about WordPress and ComicPress is the large developer community that exists. The incredible number of plugins available help to make WordPress an incredibly powerful Content Management System (CMS).

We are all squeezed for time almost every day and plugins can save you from fighting with code and trying to make something work. Making your own comic and publishing it weekly on the internet can take enough of your time and luckily, WordPress/Comicpress come to the rescue. Plugins allow you to tie your website together with a Facebook fan page, a Twitter account as well as add in a bunch of tools to make your website more effective for the user. I’ve always thought of plugins as either enhancing how your website “works” or plugins that enhance social media. Below is a list of the plugins that are a good starting point for anyone.

Plugins to enhance your website functionality
Google Analyticator – This adds the necessary JavaScript code to enable Google Analytics tracking on your blog. It also includes several widgets for displaying analytics data in the dashboard.
Why to use it
Probably one of the most important things that you can add to your website, Google Analytics will let you see who’s coming to your site and what they’re looking at. Why is this important? Well if you start posting content that’s really generating traffic, it’s nice to know exactly what content is doing it.

All-in-One SEO Pack – Successful Search Engine Optimization (SEO) is vital to getting more visitors and better results. This plugin allows you to add better SEO to your blog.
Why to use it
SEO is all the rage, right? Any organic hits (i.e. you’re not paying for them) you can generate for your website a bonus and that’s what you should be looking for.

SEO slugs – This plugin removes common words like ‘a’, ‘the’, ‘in’ from post slugs to improve search engine optimization.
Why to use it
What I said with the All-in-One SEO Pack applies here. Anything that you can do to generate more and better quality organic hits is a good thing.

Robots Meta – This allows you to add all the appropriate robots meta tags to your pages and feeds.
Why I use it
Similar to what I said above, meta tags will help with your search engine results and this should enhance the profile of your site – and again more organic growth is a good thing.

Sitemap Generator – There are quite a few different plugins to choose from to generate a sitemap. I’ve always used Dagon Design Sitemap Generator (but I can’t seem to find it through WordPress, but here’s the link if you’re interested). Otherwise I’d suggest Google XML Sitemaps.
Why to use it
A sitemap of your website will help search engines like Google, Bing and Yahoo to better index your blog. Because of this, it’s much easier for the search engine crawlers to see the complete structure of your site and retrieve it more efficiently. This will lead to better search results and hopefully more organic traffic coming to your site.

Contact Form 7 – This can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup.
Why to use it
This was recommended on ComicPress.org and it’s always worked for me. This allows you to insert a contact form directly into your website so that you don’t have to send a visitor to an outside email program. They fill out the form, hit send and the them email is sent directly to the email you specify.

Contact Form 7 to Database Generator Extension – This plugin works in conjunction with the plugin above and saves form submissions to a database that you can reference later.
Why to use it
This plugin is a great way to generate leads if you’re building a fanbase and want to contact them. Ok, so this one kind of made me a little wary at first, but someone has contacted you directly, so they’re offering up their information. Hopefully that means their interested enough that if you send out newsletters or something they’ll want to hear from you.

Plugins to enhance your social media
Wordbooker – It provides integration between your blog and your Facebook account. It also lets you add the Facebook like/share buttons after posts or on pages.
Why to use it
I’m not a huge Facebook person, but some people are. Online graphic novels are about developing a community and right now, that’s Facebook. The easy integration with the website along with being able to add the like/share buttons made this incredibly useful.

Twitter Tools – A complete integration between your blog and Twitter. Bring your tweets into your blog and pass your blog posts on to Twitter.
Why to use it
Twitter has really taken off in the past couple of years. The ease of connecting your blog with Twitter to add tweets with no extra work is incredibly handy and delivers notifications to your followers in a convenient way.

WP-Twitter Retweet Button – This installs the official Twitter button after posts to let people easily retweet it.
Why to use it
The obvious reason to include a retweet button is to allow readers to easily pass the content along to others. I picked this plugin in particular because it comes withPNG graphics. Why is this important? If you’ve designed your site with a background image that fills up the screen, having a retweet image that has a white box around it looks horrible. It took me a little digging and trying out different plugins to finally find one that solved this problem.

AddThis – Easily allow your users to promote your content by sharing to 330 of the most popular social networking and bookmarking sites (like Facebook, Twitter, Digg, StumbleUpon and MySpace).
Why to use it
So we’ve got Facebook and Twitter covered, but what about the rest of the social media sites out there. To be honest, there are so many and new ones keep popping up all the time. AddThis solves some of these problems by giving you a convenient way to let the user share stuff from your post in one tool.

Getting started
Each plugin will require different amounts of work to get fully operational once you’ve installed them. Some may work as soon as you install them while for others you may be asked to enter information or add pictures, etc. I’m not going to go through each of the plugins listed above, but if you have questions (or problems), post something in the comments below and we can try to figure it out.

Depending on your web service provider, some plugins may have been included when you installed WordPress but for the purposes of this tutorial, let’s assume none were pre-installed. So let’s go through the process and install one plugin from above.

1.
The first thing we need to do is to get to the Plugins page. Click on Plugins on the left-hand side of the WordPress Administration page. This will take you to the main Plugins page. Next click Add New (either at the top of the page beside the word Plugins or on the left-hand side below Plugins) to take you to the plugins search page.

I want to get started on social media right away for the Blank, so I’ve decided to install AddThis. Type “AddThis” into the search field and the top hit in the results should be the correct plugin. Click Install (it will ask you if you really want to install it, so click OK) and this will take you to a new page where you want to click on Activate Plugin to finish the installation and you’re automatically returned to the main Plugins page.

2.
Now we need to set up the way the plugin looks and works. Plugins appear in different places in the Administration panel so you may have to look for them at times.

AddThis is under Settings, so click Settings on the left-hand side and then click AddThis to get to the right page.

From here we just need to decide how we want the plugin to look. I don’t want anything to appear above a post, so I selected None in the top box. For the bottom box, I’m not a fan of the default, so I clicked More Options and then picked the sixth one down that includes buttons to let the reader share on Facebook, Twitter, Google+ and then a general “share” button with other social media sites. You can preview this to see what it looks like (there’s a button at the bottom of the page) or if you’re happy with your choice, click Save Changes to finish the process off.

If you open up the site in a new browser window, you’ll see that the plugin is working.

Plugin away!
This list here is just the tip of the iceberg and a good place to start out. There are so many different plugins available – usually there’s more than one for what you’re searching for – I’d suggest you look around either WordPress.org or in the Plugins section on your Admin page, do some research and test them out. There’s probably exactly what you need just waiting for you to find it.

______________

If you missed a part of this series, here they all are:

So You Wanna Publish a Webcomic? – Part 1
So You Wanna Publish a Webcomic? – Part 2
So You Wanna Publish a Webcomic? – Part 3
So You Wanna Publish a Webcomic? – Part 4
So You Wanna Publish a Webcomic? – Part 5

Making pages and using widgets
By the end of the last tutorial, our site was up and we had made quite a few basic edits to the CSS to begin to customize the look of the site. I continued on to make some more edits and if you want to see my updated stylesheet, you can download one here.

What I want to do next is start adding some more functionality to the site through pages (for more information about the Blank) and some widgets in the sidebar.

Adding pages
Creating new pages for you site is super easy. I want to add in a few new pages to cover the following sections: about, about the creator, the production schedule and contact information. We can do this with a couple of quick steps. If you don’t have information written up for each of the pages, you can always save a draft that you can publish later. For the purposes of this tutorial, I’m going to be using Lorem Ipsum for my content. I’ve deleted the Sample Page that WordPress automatically generates when you set up your site since I won’t need it anymore.

So now that we’re ready, let’s make some pages.

1.
The first page that we’ll create is the About page. To start, click Pages on the left-hand side of the page and this takes you to the overview of the pages that you have on your site. Create a new page by clicking on Add New either at the top of the page (beside the Pages title) or on the left-hand side of the page (below Pages).

This will take you to a new page where you can fill in the information that you want to appear. Add in a title and the written content in the fields provided.

Next you need to define the page Template you’d like to use (in this case I’ve selected Default since I just want a normal page) and next select the Order you want it to appear in the menu bar (the default is 0 which will come first, I’ve set mine to 1).

At this point, my page is ready to go so I’ll click Publish and the page goes live on my site. Now the handy thing about ComicPress is that it automatically adds in the new page to my navigation menu bar on the site instead of making us have to add it to the code manually. Go ahead and create a Contact page using the same process (set the Order to 2 to place it after About in the navigation menu bar).

2.
I’ve decided that I want the “about the creator” page to appear under the About page in the navigation. To do this, we have one more step than last time. First create a new page like before and fill in the information.

Next set the Order to 1 and the Template to Default (like in Step 1). And finally we need to set the Parent by selecting About from the drop down menu. When you publish the page and look at the website in a browser, you’ll notice that About now has an arrow beside it indicating that there is a menu item below it (in the drop down).

Now create a Production Schedule page using the same process (and remember to set the Order to 2).

3.
Now that I’ve created all my pages and looked them over in the browser, I’ve decided that I really don’t like the look of the comments at the end of the pages and I don’t want people adding comments to these pages anyway. So to take them off, click Pages on the left-hand side of the page and then select Quick Edit under About (hover over the About page and it will appear below). This opens up several data fields that allow you to quickly make changes to the page. In the second column there is a check-box titled Allow Comments (see the image below for reference) that defaults to “on” whenever you create a new page. Un-check the box and click Update to save the change. If you switch to your browser and refresh, the comments are gone. Go through the same process for each page to take off the comments.

Widgets
WordPress defines widgets as “plugins that add visitor visual and interactivity options and features…Widgets require no code experience or expertise. They can be added, removed and rearranged on the WordPress Administration Appearance > Widgets panel.” ComicPress comes bundled with its own 20 “useful” widgets that can be placed on “13 Widgetized areas in the layout.”

For the Blank website, I’m going to only use widgets in the sidebar at this point to keep things simple. Let’s take a look at what widgets we can add to our site by clicking on Appearance on the left-hand side and then clicking Widgets to take us to the Widgets page.

Under Right Sidebar (which is the second one down) I’m going to add widgets by dragging them from the main area on the left to the Right Sidebar area. Here’s what I used:

Latest Comics – This widget is one of the widgets that comes bundled with ComicPress and is incredibly useful. Basically, the widget will generate a thumbnail of the latest page that’s been published and display it in the thumbnail with a link to the actual page.

Archives – This is a really good idea if you’re blogging a lot (which I intend to do). It will display months for when you posted. I’ve checked the “post count” box so that people can see how many posts are in each month.

Categories – Also a good idea if you’re blogging a lot. We’ll cover categories in a later post, but this widget displays all of the categories that you’ve generated and this will help the user find what they’re looking for easily.

There are a ton of other widgets that you can add in. Just figure out what you want and drag and drop it into the sidebar.

The Text/HTML Widget
The widget that I find the most useful when designing websites is the Text/HTML widget which allows me to put virtually anything I want in the sidebar – completely customized. Want a button advertising your Twitter profile? Use this widget. Need to promote a contest you’re participating in? Use this widget. Do you want to feature advertising on your site? Use this widget.

I want to put links to highlight my Facebook and Twitter stuff for the comic, so this widget is the perfect solution. Here are the steps that I followed to do this:

1.
I created the artwork for the buttons and saved them for the web. If you don’t know the width of your sidebar, it’s 200 pixels wide with 5 pixels of padding around it. This means we should build our button to 190 pixels wide (200px – 5px – 5px = 190px). Build them to whatever height you want (I made mine 50 pixels high).

2.
Upload the images to your website by clicking Media on the left-hand side, then Add New. From here, click the button Select Files and upload the buttons. Each button will have a File URL that I copied and pasted into an outside text document that I’ll use in a minute (this URL is where the image is located on your server).

3.
In an outside text editor (or Adobe Dreamweaver) I then wrote the following code for the button:

(A) The <a> tag surrounds the image telling the browser that this is a link.
(B) The href sets where the link should point (i.e. where is the link going) and the target=”_blank” tells the browser to open the link in a new window.
(C) The img src tells the browser where to find the image that we created (this would be the File URL that we copied in the previous step).
(D) The width and height can be set to the width and height of the image that we created.
(E) The alt is the alternate text that will appear if there is a problem loading the image or if the user hovers their mouse over the image.

4.
For the final bit of the process, go back to the Widgets page (click Appearance on the left-hand side and then click Widgets) and drag and drop the Text widget to our Right Sidebar. Then copy the code from Step 3 into the widget and click Save.

If you go back to view the website in a browser window the image (with the necessary link) will now be in the sidebar. Repeat the process to create the Twitter button. The new buttons should look like this:

Final thoughts
Pages and widgets should give you a lot of options for how to enhance your site and add in usability for the reader so take what we’ve covered here and be creative. In the next post we’ll take a look at more ways to add functionality to your website.

______________

For the rest of the series click one of the links below:

So You Wanna Publish a Webcomic? – Part 1
So You Wanna Publish a Webcomic? – Part 2
So You Wanna Publish a Webcomic? – Part 3
So You Wanna Publish a Webcomic? – Part 4
So You Wanna Publish a Webcomic? – Part 5

Basic edits
We ended the last post with WordPress and ComicPress installed and our child theme created. We’re now ready to start customizing our site so that it looks like we want it to. This post is still what I’d classify as a beginner level and we’re going to be customizing the layout, type and colors. Let’s get started.

1.
To begin, a quick note about how I usually work when editing the code. I always try to add comments and notes to the code as I work, so that if (and when) I go back to make further edits, I can remember exactly what I’ve done. So for the first step of this process, I’m going to add in a note at the top of the stylesheet (style.css) that summarizes what the edits I’m going to make will cover. Below is a screenshot of my notes (notice that all the notes are started by /* and ended by */). This is a basic CSS code tool called a comment mark.  Anything in between the /* */ will be ignored by the system when it displays your webpage. I use these notes throughout the stylesheet to remind myself exactly what each piece of code does. When I started working with ComicPress it was pretty confusing and this process has allowed me to figure out what’s going on in the stylesheet and code.

2.
Next I want to adjust the layout so that it’s simpler than the 3-column that is the standard ComicPress layout when you install everything. To do this, click on Appearance on the left-hand side of the Dashboard and once the page loads, click ComicPress Options and this will automatically take you to the Layout page.

In the middle of the page is a dropdown that will let you select what layout you prefer to use. You can definitely play around with layouts and see what works for you, but for this tutorial we’ll choose the very first one in the list: “2 Column – Sidebar on Right”. This is a pretty standard format and it will work for what I want the Blank website to look like. Click Save Layout and if you view the website in a browser it should look like below.

Customizing your site – colors
Since we’re about to begin editing the code in the site, it’s probably a good time to point out that this is where you’ll need to know some basic HTML/CSS/web stuff. If you’re not that familiar, you can download my stylesheet in a link at the end of this tutorial so that you can follow along. We’re going to edit the colors then the type, so let’s get started.

1.
The first thing that I want to change is the background colors used in the site (defined as background-color in the stylesheet). My plan is to keep things simple and use white, black and red for the color scheme (I’m going to use simple web safe colors to keep things simple and if you want to choose different ones for your site, try out the w3schools link here for more options).

For the design I have in mind, the backgrounds should be white and to do this I need to edit the colors that are defined in the stylesheet. I need to change the color defined in the body element from blue (shown below as Original Color below) to white.  However, since this is a programming language, I need to use a special code to do this: the hexadecimal notation (HEX triplet).  Hexadecimal codes can get very involved, but for our purposes, know that it’s just another way of defining the way a computer displays colors, in a way readable by your website.  Looking at the list of web safe colors I linked to (above), I see that I need to alter the HEX triplet for background from #075591 to #FFFFFF (shown below as New Color).

Take a look in the browser window and the background of the site should be white.

2.
Now we need to go through the whole stylesheet and update the colors as we go to make the backgrounds of each element white. Here’s what I updated and the order I did them in: page, header, content-wrapper, footer, narrowcolumn/widecolumn. After each one, I simply clicked Update to save the change and then refreshed the website in the browser window so that I could see what the overall change looked like. If the change didn’t look like I wanted, I simply went back to the original color and I was back where I started. Now that all of the background colors are white, the site looks like this:

I’m still not sure about the background lines and some of the other design, but I think this will do for now. We can always come back later and make more edits if we want to.

Customizing your site – type
Now that the colors have been changed, we can’t read the type that was white. Not to worry though, since we’re about the adjust the type in this step. Typography on the web has changed a lot in the past couple of years or so but for this beginner level tutorial we’re going to keep things simple. The first thing that I want to do is alter which font the site uses. There are a bunch of fonts that work online that you can choose from when you’re just starting out and if you’re curious I’d suggest you check out what’s listed on the w3schools link here. Let’s fix the type.

1.
The first thing to take care of is defining the type the site should use. For this site I’ve decided to use Trebuchet MS because it’s a sans serif and I never use it for websites. To adjust the type that’s used, simply add in the following code to the body element:

So in (A) we have defined the font as being Trebuchet MS as well as told the browser to use a default sans-serif typeface if Trebuchet MS isn’t loaded on the user’s computer (this is part of making good code and having your site “degrade gracefully”). And in (B) we have defined the color of the type as being black by setting the HEX triplet to #000000. If you refresh this in your browser, you might not notice a huge difference but if you look at the g’s (say in the word Category) you’ll see the change.

2.
Now we need to change the color of the rest of the type used throughout the site so that all of the headlines, header and footer elements are black. To do this I’m going to go through the stylesheet in the exact same way that I did when I changed the background colors above – updating and refreshing the browser as I go to see that the changes are made correctly. Here’s the order I did the edits in: header h1, footer, header h1 a, footer a.

3.
I want the links to change color to all black too (instead of the default blue), so I’ll need to add in some copy at the very top of the stylesheet after the body element to make sure that they do this. The reason we need to add in the code ourselves is that the child theme is currently using the ComicPress code that defines what links look like. The ComicPress Boxed theme we used as the basis for our site didn’t define these, so we need to do it in order to change the appearance of the links (This is another reason why creating a child theme was so important before we started making edits since we can add and change things in our stylesheet and not worry about changing the core code).

So add in the code below and your links should now be black. When you roll over them they’ll change to red (HEX #900900).

4.
You may notice that when you scroll over the footer links they turn white. This is happening because there are footer links defined in the stylesheet. To fix this altogether, find the footer a and footer a:hover in the stylesheet and delete them. When you update to save the edit and refresh the browser, the footer links now work perfectly.

5.
The final edits for this post are going to be to the navigation bar. Right now, when you scroll over the link that’s there it turns yellow and the RSS link turns orange. I want these to be the same red as the rest of the links of the site.

Here’s the catch with these edits: none of the code exists in the stylesheet that we’re working with again. All the base code is in the original ComicPress stylesheet. So to make the edits, I’ll be the guide and follow along with these steps.

I want to set the background color of the menubar to black to match the design so far. To make these edits, locate the /* MENU */ in the stylesheet and add in the copy below:

(A) We’ve now defined that the menubar-wrapper should be black (HEX #000000). Next we want to edit the links.

(B) We set the link color in the .menunav a to be white text.

(C) The .menunav-rss:hover needs to be changed so that the active link goes red and to get rid of the background-color in the original stylesheet, we define the background as “none”

(D) For all of the .menu ul li links we do much like above and define the type colour (white) and set the background-color to black by adding in #000000 definition. We need to set the background color to black so that if there’s a sub-menu item the drop down navigation will show with a black background.

(E) All that’s left is to set the .menu ul li a:hover to be red to match the rest of the site.

6.
There’s one more final bit that’s really annoying me. So before we end this session, let’s make one last update. There’s a drop shadow on the title at the top of the page and I want to get rid of that and add in an active link state. To do this I deleted the h1 definition under the /* MENU */ section and added in a header h1 a:hover definition up with the #header h1. My final bits of edits look like this:

Keep experimenting
So that’s it for this tutorial. I’d encourage you to play around with the colours and find something that works for you. If you want to see my full set of edits to help you follow along, you can download my stylesheet here and I’ve added in comments to help you see what edits I’ve made. Otherwise, keep trying out making edits to the site to get it to look exactly like you want it to. For now, here’s what the site looks like:

Next we can cover adding in some more function to our site through pages and widgets.

______________

For the rest of the series click one of the links below:

So You Wanna Publish a Webcomic? – Part 1
So You Wanna Publish a Webcomic? – Part 2
So You Wanna Publish a Webcomic? – Part 3
So You Wanna Publish a Webcomic? – Part 4
So You Wanna Publish a Webcomic? – Part 5

The internet has transformed independent comics and given creators an easy way to get their stories out to the public. There are a lot of different ways to publish your work online, but two of the most popular are WordPress and WordPress running ComicPress.

For most artists, computer code isn’t the first thing that they think of when sitting down to work on their stories. But depending on your knowledge level, either of the options above are fantastic solutions with a lot of options.

What You Need to Know

WordPress is a free open source blogging tool used by millions of people online for blogs and websites. Because it’s free, it’s perfect for independent comic creators on a tight budget. Using a blog is a great way to publish content since you can easily post, archive and tag content as well as get feedback and interact with readers.

WordPress is also an excellent Content Management System (CMS) that has a large community of developers. There are all kinds of additions (plugins) that can add to enhance your website and save you valuable time. WordPress uses a combination of HTML,CSSand PHP, so it’s relatively straightforward to learn and use.

You can use blogs hosted by another company if you choose and those work. But if you’re serious about publishing your comic online, it would be worthwhile to purchase your own webspace and then set up your website there. This gives you the ultimate control over what’s on your sites and how it looks.

If you’re looking for a slightly more advanced publishing platform, there’s ComicPress, which over the past five years or so has become increasingly popular. ComicPress provides you with the added functionality of displaying pages and navigation for these pages in your WordPress theme.

The WordPress/ComicPress combination is great for people who want to quickly and easily change how their site looks without a lot of coding experience. If you want to completely customize your website, it does get complex and you will need to understand coding, but we can get to that in later posts.

Fortunately, both WordPress and ComicPress have large communities and forums that you can dig around in for answers. These can be both helpful and frustrating since you can’t always find the exact answers to the problem that you are having.

Let’s start at the beginning…

If you’re just getting started, you need to evaluate what your skill level is. Even if you’re a complete beginner, there are a lot of resources online to help you through. Everything is extremely well documented online, so check out the links at the end of the article to get started. Once you’ve got everything installed, it is very straightforward. Some basics you might need to know are:

HTML – HyperText Markup Language (HTML) is the predominant markup language used for web pages and it forms the basic building blocks of the web. Web browers read HTML documents (code) and then display them on screen for the user.

CSS – A Cascading Style Sheet (CSS) is a language used to describe the look and formatting of a document written in a markup language (usually HTML).CSS is designed primarily to separate the document containing the content from the document pertaining to how it is presented.

PHP – Hypertext Preprocessor is a widely used, general purpose scripting language. PHP code is embedded into the HTML source document and interpreted by a web server with a PHP processor module, which generates the web page.

Or, in summary:
1. Web pages are composed in HTML.
2. CSS tells the browser how the HTML should look.
3. PHP is dynamic code so that you don’t have to change every web page, just certain parts and those changes will take effect across the whole site. It also works with server based databases so that pages can call and receive specific content.
(There are probably better explanations than this, but that should help it make sense)

Where do I download the files?

Hopefully now you’re confident that WordPress/ComicPress is right for you. So get started by checking that your server provider is running a MySQL database to store all the blog information that you’re going to start to generate. Then you’ll need to install both WordPress and ComicPress on your server. All of this is well documented over on WordPress.org, so here are the links that you’ll need to get going:

Download WordPress here.

Instructions on how to install it here.

Once you’ve got that up and running, download ComicPress here.

There’s a couple of extras and a step-by-step installation guide here.

There’s also ComicPress.net for more help (thanks Frumph for the info!).

Once you’ve done all of this, you should have a basic blog and comic website site up and running. It won’t look terribly unique, though – so in the next post in this series, we’ll cover some basic editing and customization, to start making your site more interesting!

__________________________

For the rest of the series click one of the links below:

So You Wanna Publish a Webcomic? – Part 1
So You Wanna Publish a Webcomic? – Part 2
So You Wanna Publish a Webcomic? – Part 3
So You Wanna Publish a Webcomic? – Part 4
So You Wanna Publish a Webcomic? – Part 5

You can see more of Jason Smith’s work at jsnsmith.com/ontheverge.