Adding mouseover text to your comics

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.

An example of how the mouseover caption works

With a quick change of code, you have the option of adding a little something extra.

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(); ?>" />

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(); ?>" />

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.

Tags: , , , , ,

No comments yet.

Leave a Reply