Search

Canvas

Homepage overview ↑ Back to Top

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

Canvas-Theme-Overview

Please 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 as well, using the Canvas Custom Settings meta box when adding or editing an entry in your WordPress admin.

Canvas-Custom-Settings-Box

Typography ↑ Back to Top

You have complete control over your typography across your theme under the various sections under General Styling, Layout The Misc Typography options control only the basic typography, and 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 that your visitors will see. Therefore, it’s important that your header showcases your brand and provides a clear menu for navigating your website.

To get started with customising your header under Canvas > Settings, please use the following steps:

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 customise the look of your navigation menu (even the 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 whole width of the browser.

This option can not be used in conjunction with the Boxed Layout.

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

  • Enable Full Width Header option to make your header and navigation 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 Full Width Footer option to make your widgetized footer and footer area 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 which includes 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

Setup the posts slider

The magazine template slider uses posts which 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

Setup the featured post(s)

The magazine template has an option to show a full width post 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 control 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 which 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.

canvas-page-attributes-business

  1. Next, go to: Canvas > Settings > Business Template to setup your template.

canvas-business-settings

Content and sidebar setup

The 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, as you can add your own title to the content of the page using a h2, h3, or h4 tag or leave it out completely.

canvas-business-page

If you want a unique sidebar for the business page, simply 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 setup the Featured Business Slider you will 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

When adding slides you have two options, you can have an image fill the entire background area of the slide, or you can use the slide page layout instead.

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. If you want the image to fill the entire background of the slide add a Featured Image for 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 optionally enter a URL to link the slide.
  6. Publish slide to save.

canvas-business-slide-edit

Business Slider Theme Option Settings

Since Canvas 5.6.3, the fixed height option has been removed from the Business Slider to better optimize the theme in regards to Responsive Design. To set a fixed height for the slider, please 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 would like 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 please see our tutorial here: WooThemes Shortcodes

Set a page as Homepage ↑ Back to Top

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

Canvas-Reading-Setttings

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

Portfolio ↑ Back to Top

This theme includes a portfolio custom post type which 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 either uploading multiple images in step #5 above, or by using the Add Media button in the post editor and uploading multiple images. After you have uploaded the images, click Save Changes or close the upload window. The images that you upload will automatically be shown on your portfolio post, so you don’t need to actually add them to the porfolio 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

You can have a portfolio item include a video like this:

  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

You can add a link to the client website and a 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 are simply ways to categorize your portfolio section. You can create galleries by going to: Portfolio > Galleries and adding your 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 with the Filters, primarily. 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 (it can be overridden by child themes) and filterable using the following filter naming convention: woo_shortcodecode_shortcode (for example, woo_post_date_shortcode).

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

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

Hooks ↑ Back to Top

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

Use the Hooks to add custom HTML and/or shortcodes at the 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 the values for each column.

The settings for each layout are preserved and saved for use 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 of, for example, the “Two Column with Content on the Left” layout, and make use of it on a specific page, your customisations will be implemented on that page.

Woo Component Widget ↑ Back to Top

Woo Component widget

Woo Component widget

The widget is used to load in any of these components:

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

The widget 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, although 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 setup 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 it’s 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

It is possible to use the “Widgets” page template to display different widgets in the content of different pages. To do this, please 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 customise the 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 wish 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 the standard ones which 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 how each post looks in various contexts. For example, customise how posts with the “aside” post format are displayed within your archives and search results. The templating engine is fully child theme friendly. You can see this 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 as follows:

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 looks for 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 customise the look of a single post or of how a post type looks in the global context (for example, in a multiple post type search results list). In short, this is customisation of templates right 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, please see our Knowledge Base (note, you will need to log in with your account username and password).

Back to the top