How to Make a Child Theme for Canvas

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:
    Version: 1.0
    Description: Custom Theme based on Canvas
    Author: Your Name
    Author URI:
    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() {

Moving the Menu Above the Logo

// Unhook the menu from where it currently is

function remove_canvas_actions() {

// Move Menu Nav Above the Logo

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;
 			width: <?php echo HEADER_IMAGE_WIDTH;
			#headimg h1, #headimg #desc {
			display: none;

// 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 } ?>
	<?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:

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() {

// 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" />

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="<?php echo CHILDTHEME_URL; ?>/css/ie7.css" />

<!--[if IE 8]>
<link rel="stylesheet" type="text/css" media="all" href="<?php echo CHILDTHEME_URL; ?>/css/ie8.css" />



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. I run a little theme shop called DevPress. Find me on twitter @devinsays.

28 Responses

  1. 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:


      1. Yeah,
        That’s a good one, too. It’s helpful when moving the sites from my local machine to not have to worry about changing the site url in the functions.php.

  2. 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.

  3. 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.



  4. Aaron

    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?

  5. Tiffany Green

    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…

  6. dave

    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?


  7. Hi, thank you for a such a great info.

    I have website 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”);

  8. 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?

Leave a Reply