WooThemes Canvas Tutorial Part 1 – How to Customize the Canvas Theme
Welcome to the first tutorial in our series on how to build a professional magazine style site with the Canvas theme. Canvas is a premium theme for WordPress created by WooThemes. To date, it’s probably their most flexible, easy to customize theme. As you’ll see, with Canvas it’s possible to shape and customize your WordPress site in just about any way imaginable. No need to modify PHP files or tweak CSS. Huge levels of customization can be achieved all through the Canvas Theme Options control panel in the WordPress admin.
Throughout this Canvas theme tutorial series we’ll build our demo site, OhCecelia.com, from start to finish into a magazine style blog. We’ll try to record all of the important steps in building and customizing the site as we go. Hopefully you’ll follow along with us and feel free to ask questions by leaving Comments on any of the Canvas theme tutorials.
Getting Started with the Canvas Theme
After you’ve installed and activated Canvas you’ll want to take a few minutes to familiarize yourself with the Theme Options settings. You’ll also want to make sure that you’ve installed all of the essential plugins that go along with any WordPress site. After doing that, you’re ready to begin customizing the Canvas theme and you should start by uploading a custom logo.
Uploading a Custom Logo with the Canvas Theme
Canvas makes it easy to upload a custom logo as you’ll soon see. The logo on our demo site is 308px x 95px in size. However, your logo dimensions can be whatever you’d like. Go ahead and play around with different sizes until you find the right fit for your site.
Here’s how to upload your custom logo…
In your WordPress admin go to Canvas Theme Options > General Settings > Quick Start > Custom Logo > click Upload and select your logo > click Save All Changes
On the same page (General Settings > Quick Start) you can also upload a custom favicon. The dimensions of your favicon should be exactly 16px x 16px. Finally, you also have the option of pasting your Google Analytics tracking code in the “Tracking Code” box which you should definitely take advantage of.
How to get Quality Custom Logos Made on a Budget
As you can see by the logo on our demo site, OhCecelia.com, I’m definitely not a graphic designer. I almost always rely on freelance designers for logo creation. The best place that I’ve found for quality custom logos is Fiverr.com. For as little as $5 you can get a professional logo created for your Canvas site. For more tips on logo creation check out our article on “The Importance of a Great Looking Logo“.
Ideas on how to Choose an Overall Color Scheme for your Site
When deciding on an overall color scheme for a new site I like to stick with 3 or 4 colors. Usually, I use the colors in my logo throughout the site to make everything look uniform. If you have a hard time deciding on a color scheme, look at other sites that you visit often to get ideas. Or, think of your favorite sports team and use the colors in their logo as the color scheme for your site. Baseball, Football, Soccer and basketball teams typically have good looking uniforms so copy their colors.
Canvas Theme Typography and Google Fonts Integration
The Canvas theme makes it possible to control the typography throughout every section of your site. For example, your H1 font can differ from your widget title font. Or your primary navigation font can differ from your Post/Page font. More importantly, Google Fonts is integrated with Canvas which gives you a whole new level of typography customization not found in other WordPress themes.
Google fonts are open source non-traditional fonts that add a new level of beauty and originality to your WordPress site. You no longer have to use boring traditional fonts such as Arial, Verdana, Georgia or Courier to name just a few. With Google Fonts you have hundreds of fresh fonts at your disposal.
Canvas Theme Boxed Layout
The Canvas theme makes it easy to create a boxed layout for your WordPress site. Putting a box around the perimeter of the site is as easy as checking a few boxes in the Canvas Theme Options settings. More specifically, here’s how to enable the boxed layout for your Canvas site…
In your WordPress admin go to Canvas > Theme Options > Layout > click on “Boxed Layout” > at the top of the page check the box that says “Enable the boxed layout style” > scroll down to the bottom of the page and check the box that says “Enable box shadow” > click Save All Changes
Play around with the thickness of the box by adjusting the “Box Border Top/Bottom” and “Box Border Left/Right” settings. The boxed layout can be any color and thickness that you desire. You also have the ability to change the background color of the boxed in portion of your site.