How to Make a Child Theme for Canvas

Posted

I’ve been working a lot with Canvas, a new framework by Woo Themes that gives users a plethora of design options. This video by Magnus shows a little how it works.

When setting up a new site with Canvas, I’ll make new default style settings using a child theme. This is the safe way to set up the theme, because if the design is done purely through the admin panel there’s the chance we’ll lose it if it’s ever reset. It also gives us the full css toolkit rather than just the options that Woo has provided.

Additionally, by using a child theme, we can make changes to the markup (adding extra divs or wrapper for styling)- and not be worried about losing those customizations when a new updates of Canvas roll out.

Instructions for Setting up the Child Theme

  1. Install Canvas in your WordPress theme directory.
  2. Create a new folder in the themes directory for your child theme.
  3. Add a “style.css” file, and paste in the following information:
    /*
    Theme Name: Canvas Child Theme
    Theme URI: http://www.yoursite.com/
    Version: 1.0
    Description: Custom Theme based on Canvas
    Author: Your Name
    Author URI: http://www.yoursite.com
    Template: canvas
    */
    /* Default styles */
    @import "../canvas/css/reset.css";
    @import "../canvas/style.css";
    /*-------------------------------------------------------------------------------------------*/
    
  4. You would change the theme name, author, description etc. to customize it, but the important part is “Template: canvas” which tells the child theme where to get it’s template files from.
  5. You can now add your own custom styles in the css file to override any of the default css settings of Canvas.

Remove Inline Styling Entirely

If you like all the Canvas options that allow users to change the layout, logo, footer text, etc. but don’t necessarily want them altering the design, you can disable that ability from the Canvas admin panel. If you want to make absolutely sure it’s off, you can also disable from the functions.php file in your child theme:

// Removes the Woo Themes Inline Styling
	function remove_canvas_actions() {
 		remove_action('wp_head','woo_custom_styling');
	}
	add_action('init','remove_canvas_actions');

Moving the Menu Above the Logo

// Unhook the menu from where it currently is
function remove_canvas_actions() {
		remove_action('woo_header_after','woo_nav');
	}
add_action('init','remove_canvas_actions');
// Move Menu Nav Above the Logo
add_action('woo_header_inside','woo_nav');

Adding a Header Image

One design feature I really like about the new default 2010 theme is the ability to set your own custom headers for individual pages and posts. If you would like to have these on Canvas, it’ll just take a few more additions to the functions.php file:

// Code to Create Custom Headers
	$defaultheader = get_bloginfo('stylesheet_directory') . '/images/default-photo.jpg';
	define( 'HEADER_TEXTCOLOR', '');
	define( 'HEADER_IMAGE', $defaultheader);
	define( 'HEADER_IMAGE_WIDTH', apply_filters( 'canvas_header_image_width',  960 ) );
	define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'canvas_header_image_height',	107 ) );
	define( 'NO_HEADER_TEXT', true );
	add_custom_image_header( '', 'canvas_admin_header_style' );
	// This theme needs post thumbnails
	add_theme_support( 'post-thumbnails' );
	// We'll be using them for custom header images on posts and pages
	// so we want them to be 960 pixels wide by 107 pixels tall (larger images will be auto-cropped to fit)
	set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );
	function canvas_admin_header_style() { ?>
		<style type="text/css">
			#headimg {
 			height: <?php echo HEADER_IMAGE_HEIGHT;
			?>px;
 			width: <?php echo HEADER_IMAGE_WIDTH;
			?>px;
			}
			#headimg h1, #headimg #desc {
			display: none;
			}
		</style>
		<?php
		}
// Adds Header Image to Theme
	function childtheme_header_after() { ?>
    <div id="header-image">
 	<?php if ( is_singular() && has_post_thumbnail( $post->ID ) ) {
		echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
	} else { ?>
  		<img src="<?php header_image(); ?>" alt="Header Image" />
  	<?php } ?>
	</div>
	<?php }
 	add_action( 'woo_header_after', 'childtheme_header_after' );

This is just set up to for the 960 layout, but you could code it a little further to get the Canvas option for layout and set this width automatically. See the child theme I built here: http://canvas2010.wptheming.com/.

Unhook IE Conditional Stylesheets

If you’re doing heavy customization of Canvas, you may also want to unhook the default IE conditional stylesheets and load your own new ones from the child theme. Here’s how you would do that:

// Reduces Database Calls
define('CHILDTHEME_URL', get_bloginfo('stylesheet_directory'));
// Removes Canvas Browser Specific Stylesheets
function remove_canvas_actions() {
		remove_action('wp_head','woo_IE_head');
	}
add_action('init','remove_canvas_actions');
// Adds the IE Stylesheets again, but now looks in the Child Theme Directory
function woochild_IE_head() {
?>
<!--[if IE 6]>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/includes/js/pngfix.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/includes/js/menu.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="<?php echo CHILDTHEME_URL; ?>/css/ie6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="<?php echo CHILDTHEME_URL; ?>/css/ie7.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" media="all" href="<?php echo CHILDTHEME_URL; ?>/css/ie8.css" />
<![endif]-->
<?php
}
add_action('wp_head','woochild_IE_head');

Add a New Widget Area

Add this code to your functions file:

function childtheme_widgets_init() {
	register_sidebar(array('name' => 'New Widget Area','id' => 'newwidgetarea','description' => "New Widget Area Sidebar", 'before_widget' => '<div id="%1$s" class="widget %2$s">','after_widget' => '</div>','before_title' => '<h3>','after_title' => '</h3>'));
}
add_action( 'init', 'childtheme_widgets_init' );

And replace the regular sidebar call in your template with this line:

<?php if ( is_active_sidebar('newwidgetarea') ) dynamic_sidebar('newwidgetarea'); ?>

For instance, if you were replacing the sidebar on the home page, your code in index.php would look like this:

</div><!-- /#main -->
            <?php woo_main_after(); ?>
            <?php if ( is_active_sidebar('newwidgetarea') ) dynamic_sidebar('newwidgetarea'); ?>
		</div><!-- /#main-sidebar-container -->
		<?php get_sidebar('alt'); ?>
    </div><!-- /#content -->
	<?php woo_content_after(); ?>

About Devin

I'm a WordPress developer based in Austin, Texas. Follow my projects on GitHub, or more general WordPress ramblings as @devinsays on twitter.

28 thoughts on “How to Make a Child Theme for Canvas

  1. Gretchen wrote:

    I use Canvas and am trying to remove the posted in category on all posts of one specific category, both on the individual post page as well as the archives page showing post summaries. With Canvas, the option at the bottom of this page does not work: http://www.spanishseo.org/block-and-remove-wordpress-categories

    Any ideas what hook that would require? Thank you!

    • Devin wrote:

      I think it’s in woo_postnav(). You’d have to rebuild the function with conditionals to display only when on certain categories.

  2. ian wrote:

    can this be done for the wp striking theme?

    • Devin wrote:

      Likely, Canvas is really flexible.

  3. Okay,
    I’m having a hard time posting code in this thread…

    Third time’s the charm.

    When changing the Url in order to unhook the Conditional Style sheets, I found it better to use:

    echo bloginfo (‘stylesheet_directory’);

    instead of:

    echo CHILDTHEME_URL;

  4. John wrote:

    Hi Devin. Thanks for this Canvas post. I too want to setup a child theme and make theme changes the correct way. However, I had setup options and styles in the Canvas Theme Options panel before attempting to add a child theme. When I setup a Child Canvas theme, all of those styles are gone, i.e. Boxed Layout, etc. I have the @import of the canvas styles.css file set in my child folder’s style.css file. None of my styles in my child theme styles.css folder are overriding the ones that are currently in the theme.

    Any advise on getting those settings as they are set in the Theme Options panel into my child theme and styles files? Is it an “either / or” situation in that you can either use the Canvas Theme options panel OR you have to create all your CSS options yourself in your child-theme? Thanks much.

    • Devin wrote:

      The options panel styling is generally loaded inline. You should check to see that it is still being outputted in the head. You options panel styling should still work in the child theme.

    • Devin wrote:

      Styles set in the options panel will override all css stylesheets. Your child theme css should properly override items in the Canvas stylesheet. If not, make sure your rules are specific enough (or check with Firebug to see what is overriding).

      When I used Canvas, I would simply deactivate all the Canvas options styles since I prefer to work directly in the css.

  5. Jon wrote:

    Hi there, thanks for all the help this child theme tutorial has given me. Wondering if you can help a little more? I am using a child of canvas for my mobile visitors and have managed to change the layout a bit to suit my needs but I really need to increase the font size on my navigation bar, the only way I can do this is via the canvas options screen but that also changes the font size on the parent which I don’t want as this ruins the look of my desktop site, just can’t work out how to change the CSS to override the options screen. Hope you can help.

    Cheers

    Jon

    • Devin wrote:

      Woo prints out their options styles as inline css, which you can’t really override without more inline css. I think your best bet is to to not have the options panel output that style and change the font purely through css.

  6. Aaron wrote:

    Awesome tutorial! Gotta question though. If I add the extra widget area to the header.php file I get a ‘Sorry, no posts matched your criteria.’ message on the individual category pages. Any ideas?

  7. Pingback: How to create a child theme for Canvas (a practical case study) – part one | Adrian Sandu

  8. Tiffany Green wrote:

    If you’re using the WooSlider plugin, part of the syntax used here could make the slider not show up in IE8. (Not sure if this is with all themes or just canvas) Specifically:

    @import “../canvas/style.css”;

    should be

    @import url(..canvas/style.css);

    If I can spare even one person the pain of figuring that out…

    • Devin wrote:

      You mean @import url(‘../canvas/style.css’) ?

      • Tiffany Green wrote:

        Actually, I did it without the single quotes, based on what I found in other tutorials, and it worked fine.

  9. dave wrote:

    You mention the functions.php in the text but it isn’t one of the steps at the start. Do you make a new functions.php and put it in your child theme folder? Should it contain all the information that the current functions.php has in it? Or will the child theme run all the information in the canvas theme functions.php anyway and anything added in a child theme functions.php will be run afterwards?

    Thanks

    • Devin wrote:

      You start with a blank functions.php in your child theme. Both functions.php get run (parent and child), so no need to duplicate what is in the parent.

      • dave wrote:

        thanks for the help. I’ll give that a go. Just starting my child theme now so fingers crossed.

  10. Nilesh wrote:

    Hi, thank you for a such a great info.

    I have website http://tattoobegonesf.com/ using a canvas theme.

    A website dos’t look good in IE 10. all the menu are messed up.

    Please help me i used here child theme..

    Code is:

    /*
    Theme Name: TattooBeGone – Canvas Child
    Version: 1.0
    Description: Child theme for Canvas.
    Author: Carla Riggi
    Template: canvas
    */

    @import url(“../canvas/style.css”);

  11. Craig Grella wrote:

    Devin,

    With a canvas child theme you can change most of the child branding, but I’m noticing that the title “Canvas” stays as the menu name.

    Do you know of a way to change that to a custom title?

    • Devin wrote:

      That gets set when the menu is registered I believe. So you could unhook that menu, and then rehook it in your child theme with a different name.

  12. Alex wrote:

    Where is my comment about translation child theme?

  13. Julian Kingman wrote:

    Hi Devin,
    Thanks for the rundown!
    how do I add a widget area inside the header area?

  14. Andre wrote:

    Layout.css seems to be overriding my child theme’s style.css… How do I fix this so I don’t have to insert !important tags everywhere?

  15. 555 wrote:

    I’ve got the same issue as Andre… any ideas?

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>