WordPress/ComicPress: Part 4 Widgets

If you’re a fan of online graphic novels that use the WordPress/ComicPress combination you may have noticed that a lot of them use items in the sidebar that don’t come pre-installed. Anything from custom images and buttons to Twitter feeds to advertising is featured in sidebars. So how do they do it? Widgets.

To continue the customization of my site, I want to add in custom images for my sidebar to promote a variety of things – some of which I’m ready to roll out and some of which I’m not at this point. So after doing a little research, I’ve decided that I want to include:

1. A thumbnail for the latest page of artwork that I’ve posted.
2. A button to let the reader start at the beginning of the story.
3. Four buttons for the ways that I plan on using to promote my graphic novel: Facebook, Twitter, DeviantArt, my RSS feed.
4. A button to sign up for my mailing list.
5. A search field so that the user can search my website for whatever content they want.
6. An archive list of the “topics” of my posts.

Here’s how I achieved this:

1. To add in the latest page thumbnail I used the handy widget that comes with ComicPress. To do this go to Appearance > Widgets and look for the one called Thumbnail and add it to the right sidebar. This will let you display the lastest – or first – comic in a category. I have created a category called “new pages” specifically for this so that when I start to post, I’ll tag it with this and it should populate this spot.

2. To add in a custom button I created a graphic that is 197 pixels wide so that it fits the width of the sidebar which is 200 pixels (I made it slightly smaller because I liked how this aligned with the edge of the menubar that sits above). You can make this graphic look like whatever you want it to – for me, I matched what I had already done to the menubar. This means the copy is 100% white on a 70% black background. To place it in the sidebar I added in the widget called Text that you can find in the widgets section. This widget lets you add custom text or HTML to the sidebar which is ideal for what I’m trying to do. To complete the button, I added in the code below.

To add a final note here, the Text widget can be used for virtually any kind of HTML that you want to add to your site. Do you want to include advertising? Items for sale? A PayPal donation button? Fan art? Any and all of this can be simply and easily coded into this widget.

3. To create the four buttons mentioned above I did a Google search for EPS logos for each one. This let me build the four buttons exactly how I wanted them to look in high enough resolution that they looked good. I also matched them to the “start at the beginning button that I created – so they are 100% white image on a 70% black background. Follow the steps above in #2 to add in the code to the sidebar. My code looked like this:

4. The mailing list button was created the exact same way as #2 and #3 above.

5. To include a search field, I used another handy widget that you can find in the Appearance > Widgets section. This one is called Search. I didn’t add in a title so that just the search field appears.

6. The final piece of my sidebar is the Archives. This is again created in the widgets section. I used the Categories widget and titled it “archives.” The idea is that this will show all of the categories that I’ve defined for my posts and (hopefully) make it easier for users to find old posts or see the various topics that I’ve posted about. If they want something more specific there’s always the search function above!

To finish off the sidebar, I put all the images that I’ve created in the images folder on my server so that they can populate on the page.

I also just want to note that I’ve tried to organize these items in order of importance – or what I think is important. My thinking is that most people coming the the site are going to be looking for the latest page (#1) or it’s their first time and they want to start at the beginning (#2). If they like what they see, there are various ways to stay up-to-date: social media and the RSS feed (#3) and a mailing list (#4). I also figured that eventually someone might want to look for something specific on the site so I included a search field for this (#5) and a list of the topics that I’ve covered in my posts (#6). This order may change over time as I add more content or advertising or whatever. And it’s totally subjective and is really what I think works best for my site. You can set it in any order that you want. The point is that the most important item is at the top and the least important at the bottom. This doesn’t mean that the least important is actually not useful, but realistically, the other stuff needs to be more prominent.

Now as you can see, as of this posting, these additions aren’t live yet. I plan on rolling them out as I start to publish pages starting on February 1, 2011. But, as I was putting together the overall design of the site, I needed to figure this stuff out and get it all designed and coded so that I can simply add them in when I’m ready to launch it. For now, here’s my sketch for what things should look like once everything’s activated.

Read Part 5: Plugins

About jason

Illustrator and graphic designer. When not working full time as a Senior Graphic Designer, I am usually working on the graphic novel On the Verge: the Arrow of Time. Artist on Andrew Jackson in Space and The Sisters.

Leave a Reply

Your email address will not be published. Required fields are marked *