Working with the Canvas theme for WordPress – pros and cons

Note: as of October 2017, the Canvas theme is retired and is no longer available to buy.

I’ve used Canvas as the basis for a few WordPress projects now. It is the main theme produced by WooThemes, and it is powered by their WooFramework. Like the Genesis framework, I’ve found some things I really like about it and others I don’t, which I’ll share in this post.

Canvas theme loves

The Canvas PSD file

You have the option when purchasing the theme to pay extra and receive a layered PSD file with the theme, which is really handy for creating a site mockup. Just change or overlay the content you need. The Photoshop file shows various layouts for the theme templates (Business, Portfolio, Magazine and so on). This really saves time when starting a new site design.

Variable site and column widths

I love this feature! It’s possible to vary the width of all the pages on your site using a simple slider, from 600 to 1600px. Just go to Canvas (or the name of your child theme) > Settings > Layouts and choose the value you want. This width applies to all your content.

Furthermore, in Canvas > Layouts, you can also change the width of each individual column in a layout by dragging the column border left or right. This makes the theme very flexible indeed.

I used this 3 column option to create the layout for the Barclay Viewforth Church website. The Content area and Primary column take up 61% and 22% of the width respectively. The Secondary column takes up 17% of the space, but this column shows as blank space as it contains no widgets.

Lots of styling options

If you are a non-coder, Canvas is heavenly. There are many font and background colour options to choose from. You have the choice to use a wide range (though not all) of Google Fonts for your text and headers. There are also some options to change border colours and padding.

A hook for everything

Canvas has many, many action hooks built into it, where you can add in your own content into specific places in the theme. Go to Canvas > Hooks and you’ll see a list of tabs and text boxes where you can insert your own content. This is a really useful feature, though it can take a bit of trial and error to figure out which one to use. An added bonus is that you can use shortcodes on the hooks too.

For example, adding the following code after the closing #header div tag:

<p style="color: red; margin-bottom: 10px;">Your text goes here!</p>

Produces on the front end:

Obviously, you’ll want to style the text better than this!

Canvas theme loathes

The mobile menu

I’ll admit I’m not wild about the mobile menu on Canvas. The menu collapses down to a hamburger icon with the word Navigation at the top. When you click on the icon, the menu pops out at the left hand side, moving your content to the left.

Personally, I prefer a menu that pops out vertically, like that of the Twenty Twelve theme. If you’re not keen on Canvas menu style, the good news is that it can be swapped for another menu such as that generated by the  UberMenu premium plugin (currently $19). They provide comprehensive instructions on how to make the switch from the Canvas menu to their menu.

Shortcodes – limited selection, and not all that easy to use

There are a few nice ones – the tabs are quite cool, as is the toggle link. But the columns builder has a fairly unintuitive user interface. I prefer the Shortcodes Ultimate plugin, as it has more options than the WooThemes’ shortcodes and (imho) a better user interface.

No landing page template

Unlike Genesis, there is no landing page template built into Canvas i.e. a page template that’s really minimal (doesn’t feature the site logo, navigation, sidebar or footer). I found I had to build one myself, so this would be a “nice to have”. Take heed, WooThemes!

No support for older browsers

This may not be a biggie for many people, but WooThemes only support the latest browser versions. While I’ve found that the Respond.js plugin works like a charm with the Genesis framework to simulate media queries in older versions of Internet Explorer, it doesn’t work with Canvas. So any CSS for a browser like IE8 or lower has to be added in a separate stylesheet, which is fiddly to do.

You can insert a link to a stylesheet for IE8 or lower by modifying the Canvas header.php file in a child theme. Add this code to your file, just before the closing <head> tag. Change the URL to match your own domain.

<!-- [if lte IE 8]>
<link rel="stylesheet" type="text/css" href="http://www.yoursite.com/css/ie8.css" />
<![endif]-->

And create an ie8.css stylesheet, placed in a /css/ folder in the root folder of your theme with your IE8 styles.

Not entirely customizable footer

There’s the option of changing the footer text on the left and right, which is quite nice, but there’s one flaw – you can’t include any shortcodes or PHP code here. If you want the year to display as part of the copyright notice, you have to remember to manually update it yourself, or else hard code a PHP date function into your footer.php file. Here is a code snippet to do this:

<p>&copy; <?php echo date( 'Y' ); ?><?php _e( '  Your Site Name Here', 'woothemes' ); ?>.</p>

Change the ‘Your Site Name here’ to the output you want, and put this line in footer.php in a child theme, in between these 2 lines:

<div id="copyright" class="col-left">
<?php woo_footer_left(); ?>

This added line will output the following:

© 2014 Your Site Name Here.

Do you have any thoughts on Canvas? I’d really like to know what you like and dislike about it, so please let me know in the comments below.

Category: WordPress Tags: canvas, framework, WooThemes