• Skip to content
  • Skip to footer
A Bright Clear Web

A Bright Clear Web

A Bright Clear Web - Simple, effective, accessible websites

  • Home
  • About
  • Websites
  • Writing
  • Learn
  • Blog
  • Contact
You are here: Home / WordPress / Working with the Canvas theme for WordPress – pros and cons

Working with the Canvas theme for WordPress – pros and cons

Posted: October 31, 2014 Updated: September 10, 2020 by Claire Brotherton
3 Comments

Easel holding blank canvas

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.

Canvas site width slider
This slider helps you adjust the width of your WordPress pages

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.

Canvas column layouts
You can choose your default layout and drag the columns to the width you prefer.

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>
Code executed after the closing #header tag: Your text goes here!
Code executed after the closing #header tag

Produces on the front end:

"Your text goes here!" has been added under the header in red.

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.

Canvas  mobile menu closed & open
The Canvas mobile menu, closed (left) & open (right)

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.

Example of UberMenu
Example of UberMenu mobile 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.

Related

Category: WordPress Tags: canvas, framework, WooThemes

About Claire Brotherton

Freelance web designer and front end developer based in Edinburgh, Scotland. I love WordPress, code, learning and blogging.

Reader Interactions

Comments

  1. Derek says

    May 16, 2016 at 5:54 pm

    Thanks for the tip about Respond.js. I used your IE suggestion with Dave Kiss’s tip about html5shiv.js (http://davekiss.com/ie8-respond-js-and-wordpress/). The latter sorted IE issues with ::before and ::after pseudo elements in the site’s directory.

    Canvas is quite comprehensive – can be hard to remember where all the options are! I agree about the footer. I’d like a header option to have logo and title at once. Also, a magazine/section template that pulled in pages and not just posts.

    Nice to see other Scottish bloggers. I’ll need to look at some of your other tips (maybe not the blogging challenge!)

    Reply
  2. Peter Hall says

    September 2, 2016 at 9:05 pm

    Thank you for a very comrehensive write-up of Canvas. I have been using it for virtually its whole life and love working with it.
    Now that I have found Siteorigin Pagebuilder to do the heavy ifting I am a happy bunny.

    Reply
    • Claire Brotherton says

      September 5, 2016 at 11:52 am

      Cheers – I love the flexibility of Canvas too!

      Reply

Leave a Reply Cancel reply

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

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email. Read my privacy policy.

potted cactus and laptop with code

Footer

Categories

  • Accessibility
  • Blogging & Content Marketing
  • Business
  • Personal
  • Software & Tech
  • Websites
  • WordPress

Top Posts

  • How To Create WordPress Excerpts And Include Links In Them
  • How To Solve WordPress Image Alignment And Text-Wrap Problems
  • Improve Your Divi Website's Reach With Divi Accessibility
  • How To Set Up And Customize Twenty Nineteen Theme
  • Registering a Domain Name with GoDaddy - Step by Step

Let’s Be Social

  • E-mail
  • Facebook
  • LinkedIn
  • Twitter
Copyright © 2014 -2025 A Bright Clear Web
  • Privacy and cookies policy
  • Site map