Different layouts on different pages in ComicPress
I’m currently writing a theme for a website using ComicPress, a WordPress plugin/theme designed for publishing comics. ComicPress is powerful, complex, and impressive. It makes life a lot easier for writers and readers of webcomics. I’ve been poking through the code a lot, and I have been impressed with what I see.
However, I did run into a weakness of ComicPress pretty quickly. The comic artist for whom I am writing this theme wants different pages to have different layouts. This is a pretty standard feature of WordPress sites: sometimes you want one page to have sidebars and another none, or some pages with sidebars on the left and some with sidebars on the right. In ComicPress, on the other hand, you can’t do this. ComicPress comes with several choices of layout, but once you make your choice in the ComicPress admin area, you’re stuck with that layout on every page.
Fortunately, I found that it is actually pretty easy to make different layouts for different pages with ComicPress, if you don’t mind tinkering with the code. I’ll show you how I did it.
First of all, make sure that you are working with a ComicPress child theme, and do not edit the ComicPress files themselves: if you do, all your changes will be lost when you upgrade ComicPress.
The files that control the layout of the site are called layout-head.php and layout-foot.php. Copy those two files into your child theme directory: now you can update them and they will override the original files.
Here is the original layout-head.php that comes with ComicPress:
<?php if (comicpress_themeinfo('enable_caps')) { ?><div id="content-wrapper-head"></div><?php } ?>
<div id="content-wrapper">
<?php if (is_cp_theme_layout('2cr,2cl,3c,3c2l,3c2r')) do_action('comic-area'); ?>
<?php if (comicpress_themeinfo('enable_caps')) { ?><div id="subcontent-wrapper-head"></div><?php } ?>
<div id="subcontent-wrapper">
<?php if (is_cp_theme_layout('2cl,2cvl,3c,3c2l,v3c,v3cl,lgn') && !comicpress_disable_sidebars()) get_sidebar('left'); ?>
<?php if (is_cp_theme_layout('3c2l,v3cl') && !comicpress_disable_sidebars()) get_sidebar('right'); ?>
<?php if (is_cp_theme_layout('2cvr,2cvl,v3c,v3cr,v3cl,lgn,rgn')) { ?>
<div id="section-wrap">
<?php do_action('comic-area');?>
<?php } ?>
<?php if (is_cp_theme_layout('rgn') && !comicpress_disable_sidebars()) get_sidebar('left'); ?>
<div id="content" class="narrowcolumn">
<?php if (is_active_sidebar('over-blog')) get_sidebar('overblog'); ?>
The section of code that interests us is after <div id="subcontent-wrapper">. You can see that there are short names for each layout option, and the code is full of conditional clauses for each layout. So the code says that all layouts show the left sidebar, unless the sidebars have been disabled. The three-column layouts also show the right sidebar. All layouts show the comic area.
I rewrote the conditional logic, as you can see here:
<?php if (comicpress_themeinfo('enable_caps')) { ?><div id="content-wrapper-head"></div><?php } ?>
<div id="content-wrapper">
<?php if (is_cp_theme_layout('2cr,2cl,3c,3c2l,3c2r')) do_action('comic-area'); ?>
<?php if (comicpress_themeinfo('enable_caps')) { ?><div id="subcontent-wrapper-head"></div><?php } ?>
<div id="subcontent-wrapper">
<?php
if (is_page()) { ?>
<div id="content" class="narrowcolumn"> <?php ;
}
elseif (is_home()) { ?>
<div id="content" class="narrowcolumn"> <?php ;
}
elseif (is_single()) { ?>
<div id="content" class="narrowcolumn"> <?php ;
}
else { ?>
<div id="content" class="widecolumn"> <?php ;
}
?>
<?php if (is_cp_theme_layout('2cvr,2cvl,v3c,v3cr,v3cl,lgn,rgn')) { ?>
<?php do_action('comic-area');?>
<?php } ?>
<?php if (is_active_sidebar('over-blog')) get_sidebar('overblog'); ?>
Instead of my conditions being based on what layout was chosen in the ComicPress admin options, I wrote conditions based on what kind of page is being rendered, using WordPress’s conditional tags. For pages where I don’t want sidebars, I made a div with class “widecolumn”; for pages where I do want sidebars, the div’s class is “narrowcolumn.” I moved all references to the sidebars to the footer.
I made very similar changes to layout-foot.php. Here is ComicPress’s code:
</div>
<?php if (is_cp_theme_layout('2cvr,2cvl,v3c,v3cr,v3cl,lgn,rgn')) { ?>
<?php if (is_cp_theme_layout('lgn') && !comicpress_disable_sidebars()) get_sidebar('right'); ?>
<div class="clear"></div>
</div>
<?php } ?>
<?php if (is_cp_theme_layout('3c2r,v3cr') && !comicpress_disable_sidebars()) get_sidebar('left'); ?>
<?php if (is_cp_theme_layout('2cr,2cvr,3c,3c2r,v3c,v3cr,rgn') && !comicpress_disable_sidebars()) get_sidebar('right'); ?>
<?php if (comicpress_themeinfo('enable_caps')) { ?><div id="subcontent-wrapper-foot"></div><?php } ?>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<?php if (comicpress_themeinfo('enable_caps')) { ?><div id="content-wrapper-foot"></div><?php } ?>
And here is my version:
</div>
<?php if (is_page()) get_sidebar('right'); ?>
<?php if (is_home()) get_sidebar('right'); ?>
<?php if (is_single()) get_sidebar('right'); ?>
<?php if (comicpress_themeinfo('enable_caps')) { ?><div id="subcontent-wrapper-foot"></div><?php } ?>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<?php if (comicpress_themeinfo('enable_caps')) { ?><div id="content-wrapper-foot"></div><?php } ?>
Just like in the header layout, I use conditional tags to render the sidebars only on pages where I want sidebars.
This is a simple hack, and enables you to have different layouts on different pages. Conditional tags can work for just about any conditions you can think of, so this is a great way to make your ComicPress theme more flexible.
I use a piece of your code to change the background of the header, not the logo of the header but according with the page change the dive and consequently change the call in the css.
——————————————————–
————————
Thank you, you save my day!