Alchemy Computer Solutions

I collaborate with several graphic designers – most frequently Danny McEnerney of workin’ man creative and George Guy of Warp Graphics – to turn their graphic designs into WordPress websites.  They send me Photoshop files of their designs, and I turn them into functional websites that match their graphics pixel for pixel.  I really love this aspect of my work.

It gives me something fresh and new to work on.  When I code my own designs, I find my own work predictable, since, of course, it comes from my own head.  When I can code someone else’s design, I have something new and interesting to work with, and other designers end up doing things that I never would have thought to do.

It might seem that once the graphic design is done, the creative part of the process is over and writing the code is just busywork.  On the contrary, I actually find that writing code requires a great deal of creativity, especially when it is someone else’s design.  I have to figure out how to write a bunch of text that the computer will translate into the images I see.  Not only that, but I always try to write websites so that they will be easy for the site’s owner to update themselves, so sometimes that requires a little bit of extra creative thinking.  It’s a fun problem-solving exercise, and it often requires thinking outside of the proverbial box or approaching the problem from several directions at once.

Coding for graphic designers has also made me a much better designer myself.  I have to examine the work of several different designers in minutia, and looking at how they put their designs together has taught me a lot about what I need to do when I create websites.

It might seem like writing WordPress themes over and over based on someone else’s designs would get boring, but I really enjoy it. I find it to be creative and stimulating work.

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.