Alternate single.php Canvas Theme

singlephp

Different category, different colors?

Using an Alternate single.php in Canvas Theme for custom category pages

One of challenges I had designing this site (based on the Canvas Theme) was combining the use of great plugins like Go Portfolio and Content Views with WordPress’ built-in blog features. The plugins worked great, but they didn’t always work nicely with my ideal navigation. For example, on the Brett Dennen posters page (and all pages which are in the category Work), I wanted the main navigation to show work to be green (.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-480 a). By default, this doesn’t happen. Are there many ways to make this happen? Yes! But I wanted solution which I only needed to do once and never think about it again.

The solution was single.php. Or in my case, multiple versions of single.php. WARNING: This, and all WordPress customization should only be done with a child theme. I needed three options:

  • A style for all posts in the blog (like this one).
  • Another for all categories for the portfolio pages.
  • And finally, everything else I want to remain untouched.

Here’s the plan:

    1. Move a copy of single.php from the Canvas theme into your child theme.
    2. Make as many copies of single.php as you have different categories that you need, plus one. In my case, a total of 4.
    3. Name each something easy to remember, save one as single.php and one as single-default.php. In single.php, remove all code after the commented text at top, and replace with the following :
get_header();
?>
 
 <?php
$post = $wp_query->post;
if (in_category(##) || post_is_in_descendant_category(##) ) {
include(STYLESHEETPATH.'/single-category1.php');
} elseif (in_category(##) || post_is_in_descendant_category( ## ) ) {
include(STYLESHEETPATH.'/single-category2.php');
} else {
include(STYLESHEETPATH.'/single-default.php');
}
?>

4. Replace ## with the category number of the category you want to look different. What the code is saying: if we find a category matching the number OR is a subcategory of that number, then use the version of single.php called single-category1.php. The elseif then looks for another category number and if found, uses single-category2.php. And finally, if the category is neither of those, use single-default.php (the code normally found in single.php).

5. Add your custom CSS to your new single-category pages (I suggest adding this inline CSS after <div id=”content” class=”col-full”>). For example, if you wanted the background of your page to be purple only for posts using the single-category1.php:

<style>#wrapper { background-color: purple !important;}</style>

And now you have a way to make certain categories of posts look different. There are no limits!

Post any suggestions or questions below.

Share:

No comments yet.

Leave a Reply

Contact Us
Facebook
Google+
Twitter
INSTAGRAM
ello
SHARE
LinkedIn
RSS
© 2017 slub design