Theme Customization
Overview
By default, Manga+Press uses its own templates for the Latest Comic Page, Comic Archive Page, and Comic Post. The Manga+Press default templates can be found under mangapress\templates
. Inside this directory is a sub-directory called content
. This is specifically for the Latest Comic page and Comic Archive page, which works by filtering the page’s content and replacing it with the generated content from these two templates.
Tutorial: Customizing a Third-Party Theme
This example uses Customizr, one of the popular free themes available on WordPress.org. The example child-theme used can be downloaded [here].
- We start by creating a child-theme — in this case, we’re using Customizr. We’ll call the new theme’s directory
mp-customizr
- Create a
style.css
file inside themp-customizr
directory. - At the top of the
style.css
file, add the following theme header:
/*
Theme Name: Manga+Press-supported Child-theme for Customizr
Theme URI: http://www.manga-press.com
Description: A child-theme for Customizr that includes Manga+Press support
Version: 1.0
Author: Jess Green
Author URI: http://www.jes.gs/
Template: customizr
Tags: comics, comic theme, manga press, webcomics, online comics, customizr
*/
Navigate to Appearance > Themes
in the WordPress Admin. You should see the new child-theme listed with the available themes. Go ahead and activate the theme.
- Inside your child-theme, create a
single-comic.php
file. Openindex.php
inside thecustomizr
directory, and then copy the contents ofcustomizr\index.php
tosingle-comic.php
. -
Add the following lines of code to
single-comic.php
below line 38 (line 38 should be:<?php do_action('__loop') ?>
)<?php mangapress_comic_navigation();?> <?php the_post_thumbnail(); ?>
Save the file, then view one of the comic pages on the frontend of your website. Your comic posts should be integrated with the Customizr theme. A complete Customizr child-theme is available for download on the Manga+Press website: [download].
Some Common Pitfalls
Broken Theme Layout
If you’re experiencing unexpected output or skewed layouts (Manga+Press-related content output doesn’t fit the theme), extending your chosen theme with a child-theme using Manga+Press’ templates is recommended.
For the Comic Post view, try copying the single.php
template from the your child-theme’s parent and renaming it single-comic.php
, then adding mangapress_comic_navigation()
inside the main loop of the template, ideally below the_title()
call.
Navigation doesn’t appear correctly or at all
Confirm that the navigation element is being generated by viewing the page’s source-code in the browser (usually right-click and select “View Source”). If the navigation element is present in the source (look for something like <nav class="comic-navigation"></nav>
), check and make sure that there are no rogue styles in the parent theme that is hiding the nav element.
Check and make sure that the mangapress_comic_navigation()
call is inside the template’s main loop.
Finally, if the navigation is showing up but is displaying incorrectly, then you may need to add the navigation styles to your theme:
/* comic navigation */
.comic-nav-hlist-wrapper {
text-align: left;
margin: 5px 0 10px 0;
padding: 0;
clear: both;
float: none;
}
.comic-nav-hlist {
list-style: none;
}
.comic-nav-hlist > li {
float: left;
margin-right: 10px;
}