Support » Themes and Templates » New Theme: picoTokyo. Designed for webcomics. (ver .902)

  • picoTokyo is a single columned, centered theme designed to display a webcomic with standard entries beneath. It has navigation buttons beneath webcomic category entries! It is otherwise pretty minimal, without custom comments, archives, etc.

    Note: the default colors are pretty ugly. This is to encourage you to change them.

    Can be seen at:
    Download at

    Technical details:
    I used posts_nav_link to make the button functionality, and I used this writeup on theLoop from the codex to pick different ways to display/hide the buttons depending on whether the post is a webcomic or a rant.

    There is a lot of detail in the comments of both index.php and style.css about how to customize this theme. Note that I display only 3 posts per page, and update in clumps of three, to make it “look normal”. You can set the number to display to be any you want, but if you want the webcomic to display at the top, you have to post it last, and you have to post in clumps that are the same size as the max number of posts displayed on a page. I’m looking into a hack that pushes the most recent webcomic post to the top of the list, but don’t wait on me.*


    *Please tell me about it if you know of one, though.

Viewing 14 replies - 1 through 14 (of 14 total)
  • Adjust the width of the comment text area – it is too wide and causing horizontal scrollbars…

    Sure, no problem. That’s slated to be fixed in ver .903 anyway.

    picoTokyo .903a_public is ready for release.

    Can be seen at:
    Download at:

    New features:

    1. Added comment, archive, and sitemap page templates.
    2. More fine-grained control over link colors.
    3. Header and footer are now split from index.php
    4. More comments!
    5. Fixes:

    1. TextArea in comments is a reasonable size.
    2. Colors aren’t as aweful. (Please change them to your own color scheme though. We can’t all look alike, can we?)
    3. “First” navigation button now goes to the oldest page of the blog. (This also introduces a bug: It always points to my site and it is hard-coded into index.php, and other custom page templates, so you’ll need to change this as appropriate.)
    4. Bugs:

    1. Some important comments are only found in header.php
    2. The navigation button “first” points to my site. You’ll need to change this to fit your own site’s url.
    3. Comments don’t reflect some changes. (Like adding a comments template.)
      H1, h2, h3, are actually used.


    I like where this is heading, I’m currently using Xcomic for my comic and used wordpress for my blog unfortunately they are really 2 seperate sites. I’d be interested in helping out where I can here, what I’m looking for is something of a meld of the two, you can see what I’m trying to do here:

    I’d like to have the comic above the news and links as in the picture above with the navigation right under the comic. That theme is the default kubrick theme as well, just different graphics. 🙂

    Any help/suggestions requests I’d be happy to help out if I can, but I’m not great at coding, hence the hack of just having two seperate sites.. 🙂

    Oh, if you’d like to see what I did with xcomic and wordpress see here.

    Hi-larious! Excellent comic. I’ll take a closer look at this tonight, and see what I can do. Integrating picoTokyo and kubrick might not be that hard. I’m not familiar with xcomic, I’ll have to look that up.



    Someone told me, I should be able to do what I’m looking for with 2 loops in one page. One loop for the comic and one loop for the news below; it would look like a normal default wordpress site below the comic and navigation bars above.

    That make sense? I’m really unsure how to accomplish it so far. There’s a nice script with archive and everything called Walrus:

    I also tried adding that with a runphp plugin, haven’t been too successful. Any ideas or suggestions would be very greatful.

    I’m kinda swamped right now, so this answer is kinda crappy. (I haven’t looked a xcomic yet. I did look at the walrus source code. Looks pretty neat, but the example setup they had at their site didn’t fully load, which I take as a bad sign.)

    You should be able to do what you want to do with the regular one loop, and a handful of “if” statements actually. (Two loops might be more efficient.)

    Basically, the way picoTokyo works, is that WordPress sees that it’s supposed to pull a post from the database, and checks to see if it belongs to the “webcomic” category. If it does, it styles it differently, and adds some buttons.

    For what you want to do, you could just stick in the “if” statement I have below, set your blog to only show two posts at a time, and remember to put your comic in the second post (so it shows up at the top).

    Let me show you what I mean:
    In your index.php you’ll have these two lines:
    1. <?php if (have_posts()) : ?>
    2. <?php while (have_posts()) : the_post(); ?>

    1. WordPress, if you have a post today, do this:
    2. While you have the post, show the post on the page.

    After that bit, I add:
    1. <?php if ( in_category('14') ) { ?>
    2. <!-- use this html -->
    3. <?php } else { ?>
    4. <!-- use this html instead -->
    5. <?php } ?>

    1. Is the post in category #14?
    2. then do this!
    3. Otherwise,
    4. do this other thing.

    If you want to stick buttons in Kubrick, then try this:
    1. look for the line in index.php that begins with:
    <p class="postmetadata">

    2. Hit return, and paste this in. Change ’14’ to the category ID # your webcomics are in. Look at the categories menu under “Manage” and see what number is in the ID column next to your webcomic category.

    <?php if ( in_category('14') ) { ?>

    3. Then copy in the buttons you want to show there:
    <!-- Buttons go here! -->

    4. Add a linebreak so it doesn’t get mashed in with the rest of the post stuff.

    5. Then paste in the rest of the if statement:
    <?php } else { ?>
    <!-- you don't need anything on this line -->
    <?php } ?>

    6. Make sure the next thing that shows up is
    Posted in <?php the_category(', ') ?>

    It should look like this:

    <p class="postmetadata">
    <?php if ( in_category('14') ) { ?>
    <!-- Buttons go here! -->
    <?php } else { ?>
    <!-- you don't need anything on this line -->
    <?php } ?>
    <?php the_category(', ') ?>

    WAIT! The buttons!
    Here’s the code I use for the buttons, simplified a little. You can cut and paste that into the spot marked “buttons go here”.

    <!-- this lets me put a box and a background around this button -->
    <span class="button">

    <!-- Copy the link from your first page and stick it here. -->
    <!-- This is the "first" button -->
    <a href="">'&nbsp; &lsaquo; &lsaquo; first &nbsp;'</a>

    <!-- this stops the box for this button from bleeding over to the next button -->

    <!-- This is the "previous" button. -->
    <?php posts_nav_link('&nbsp;','&nbsp;',' <span class="button"> &lsaquo; previous &nbsp; </span>'); ?>

    <!-- This is the "next" button. -->
    <?php posts_nav_link('&nbsp;','<span class="button">&nbsp; next &rsaquo;</span> ','&nbsp;'); ?>

    <!-- This is the "today" button. -->
    <span class="button">''<a href="/blog">&nbsp; today &rsaquo; &rsaquo; &nbsp;</a></span></span>

    You’ll need to add these lines to your styles.css, too:
    color: black; /* this is the text color */
    background-color: yellow; /* this is the color of the button */
    border-style: solid;
    border-width: 1px;
    border-color: black;

    Whew! That was a lot of crap. Sorry to bury you. I don’t even know if I answered your question!

    EDIT: fixed backticks

    Hey folks.
    There’s some additonal bugs in this theme:
    There are hard links back to my site in the theme. The banner image at the top, and at least two of the links (FAQ and archive) still point back to my site. I’m pulling this theme from my download directory until I get a chance to fix that. Sorry.

    I really do appreciate all your work on this, sorry your so swamped. I have an index2.php setup to test this, and I get an error on line 21;
    Parse error: parse error, unexpected ‘}’ in /var/www/html/blog/index2.php on line 21

    My code in my index2.php
    <p class=”postmetadata”>
    <?php if ( in_category(’05’) ): { ?>
    <!– Buttons go here! –>
    <!– this lets me put a box and a background around this button –>
    <span class=”button”>
    <!– Copy the link from your first page and stick it here. –>
    <!– This is the “first” button –>
    ‘  ‹ ‹ first  ‘
    <!– this stops the box for this button from bleeding over to the next button –>
    <!– This is the “previous” button. –>
    <?php posts_nav_link(‘ ‘,’ ‘,’ <span class=”button”> ‹ previous   </span>’); ?>
    <!– This is the “next” button. –>
    <?php posts_nav_link(‘ ‘,'<span class=”button”>  next ›</span> ‘,’ ‘); ?>
    <!– This is the “today” button. –>
    <span class=”button”>”  today › ›  </span></span>
    <?php } else { ?>
    <!– you don’t need anything on this line –>
    <?php } ?>
    <?php the_category(‘, ‘) ?>

    Thanks again! I’ll try to keep pluggin at it

    I’m not sure what happened.

    What I do see is this:
    in the original:
    <?php if ( in_category(’14’) ) { ?>
    in your version:
    <?php if ( in_category(’05’) ): { ?>

    Notice that it picked up a colon between the last right parentheses and the bracket. Does taking that out fix it?

    sorry i added that, because my first error said it was expectint a : there.. Not sure why.

    Hmm…I want to download the theme but the download dir is empty…where is the file??

    – MENJ

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘New Theme: picoTokyo. Designed for webcomics. (ver .902)’ is closed to new replies.