Lateral Thinking with Withered Technology
So you are starting a web comic, and if you want to go self-hosted, you will need a content management system to publish those comics. There you have few options and WordPress is often the default solution. After testing a few comics plugins for WordPress, I felt the need for something simpler to use. Customization is nice, but I’d rather have less options if more specific ones. So I tried to write a custom made theme for WordPress, at first only for the sake of learning. The result so far is Strip, a theme designed for https://silent-comics.com, released on GNU General Public License.
My initial attempt, built with Bones, was an opportunity to learn Less CSS but didn’t go very far. The present theme is based on _s, and also borrows from Ryu. This is the learning by doing side of the project for me. Suggestions from actual developers, users and comics lovers are welcome @ hoa // at // silent-comics.com
Strip is a theme to showcase and manage online comics with WordPress. Easy to use (assuming you are familiar with WordPress), distraction free and responsive. Designed for large images, galleries and continuous stories. Optimized for full screen mode on desktop computers, mobile and tablets. Its main function is a comic post format with basic navigation for web comics. It can display comics in ascending or descending order (scroll) or one panel at a time, as a WP gallery (card). Following this logic, each story can read either panel by panel or page by page. The theme will handle different series or one-offs, sorted under the custom taxonomy “story”. A comics post without a category assigned will default to “draft”. Blog features are: one column with post-formats support. Non obtrusive commenting (toggle on & off). Four columns footer widget and no sidebars.
Minimal look, custom posts format for comics, no sidebar, wide images and fullscreen videos. Custom login page. Body text set in Fenix, with headings in Futura. Tested with 5.0-beta, with MAMP, on PHP7.2.
Optimizing for Mobile
Still testing. 🐱
Few words of warning This theme contains functions that are, as WordPress puts it, “plugin territory”. At the time of writing, the theme doesn’t comply with WordPress.org requirements of separation of presentation and content.
To be specific, two functions,
register_taxonomy() should go in a plugin to comply with WordPress guidelines.
These enable “comics”, and sorting through different series or “stories”.
In effect, this creates an involuntary lock-in effect.
This means you would lose access to your (comics) data if you used this theme and then switched to another theme.
The data would still exist but you wouldn’t be able to see it.
That is an unwanted consequence of sharing a theme designed for a specific project.
Until a simple comic plugin can solve this potential issue, it is best to avoid using this theme on your live site.
DON’T use it on your live site, unless the above doesn’t bother you I plan to write a specific plugin at some point to make the theme content independent. Still, for a single purpose (that is, if you want to publish comics on the web) the theme does the job. Please bear in mind that I’m not a developer. If you are a WordPress developer you are more than welcome to review and contribute to this theme. 👍
TL;DR: This theme is not optimized for production yet, but you can still test it, but avoid using it on your live site!
Download Strip theme
Upload Strip directory into your WordPress installation’s theme folder (wp-content/themes).
In the WordPress backend, find and activate the theme under Appearance —> Themes.
Create your menu and submenus. You can add a header image, a background image and change the background colour.
To use your own logo in svg format, you need to edit header.php. Replace the Base64 code found in assets/inline-logo.svg.php with your own logo. You can then call your logo in header.php replacing this line:
<?php get_template_part('assets/inline', 'logo.svg'); ?>. Or remove that line if you don’t bother about a svg logo. You can also add a custom image logo from the customizer → site identity → logo, just use the site text title or both.
To publish a comic you can post under “comic” or “add a new comic”. Add a story name to sort comics by titles for multiple stories. Each series will live in a loop of its own. The default for unclassified comic stories is “draft”. There is an archive page template for all comic stories taxonomies: archive-comic.php. Since the theme has archive ordered by term, you can have any comics story archive on its own page. You need to write your own
taxonomy-$taxonomy-$term.phpfor each story, after
taxonomy-story-draft.php. e.g. if you created a story called “name”, you must add a file taxonomy-story-new.php. A “new” title link will show in the left hand side above each individual “name” comic posts. This will take you to page displaying all “name” comics in ascendant order. You can change the order in the template. The url will be http://yoururl/story/name
Post each comic episode as a single image or several images to form one comic. The theme allows for high resolution pictures. For large images, the recommended width is 1920px. The theme uses native WordPress galleries for galleries posted in comics and regular posts. Clicking on one image will take the user to a single image page. So a comics can read panel by panel. You can go to the next single panel by click or keyboard navigation (left and right arrows). For galleries, you can use an image slider plugin instead of the single image page template. These plugins work well with the theme: RoyalSlider, Photoswipe Masonry Gallery or Portfolio Slideshow.
Keyboard navigation will take the user to the next or previous image in galleries.
Archive comics showing each episode’s first image in a grid.
You can use the customizer or dashboard to setup header image, custom logo, and footer widgets.
Once you create a comic story, or episode, you should assign it a “story” name. If you are familiar with WordPress, think about story as a taxonomy or category. This allows you to sort through and archive multiple stories. Archiving comics by story
$terms is easy. Once you have created your first comic posts, you can replace “name” in the template
taxonomy-story-name.php by your story you’ll have to change with your own title. For multiple stories, just clone this template with new details for each new story. You can also write a story description which will show on the specific story archive pages.
This is the archive for your regular blog posts, unless you play with functions.php to change this behaviour, the comics won’t be archived in this page.
Comics specific archive templates:
This is where all your comics are archived in ascending order, by title. Pagination is set by default to the default posts per page set in WordPress dashboard > Settings > Reading
Blog pages show at most number. You can change the
This is a template you can use to archive your comics in a four columns grids.
Archived by title in descending order by default. You can add a story term (your story name) to
You can change
'posts_per_page' number, use
-1 to retrieve all the comics. Change
'ASC' if you want the comics to appear in chronological order, starting from the first.
This template call all comics episodes but will only display their titles, in ascending order. It’s basically a single row of titles, grouped by stories.
The fallback for all uncategorized stories — no pagination.
You should have a name for each story.
Draft is a good place to store unpublished stories
This is a sample template. Replace “name” by your own story title and you are good to go.
It will archive all the comics stories falling under that “name”.
A word about pagination.
Pagination behaviour in WordPress is a fragile thing. As in, some changes can result in unpredictable behaviour. I have tried to comment the templates to avoid unexpected results i.e. breaking pagination or causing admin dashboard errors.
- Theme-check: WordPress recommands placing custom post types in plugins, not in themes. Again since the theme uses
register_post_type()it doesn’t pass theme-check.
WARNING: The theme options should not be pseudo custom post types and save non-trivial user data. Non-design related functionality is not allowed (WordPress.org’s Presentation VS Functionality) As written above, this means some of your data won’t be accessible when you switch theme. Please don’t use this theme on any production site to avoid this!
- Writing a plugin and releasing a simpler version of the theme should be the next step for this project.
- As far as comics editing and management capabilities go, the functions are basic. This is due to my limited coding ability, no question about it. But this is also in part intentional: the fewer features, the better.
- Architecture: There might be a better way to sort through all the different comics. A matter of ability, choice and preference also. But incremental improvement works wonder.
To do list:
Theme review needed
Do you know how to improve this theme? Have you found a bug?
Please send your findings to hoa // @ // silent-comics.com or open a pull request on GitHub. Thank you.