Delightful comics homie Kody Okamoto asked me recently about the alternations I made to the archive of Ultraviolents– I realized afterwards that this would be pretty helpful to add to the blog as well! Also I will take any chance to shout out his webcomic Keeping Time– if you like bummer gay romance, go read it.
As a general introduction: Toocheke is a pretty common wordpress template for modern webcomickers, mostly for it’s solid mobile optimization. I have built and customized multiple webcomics with this template (my own and for paid clients), so I feel relatively familiar with it by now… Unfortunately.
No shade to the dev, of course- making free WP themes for an already under-funded artform is a thankless task. I’m really glad it exists! But as a general warning for those thinking of going into modifying this, the code has some very frustrating spelling mistakes, copy-paste mistakes, and other quirks that may piss you off if you’re used to more formal code bases.
Anyway! That’s enough from me, here’s the code I used to make edits plus some notes/explanations behind certain things. I don’t claim to be an expert and sometimes I leave shit as is because I know I’m (usually) the only one who has to look at it.
This goes in style.css:
/*--------------------------------------------------------------
# Comic Archive
--------------------------------------------------------------*/
#comic-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-gap: 5px;
align-items: stretch;
padding: 0px 0px 15px 0px;
}
#comic-grid img {
border: 1px solid black;
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
max-width: 100%;
}
#comic-grid img:hover {
opacity: 0.7;
}
.comic-thumbnail-wrapper {
text-align: center;
}
I think this is default, I forget! I’d need to double check against a fresh install. But #comic-grid is just the selector for the thumbnail group, .comic-thumbnail-wrapper is the individual thumbnails.
.archive-collapsible {
background-image:url(
"https://uv.itsnero.com/wp-content/uploads/2025/08/button1.png");
background-size: 100%;
background-repeat: no-repeat;
background-color:black!important;
border: none;
color: white;
cursor: pointer;
text-align: left;
width: 100%;
}This is CSS for the chapter buttons themselves! I made some bg patterns in photopea and uploaded them so if I ever want to replace them, it’s pretty easy (don’t forget to update the upload month though, oops). Background-size fits it to the entire button, background-repeat keeps the image from repeating if it’s undersized for some reason, and the background-color is black with an !important tag in case I ever change the website’s overall color. The images have transparent bgs.
//** backgrounds for archive buttons **//
.archive-collapsible:nth-child(2n-1) {
background-image:url(
"https://uv.itsnero.com/wp-content/uploads/2025/08/button2.png");
background-size: 100%;
background-repeat: no-repeat;
}
.archive-collapsible:nth-child(3n-1) {
background-image:url(
"https://uv.itsnero.com/wp-content/uploads/2025/08/button3.png");
background-size: 100%;
background-repeat: no-repeat;
}
.archive-collapsible:nth-child(3n+1) {
background-image:url(
"https://uv.itsnero.com/wp-content/uploads/2025/08/button4.png");
background-size: 100%;
background-repeat: no-repeat;
}
//** end backgrounds for buttons **//This is what controls the staggering of multiple images and auto-applies them. nth-child is what’s called a pseudo class and assigns a background-image depending on its ‘index’ aka the starting point of button #1.
You can change the formula in the parenthesis- I don’t really have any rhyme or reason for picking this way. Using (an + b) represents an integer step size, n is all non negative integers, starting from 0, and b is an integer offset value.
So I’ve specified a background for all .archive-collapsible buttons whose index is a multiple of 3s or of 2s. So chapter 2 has button2, 3 has button 3, 6 will have button 4, etc. I am not a math genius, I just like the way this looks. You can put in specific numbers like a normal person if you plan on having specific chapter related backgrounds!
.archive-button:hover, .archive-button:active {
background-color: white;
color: black;
}This just changes the color to red on hover.
.archive-grid {
display: none;
overflow: hidden;
}This is essential for the collapse to work- the .archive-grid is initially hidden, and when clicked it swaps with display: grid. overflow: hidden keeps the grid from spilling outside the borders when set to none.
@media only screen and (max-width: 575px) {
#comic-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
grid-gap: 2px;
align-items: stretch;
padding: 0px 0px 5px 0px;
}
#comic-grid img {
border: 1px solid black;
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
max-width: 100%;
}
}Media query stuff to keep it readable on mobile.
This is what is in content-comicarchivechaptersgallery.php in the template-parts folder for me (most relevant bit at the end):
<?php
/**
* Template part for text list archive of comics
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package Toocheke
*/
$comic_order = get_option('toocheke-comics-order') ? get_option('toocheke-comics-order') : 'DESC';
?>
<?php if (have_posts()): ?>
<header class="page-header">
</header><!-- .page-header -->
<hr/>Some of many typos in toocheke, lmao- it should be gallery list, not text list…
Usually there’s a page title style at the end here too but I removed it because I didn’t like it! Put that in your pipe and smoke it, buddy!
<?php
//for each chapter, show all posts
$chapter_args = array(
'taxonomy' => 'chapters',
'style' => 'none',
'orderby' => 'meta_value_num',
'order' => 'ASC',
'meta_query' => array(
array(
'key' => 'chapter-order',
'type' => 'NUMERIC',
)),
'show_count' => 0,
);
$chapters = get_categories($chapter_args);
The default for ‘order’ => is “$comic_order,”, which just goes by page posting date. You’re supposed to be able to change this in the ‘Ordering’ section in the Toocheke options (‘How would you like to order your comics?’), but when you do it reverses the entire page and I do not get it. The chapter order is left as ‘descending’ for me in that section, and then in here it’s addressing the post order specifically (‘asc’ for ascending).
foreach ($chapters as $chapter) {
$args = array(
'post_type' => 'comic',
'order' => 'ASC',
'nopaging' => true,
"tax_query" => array(
array(
'taxonomy' => "chapters", // use the $tax you define at the top of your script
'field' => 'term_id',
'terms' => $chapter->term_id, // use the current term in your foreach loop
),
),
'no_found_rows' => true,
'update_post_meta_cache' => false,
'update_post_term_cache' => false,
);
$chapters_posts = get_posts($args);
if ($chapters_posts) {
echo '<button type="button" class="archive-collapsible">' . wp_kses_data($chapter->name) . '</button> ';
echo '<div class="archive-grid">The ‘if ($chapters_posts) …’ bit replaces the default lines 54/55. Another way to read this is (in my mind, anyway, I don’t really know if this is ‘correct’):
IF a CHAPTER has POSTS, OUTPUT a BUTTON with CLASS ARCHIVE-COLLAPSIBLE, then apply CHAPTER NAME to button. End button.
IF there is an ARCHIVE, apply CLASS ARCHIVE-GRID to that div.
<div id="comic-grid">';
foreach ($chapters_posts as $comic) {
setup_postdata($comic);
echo '<span class="comic-thumbnail-wrapper">';
if (get_the_post_thumbnail($comic->ID) != '') {
echo '<a href="';
echo esc_url(get_permalink($comic->ID));
echo '">';
echo get_the_post_thumbnail($comic->ID, 'thumbnail');
echo '</a>';
} else {
echo '<a href="';
echo esc_url(get_permalink($comic->ID));
echo '" >';
echo '<img src="';
echo esc_attr(toocheke_catch_that_image_alt($comic));
echo '" alt="" />';
echo '</a>';
}
echo '<br/>';
echo '</span>';
} // foreach($chapters_posts
echo '</div></div>';
} // if ($chapters_posts
?>
<?php
} // foreach($chapters
?>
<?php
else:
get_template_part('template-parts/content', 'none');
endif;
?>
There’s a post date added by default in plain text under each comic thumbnail- I’ve removed that. The original code is also missing an additional <div> near the end, so I’ve added that back in. I think it ties up comic-grid? Unsure.
<script>
var coll = document.getElementsByClassName("archive-collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
</script>This is the script that makes the buttons work! If I couldn’t use a script I’d just use a <details> element, but that wasn’t playing nice with creating new chapters automatically unfortunately. The idea is that I don’t have to do anything, lol. ANYWAY you can read this script like this, line by line:
COLLECT/ADD TO COLLECTION all ELEMENTS with class name ARCHIVE-COLLAPSIBLE (the button).
CONTINUE COLLECTING.
CONTINUE adding same behavior to all elements in collection.
When COLLECTION elements are CLICKED on, THIS buttons FUNCTION is now to become ACTIVE.
What is the NEXT ELEMENT using THIS function? (aka the next .archive-grid) CONTINUE behavior and display in BLOCK if ACTIVE, display NONE if NOT ACTIVE.
Done!
That’s it!
One thing I’d really like to do is figure out a proper way to display double page spreads in… well, any webcomic site, really. The way people seem to do it currently is to post the full page and then have a link to a more hi-res one in the author comment section. But there’s gotta be a better way, right?? Right??????
Shuffling that off to ‘2026 projects’.
