SILENT COMICS WordPress Theme — WIP

8 minute read

Lateral Thinking with Withered Technology

If you need a content management system to publish self-hosted comics, you have a few options. WordPress is often the default solution. After testing a few comics plugins for WordPress, I felt the need for something simpler to use. Customisation is nice, but I’d prefer a solution with less options, but 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 http://silent-comics.com. Still a work in progress, released on GNU General Public License.

My first attempt, built with Bones, was an opportunity to learn Less CSS. The present one, based on _s, also borrows from Ryu. Next version will be a re-write using sass. 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

Theme Focus

Strip is a theme to showcase and manage online comics with WordPress. Easy to use, distraction free and responsive. Designed for large images, galleries and continuous stories. Optimised 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 category 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.

Features:

Tags:

one-column, flexible-header, grid-layout, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, post-formats, rtl-language-support, sticky-post, theme-options, custom-logo, translation-ready, blog

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 4.8-alpha, with MAMP, on PHP7.

Single comic post screenshot

Custom login

Custom login

Custom login

Custom login

Dashboard with improved CPT for comics

Dashboard with improved CPT for comics
A comic page using WP native gallery, with two columns
Single comic post with drop-down menu
Single comic post with custom background colour

Optimising for Mobile

Still testing. 🐱

Testing for mobile

⚠︎ Ran a few cross-browser compatibility tests on Browserstack and Sauce Labs. There are some possible bugs in IE 7, IE8 (and IE6 ☠)

Installation

Few words of warning This theme contains some plugin functions that are (as WordPress puts it) “plugin territory”. At this writing, the theme doesn’t comply with WordPress.org requirements of separation of presentation and content. To be specific, two functions, register_post_type() and register_taxonomy() should go in a plugin. 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!

WIP Strip Theme — Download from GitHub
  1. Download Strip theme

  2. Upload Strip directory into your WordPress installation’s theme folder (wp-content/themes).

  3. In the WordPress backend, find and activate the theme under Appearance —> Themes.

Setup

  1. Create your menu and submenus. You can add a header image, a background image and change the background colour.

  2. 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.

  3. 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.php for 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

  4. 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.

Adding an image logo. From top: the sample Silent Comics SVG logo, the WP image logo, and the title, manageable from the customizer option
Comic post with three columns gallery

Keyboard navigation will take the user to the next or previous image in galleries.

Single panel / image template with previous and next navigation
RoyalSlider panel view — full screen image
RoyalSlider panel view — transition

Archive comics showing each episode’s first image in a grid.

Comics episodes visual archive

You can use the customizer or dashboard to setup header image, custom logo, and footer widgets.

Static home page with four column sample
The same layout revised with [Tachyons X-ray](http://tachyons.io/xray/) Chrome plugin overlay
Customiser: custom logo option

Managing comics

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.

Templates:

archive.php 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: archive-comic.php 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 'posts_per_page' number.

archive-story.php 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 'story' You can change 'posts_per_page' number, use -1 to retrieve all the comics. Change 'DESC' to 'ASC' if you want the comics to appear in chronological order, starting from the first.

Archive page

Archive page

archive-titles.php 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.

taxonomy-story-draft.php 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

taxonomy-story-name.php 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.

Known issues

  • Theme-check: WordPress recommands placing custom post types in plugins, not in themes. Again since the theme uses register_taxonomy() and 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:

See: Theme wiki on GitHub #to-do

Theme review needed

Do you know how to improve this theme? Have you found a bug?

Download Silent Comics WP Theme from GitHub

Please send your findings to hoa // @ // silent-comics.com or open a pull request on GitHub. Thank you.

Support this theme development and maintenance.

Flattr Strip git repo

Support SILENT COMICS through PayPal
Support SILENT COMICS through Plasso

Leave a Comment

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

Loading...