Search

Canvas

Homepage overview ↑ Back to Top

The Canvas homepage is completely customizable with layout controls in the theme option’s panel. The below screenshot gives you a rough overview of the general layout.

Canvas-Theme-Overview

Note: Canvas comes bundled with several page templates, any of which can be used as the homepage layout as well.

Styling & Layout ↑ Back to Top

Canvas is different to most of our other themes in that we leave the design mostly up to you. We use our experience in usability and layout construction to create a clean starting point for you to design your website on top of. The options allow you to set general styling and layout, as well as styling for each section of your website (posts, pages, widgets, header, typography and more).

Go to: Canvas > Settings > Layout to set the styling and layout of your site.

canvas-layout-settings-image-1

Set the layout per post or page

The column layout option can be overridden per-post or per-page, using the Canvas Custom Settings meta box when adding or editing an entry in your WordPress admin.

Pages that are overwritten by a post type archive, such as the WooCommerce ‘Shop’ page or the ‘Projects’ page in the Projects plugin, will not pick up the per page Layout Setting, and thus not display the Layout set globally on Canvas > Settings > Layout or Canvas > Settings > WooCommerce.

Canvas-Custom-Settings-Box

Typography ↑ Back to Top

You have complete control over typography, found in various sections under General Styling, Layout. The Misc Typography options only control basic typography; you can control the specific typography in the related section e.g., Posts / Pages.

The typography option allows you to:

  • Set the font size in px or em
  • Select the font from web-safe fonts and Google Fonts
  • Select the font style
  • Select the font color
  • Preview the current font selection

Header ↑ Back to Top

The header is the first section of your website seen by visitors. It’s important that the header showcases your brand and provides a clear menu for navigating your website.

To get started with customizing your header under Canvas > Settings:

1. Upload a Custom Logo under the General Settings > Quick Start screen.

canvas-custom-logo-image

2. Visit the Settings > Header & Footer section to optionally add a background image and header border.

canvas-header-footer

3. Visit the Styling & Layout > Navigation section to customize the look of your navigation menu (even dropdown menus have options!).

canvas-navigation

Boxed Layout ↑ Back to Top

The Boxed Layout option, in the Settings > Layout > Boxed Layout section, allows you to place a box around your website’s content and separate it from the background. This is best illustrated by the below image.

canvas-layout-compare

Go to: Canvas > Settings > Styling & Layout > Full Width Boxed Layout to set the following options:

  • Enable Boxed Layout Style
  • Select the color of your Box Background Color
  • Set the Margin inside your Box
  • Set the Box Border Size and Color and the size of the Box Rounded Corners
  • Enable the Box Shadow

canvas-boxed-layout

Full Width Layout ↑ Back to Top

Canvas 5.2 introduced a new full-width layout option, which allows you to set your header, navigation and footer area to span the entire width of the browser.

This option cannot be used in conjunction with the Boxed Layout.

Go to: Canvas > Settings > Styling & Layout > Full Width Layout to set the following options:

  • Enable the Full Width Header option to expand the header and navigation to full width
  • Set the color of your Header Background Color or upload a Header Background Image
  • Go to: Styling & Layout > Primary Navigation to change the navigation styling
  • Enable the Full Width Footer option to expand the widgetized footer and footer area to full width
  • Set the color of your Footer Widget Area and Footer Area

canvas-full-width-layout

Magazine Template ↑ Back to Top

Canvas includes a Magazine page template with a featured post slider and a grid based post layout.

To set up the Magazine page template:

  1. Add a new page with the Magazine page template
  2. Go to: Canvas > Settings > Magazine Template to set up your template.

Canvas-Magazine-Page-Template

 Set up the posts slider

The magazine template slider uses posts that have a featured image.

  1. Enable the slider in Magazine Template > Posts Slider
  2. Set which post tag(s) to use in Post Tag(s) field
  3. Add a new post or edit an existing post, and tag your post with these tag(s)
  4. Add a Featured Image to the post.

magazine-template

Set up the featured post(s)

The magazine template has an option to show a full-width post, both below the posts slider and above the post grid layout.

Go to: Magazine Template > Featured Posts:

  1. Select the Number of Featured Posts to show
  2. If you have added a Featured Image to the post, you can tweak the size and layout
  3. Select if you want to show the Full Content or The Excerpt

magazine-featured-posts

Setup the posts grid

The magazine template has a custom post grid layout.

Go to: Magazine Template > Posts Grid:

  1. Select if you want to show the Full Content or The Excerpt
  2. Change the Post Title Font Style
  3. If you have added a Featured Image to the post, you can control the size and layout

magazine-posts-grid

Business Template ↑ Back to Top

Canvas includes a Business page template that includes a featured slider page content below the slider.

To set up the Business page template:

    1. Add a new page.
    2. Go to: Page Attributes > Template option to select the Business page template. Screenshot on 12.3.2014 at 9.14.57 AMNow go to: Canvas > Settings > Business Template to setup your template.

canvas-business-settings

Content and sidebar setup

Content in the main column below the featured slider is the content on the page you set as your business page template, as shown below. Unlike normal pages, the Business page template does not output a page title. This is to make it more flexible, allowing you to add a title to the page content using h2, h3 or h4 tags or leave it out completely.

canvas-business-page

If you want a unique sidebar for the business page, use the WooSidebar plugin to add a custom sidebar. If you use a 3 column layout for your page, the second sidebar will be the normal Secondary sidebar.

Featured Slider Setup

To set up the Featured Business Slider, you need to:

  1. Add Slides.
  2. Add Slides to a Slide Group.
  3. Configure the Business Slider Theme Option Settings.

Add Slides to the Business Page Template

You have two options when adding slides: a) An image that fills the entire background area of the slide, or b) the slide page layout.

izzQ

To add a slide to the business page template:

  1. Go to: Slides > Add New.
  2. Add slide content in the main content area, including a title and description.
  3. Add the slide to a Slide Group or Add a New Slide Group.
  4. Add a Featured Image if you want the image to fill the entire background of the slide. The example below shows an image embed in the post of the slide aligned to the right.
  5. Scroll down to review additional options in Canvas Custom Settings to enter a URL linking the slide.
  6. Publish slide to save.

canvas-business-slide-edit

Business Slider Theme Option Settings

From Canvas 5.6.3, the fixed height option has been removed from the Business Slider to better optimize the theme for Responsive design. To set a fixed height for the slider, see this tutorial.

To complete the setup of your Business Slider:

  1. Go to: Canvas > Settings > Business Template > Featured Slider to Enable the featured slider.
  2. Choose if you want the slider to be normal or full width to span the width of your browser window.
  3. Select the Number of slides you want to display.
  4. Optionally select the Slide Group to show, if you are using WooSlider plugin.
  5. Optionally configure the remaining settings for Order, Title, Fonts, and Content Overlay position.
  6. Save All Changes once complete.

canvas-business-settings

Add a Button to a Slide

If you’d like to add a button to your slide, you can use the button shortcode. To add a button or any other shortcode, you’ll need to add it to the Excerpt field.

Add shortcode to the Excerpt field

Add shortcode to the Excerpt field

If the Excerpt field is not visible on your Slide page, you need to enable it in Screen Options (upper right corner).

To learn more about all WooThemes Shortcodes, see our tutorial: WooThemes Shortcodes

Set a page as Homepage ↑ Back to Top

To set a page template as your homepage, go to Settings > Reading and select your newly created page as a static front page:

Canvas-Reading-Setttings

Review our Menu documentation on how to customize your menu after adding a static page as the homepage.

Portfolio ↑ Back to Top

This theme includes a portfolio custom post type that can showcase your work or products on the dedicated portfolio page template of your site. View our video and follow the steps below to add a portfolio to your site.

Add a Portfolio Page

  1. Go to: Page > Add New
  2. Add a title to the page e.g., “Portfolio”
  3. Select the Portfolio page template in the Page Attributes panel on the right
  4. Publish your page.

canvas-portfolio-page

Add a Portfolio Post

The portfolio section uses a custom post type called Portfolio. This is how you add a new portfolio post:

  1. Go to: Portfolio > Add New
  2. Add a title
  3. Add text in the content area to describe your post
  4. If you want, select a Portfolio Gallery or create a new one
  5. Click Set Featured Image and upload your image(s) and set one as the featured image
  6. Click Publish.

portfolio-itmes

Add multiple images to portfolio item

You can add more than one image to your portfolio item by uploading multiple images in step #5 above, or using the Add Media button in the post editor and uploading multiple images. After uploading the images, Save Changes or close the upload window. The images you upload will automatically show on your portfolio post, so you don’t need to add them to the portfolio post content itself.

Do not insert the images directly into your post, as the images you upload will automatically be shown by the theme.
WordPress can’t “attach” previously uploaded images in your media library. They need to be uploaded to the post to be attached. Only “attached” images are shown in the portfolio.

Add a video to portfolio item

A portfolio item can include a video:

  1. Go to: Portfolio > Add New and add a Featured Image
  2. Add your embed code to the Video Embed Code field
  3. Add the video URL to the Lightbox URL field (YouTube or Vimeo only).

Add video to Portfolio item

Add a testimonial to portfolio item

To link a client website and testimonial in the Canvas Custom Settings:

  1. Add the testimonial to the Testimonial field
  2. Add the name in the Testimonial > Author field
  3. Add the address to the website in the URL field.

Add testimonial to Portfolio

Portfolio Galleries

Portfolio galleries is a way to categorize your portfolio section. Create galleries by going to: Portfolio > Galleries and adding portfolio galleries:

portfolio-galleries

Creating Galleries will enable sorting on the portfolio section of your site to help filter the portfolio items:

Canvas-Portfolio-Galleries-Filter

Features & Testimonials ↑ Back to Top

Canvas includes support for our free Testimonials by WooThemes plugin and Features by WooThemes plugin, which allows you to add features or testimonial blocks to any post or page. Canvas has styling and support for one to six columns for both plugins.

You can find additional documentation for each here:

See our demo for examples of features and testimonials.

These plugins are only fully supported in Canvas version 5.5.0+. Testimonials replaces the previously used Feedback post type.

Filters (Post Meta) ↑ Back to Top

Use the Filters to customise the “Above Post Content” and “Read More” sections of each post on your website.

Use shortcodes, HTML and text in these sections to display your desired content in each section. This could, for example, include a share button below each post.

canvas-filters

Shortcodes

As mentioned above, these shortcodes have been designed to work primarily with Filters. Each can, however, function independently of it. The main shortcodes to note are:

  • [post_date] – The post date.
  • [post_time] – The post time.
  • [post_author_link] – The post author (link to the author’s website).
  • [post_author_posts_link] – The post author (link to the author’s posts archive).
  • [post_comments] – Comments for the post.
  • [post_tags] – Tags for the post.
  • [post_categories] – Categories for the post.
  • [post_edit] – “Edit” link for the post.
  • [view_full_article] – Link to read the full post. The default text is “Continue Reading”, but you can change this with the ‘label’ parameter, e.g. [view_full_article label="Your Text Here"]

Each shortcode is also pluggable (overridden by child themes) and filterable using the following filter naming convention: woo_shortcodecode_shortcode (i.e., woo_post_date_shortcode).

All other shortcodes are also available for use here (i.e., placing a “button” shortcode in the “read more” section of your blog posts).

The “Footer Left” and “Footer Right” sections can also display shortcodes, using any available on your website.

Hooks ↑ Back to Top

Hooks are points in the code of the theme where custom code can be loaded. This is covered in more detail at: Using Hooks and Filters.

Use Hooks to add custom HTML and/or shortcodes at various hook points within Canvas.

canvas-hooks

This could be used to add code after each post in an archive (maybe an advert or some sharing shortcodes?) or add extra HTML above or below certain areas of your theme without modifying the theme’s code.

Any shortcode can be used in the Hook Manager. To execute shortcodes on a hook, simply check the “Execute Shortcodes on this Hook” checkbox below the desired hook.

View the Canvas hook/filter reference file here.

Layouts ↑ Back to Top

The Layouts screen provides a quick way to adjust the column widths in the various column layout possibilities built into Canvas.

canvas-layouts

To use the Layout Manager:

  • Select the Enable Layouts checkbox.
  • Choose the layout you’d like to adjust under the Select Layout section.
  • Use the draggable interface to adjust the column widths as desired. The width percentage is displayed in each column.

Appropriate gutter spacing between each column is added automatically when calculating values for each column.

Settings for each layout are preserved and saved whenever the various layouts are in use. For example, the default layout of your website can be “Three Columns with Content in the Centre,” which you adjust. If you then adjust the layout for “Two Column with Content on the Left” layout, and make use of it on a specific page, your customizations will be implemented on that page.

Woo Component Widget ↑ Back to Top

Woo Component widget

Woo Component widget

The widget loads any of these components:

  • “Business” Slider
  • “Magazine” Slider
  • “Magazine” Posts Grid
  • Blog Posts
  • Current Page Content

And can be used in these widget areas:

  • Homepage
  • “Widgets” page template
The Woo Component widget is designed to be used in the Homepage widget area and on the Widgets page template, but it will work in other widgetized areas.

Homepage Widget Area

Adding widgets to this area will display them on your homepage and override the default homepage content. Use the Woo Component widget to set up a custom homepage.

Go to: Appearance > Widgets to add the Woo Component widget to your Homepage widget area.

If you have set up a static page as your front page in Settings > Reading, the Homepage Widget area will not show.

Widgets Page Template

This page template uses its own widget area to display content. If no widgets are added to this widget area, the default page content is displayed.

Go to: Appearance > Widgets to add the Woo Component widget to your “Widgets” page template widget area.

Using the Widgets page template on multiple pages

The “Widgets” page template can be used to display different widgets in the content of different pages. To do this, use the WooSidebars plugin.

  • Create a New Widget Area in WooSidebars.
  • Set the Sidebar to Replace for this widget area to Widgets Page Template.
  • Add a condition for the page you’d like to customize widgets for. Ensure that this page has the “Widgets” page template selected.

Header Widget Area ↑ Back to Top

Canvas v5.5.0 introduced a ‘Header’ widget area, allowing you to add any widget you like to the right of the header area. This replaces the previous ‘Top Ad’ section.

To use the Header Widget:

  1. Go To: Appearance > Widgets
  2. Add the widget you want to use to the Header Widget Area and save:

Canvas-Header-Widget

Page Templates ↑ Back to Top

Canvas includes a few unique templates, in addition to standard ones that you can add to your theme:

  • Magazine – A fully fledged magazine page template with slider and two column layout.
  • Business – A business template with a slider and simple page/sidebar setup.
  • Widgets – A page that uses the “Widgets Page Template” widget area as it’s content.
  • Feedback – A page that shows all your Feedback posts
  • Portfolio – A page that shows all your portfolio posts

Template Engine ↑ Back to Top

The Canvas content templating engine provides more control over the appearance and context of each post. For example, you can customize how posts with the “aside” post format are displayed within archives and search results. The templating engine is fully child theme friendly. This is demonstrated with Uno and Duo, two child themes we released to help customize the style of Canvas.

The templating engine works, as follows: Main Template File > Loop File > Content File. An example of this would be:

archive.php looks for loop-archive.php (defaults to loop.php), which in turn looks for content.php for each post. The content.php template lookup searches the following files, in this order of priority:

  • content-archive-test-of-image-attach-2.php (archives and posts page only)
  • content-archive-post-1173.php (archives and posts page only)
  • content-single-test-of-image-attach-2.php (single posts/pages only)
  • content-single-post-1173.php (single posts/pages only)
  • content-test-of-image-attach-2.php
  • content-post-1173.php
  • content-archive-post.php (archives and posts page only)
  • content-archive.php (archives and posts page only)
  • content-single-post.php (single posts/pages only)
  • content-single.php (single posts/pages only)
  • content-format-aside.php
  • content-post.php
  • content.php

Which translates, in general terms, to:

  • content-archive-slug.php (archives and posts page only)
  • content-archive-posttype-ID.php (archives and posts page only)
  • content-single-slug.php (single posts/pages only)
  • content-single-posttype-ID.php (single posts/pages only)
  • content-slug.php
  • content-post-ID.php
  • content-archive-post.php (archives and posts page only)
  • content-archive.php (archives and posts page only)
  • content-single-post.php (single posts/pages only)
  • content-single.php (single posts/pages only)
  • content-format-postformat.php
  • content-posttype.php
  • content.php

Using this engine, it is possible to customize the look of a single post or how a post type looks in the global context (i.e., in a multiple post type search results list). In short, this customizes templates down to the “per-post” level.

Additional Resources ↑ Back to Top

For additional resources, such as Tutorials, How-To’s, and Answers to Frequently Asked Questions, see our Knowledge Base (Note: you need to log in with your account username and password).

Back to the top