Many popular comic websites contain little extra jokes in the form of mouseover text; the little captions that appear when you rest the mouse on a link, image or even general text. xkcd is probably the most famous for this, given that it has at least one joke or comment on each comic (and sometimes they are funnier than anything in the main comic). Penny Arcade takes this in a different direction by having mouseover text on the end of Jerry/Tycho’s blog posts but nevertheless, it is there.

If you are using a WordPress system to run your comics, adding your own mouseover text is very simple. Because ComicPress is probably the most popular implementation of comics on WordPress right now, I’m going to use that as the basis for this example but you can quickly apply it to any WordPress-based comics system.

First of all, log in to the admin side of your website (it’s usually yoursite.url/wp-admin for those who aren’t sure) and click on the “Appearance” tab in the sidebar. Find where it says “Editor” and click on it. This will bring up the editor for your site’s code. If you have the site set up to allow code to be changed from admin part of your site, you will be able to edit your site code from here. It’s a useful setup but not everyone has their permissions set for it.

If you don’t, you’ll have to download two .php files from your site and edit them on your computer before uploading them again. The end result is the same, it’s just a slightly more cumbersome method of doing this. The two files you will need are “index.php” and “single.php” and you will find them in the directory where your theme’s files are stored (such as wp-content/themes/comicpress-3c).

From the editor, click first on index.php (called “Main Index Template” on my version of ComicPress but it may be different for you since I’m using a slightly customized version of ComicPress, so I’ve not updated in a couple of years now). Near the top of this file will be a section for displaying your comic. You can tell which piece of code this is because it will look something like:

<div id="comic">
 <img src="<?php comic_display(); ?>" alt="<?php the_title(); ?>"
title="<?php the_title(); ?>" />
 </div>

See the part that says title=”<?php the_title(); ?>” on the second line? The HTML code title, when used in conjunction with a tag (such as <a>, <img> or <p>) tells your browser to display a caption or “tooltip” when the mouse is hovered over the tag in question for a second or two.

By default, ComicPress sets your comics up so the name of the post associated with your comic is used as the title text. This is all well and good if you want people to see the name of the comic all over the place (remember that by default, Comic Press will display that same text below the comic, too) but sometimes you want to be able to put in an extra joke, comment or whatever.

So let’s make it so you can do that. It’s surprisingly simple.

WordPress has a nice function whereby you can use PHP code to search for meta tags and then use their contents to do specific things when certain commands are entered in a post; or display certain extra text if it is needed. This website is using meta tags to tell WordPress where to find the pictures that appear in the slideshow on the main page; and also where to find the smaller pictures used for the list of articles beneath the slideshow.

We’re going to set up a little code that makes WordPress look for a meta tag and display it as mouseover text on your comic. Let’s call this meta tag “titletext”. You can use a different name if you want but I’d recommend not using “title”, “mouseover”, “caption” or anything else that looks like a real HTML tag. It could confuse the site and cause problems.

The code you need is:

title="<?php echo get_post_meta($post->ID, "titletext", true); ?>"

Replace the title=”<?php the_title(); ?>” code we talked about above with the new code and click the “Update file” button to save the file. If you are working offline because you had to download the files to edit them, use Ctrl-S or File->Save instead (yes, I know I’m probably teaching Grandmother to suck eggs there but I don’t want to be potentially leaving someone behind).

Comics on your main page are now capable of displaying mouseover text but what about comics in your archive? When people use the “first,” “previous,” etc tags, the mouseover text will not appear. Your site will still be displaying the old title text, telling readers they are looking at “episode 7″ or whatever.

To change that, we need to go into single.php and do the same code replacement. As with the main index page, the necessary code in single.php is near the top. It looks like this:

<div id="comic">
 <img src="<?php comic_display(); ?>" alt="<?php the_title(); ?>"
title="<?php the_title(); ?>" />
 </div>

Replace title=”<?php the_title(); ?>” with title=”<?php echo get_post_meta($post->ID, “titletext”, true); ?>” and click the “Update file” button (or save the file if you are working offline).

Those of you working from your site’s admin section are now good to go, as they say in the movies. Those of you working offline should upload their edited files to your website now.

So you’ve got your site looking for a meta tag called “titletext” and when it finds it, it will display it as a mouseover caption for your users to enjoy. As of right now, you don’t have any titletext meta tags, of course. Let’s make some!

In your admin section, click on the “Posts” tab in the sidebar and select “Edit” (or “posts” again in newer versions of WordPress, because they love to change the name of things). This should bring up a list of all your posts to the website, including your comics. Select a comic post from this list and click the little “Edit” link underneath it. Any comic post will do but for simplicity’s sake, let’s choose your latest comic (because that way it’s on the main page, making it easier to remember which one you added the tags to).

When the Edit Post page appears for your comic, scroll down to the section called “Custom Fields”. There will be a section for adding new custom fields. Click on the “Enter new” link and the drop-down list above the link will turn into a text box. Enter “titletext” (without the quotation marks) into this box. In the larger box next to it, enter the message you want to appear as mouseover text. Click the “Add custom field” button when you are done.

You now have mouseover text on that comic.

The best part is, most versions of WordPress will remember that you have used “titletext” as a custom field and it will now appear in the drop-down list of meta tags for you to choose from, so you don’t have to try to remember what you called this particular field. Whenever you want to add a mouseover text message to your comic, just scroll down to Custom Fields, select “titletext” from the drop-down list of tags and enter the text in the box. Click on “Add custom field” and you’re done!

That’s all there is to it.

Why Buffers Matter

Those of you who visit the site regularly (or even those of you who look at the date stamp on the last article before this one) will have noticed that I haven’t posted for a week or so. The reason for this is twofold: I’ve not been well, and the site had no buffer.

We can’t do much about the former. When illness strikes, it generally strikes without warning. We can, nay must, do something about the latter. Without a buffer, your comic will very likely suffer when something comes up.

What is a buffer?
When content has to be produced on time and on a regular basis, there is always the chance that something will go wrong and you’ll be unable to keep up the pace. In order to avoid those situations, it’s important to keep a reserve of content that can be fed out to fill in the gaps. This is what we call a buffer, and it comes in a variety of forms.

Type One: The Pile
In many cases, the buffer is simply a pile of comics that the artist has built up because they produce them faster than they are updated on the website. When this sort of buffer is used, the comic you saw today would have been drawn a week or more ago and the one the artist actually created today won’t go live on the site for another week or two.

This sort of buffer acts on the fact that when the artist creates a comic, they schedule it on the site in a way that is akin to simply putting it on the top of a pile. The website then pulls the next comic off the bottom of the pile and feeds it to the readers as an when required. If the artist can’t create a comic on a certain day, for whatever reason, the pile gets smaller but the readers don’t miss out.

Type Two: The Interval
The other main type of buffer is that special reserve of short stories (which could measure in length anything from a one-page gag to a week or so’s worth of content) that the artist calls on when, for whatever reason, they can’t produce the next story.

These are rarely in keeping with the main plot of the comic, hence the name of the buffer. Sometimes they take the form of humorous asides in an otherwise serious comic; or maybe a chance to look ‘backstage’; or a question and answer session where the characters read out “readers’ letters” (these don’t have to be genuine, of course).

This type of buffer is less common than The Pile because it means the artist has to write a separate story and keep it to one side, just in case it’s needed. Do you want to put time and effort into a creation that might not be seen; or if it is seen, it may come at a time when your art style has evolved so much the work is no longer in keeping with the comic? It’s something to consider when taking this route.

Of course, where interval comics are created but not used for a while they can always turn up as extras in the comic’s next collected volume. That’s a distinct advantage that users of The Pile can miss out on.

Type Three: Dead Piro Days
I’m not normally one for MegaTokyo-bashing but sometimes it’s necessary to use them as an example because, in my experience, most people have at least heard of MegaTokyo even if they’ve not seen it for themselves. In this case, I’m using the site as a bad example.

Dead Piro Days are a variant on The Interval. At their most basic, they are the first frame of the next comic, posted on the update before that comic will go live as a way of saying “hey guys, I know I should have something for you today but I don’t – I’m still working on the comic though, as you can see from this picture!” My response to that is always to think “Hey, if you’ve got the comic done, just post it!”. I’m sure I’m not alone in this.

Alternatively, a character design sketch or other piece of throwaway art can be used in place of an update. It gives the readers something to look at and stop there being a gap in the archive calendar. It doesn’t give the reader any real content however, and it screws up anyone doing an archive binge but at least it’s something, right?

I’m guilty of trying this route when I’ve had no strip on update day and no buffer either. It’s the reason I’m so harsh on this approach to webcomicing. It’s not pretty, it doesn’t look professional and you should seriously reconsider using one of the other two forms if you’re going to have a buffer.

Are there any disadvantages?
Buffers take time to build up, and some of us don’t have that time to spend on what is essentially a hobby. They also have the disadvantage that if you’ve got a fanbase that actually talks to you, you’re going to have to keep stuff back from them all the time, because you know what’s going to happen far in advance of them (if you’re doing a story-based comic, you’ll probably know this feeling already).

Nevertheless, there is a massive advantage to buffers. If you look at the Project Wonderful stats for this site from last week, you’ll see there was a significant drop in readership during the time I couldn’t post anything. The same will happen to your comic if you miss a few updates, and a buffer will stop that happening. This alone should be a reason why they’re worth the time and effort to create.

The basics of good site design

Guest article by Kathy Catlin of Alien Shores