HostGator Web Hosting

WooThemes Canvas Theme Tutorial Series Part 2

Welcome to our second tutorial on how to build an amazing site with the Canvas theme by WooThemes.  We appreciate you following along with us as we build our demo site, OhCecelia.com, from start to finish and record all the important steps along the way.  Our goal is to make OhCecelia.com into a magazine style blog while also showing you all the other important capabilities and functionality that the Canvas theme offers.

In this second Canvas theme tutorial we’ll cover topics such as customizing the footer area, creating your Category structure and we’ll show you how to control the navigation of your site via Custom Menus.   We’ll do our best to go into as much detail as possible throughout the Canvas tutorials.  If at any time you have questions please feel free to ask them by leaving Comments on any of the Canvas theme tutorials.

How to Change Canvas Theme Footer Links

By default, the Canvas theme (and all WooThemes for that matter) have links in the footer that go to WordPress.org and to WooThemes.com.  Luckily, WooThemes has made it very easy to change / customize the footer in any way you desire via the Canvas Theme Options settings.  You do not have to mess around with modifying PHP files like you do with most other WordPress themes.  Instead, you simply need to go to the Footer Customization section and paste in your custom Text or HTML.How to Change the Canvas theme Footer Links

At a minimum, we recommend using the footer area to link to your “Contact US” and “Privacy Policy” pages so that you don’t waste valuable top navigation space with pages no one really cares about.  As you probably know, Adsense is the main reason you need to have a Privacy and Contact page but you most likely don’t want them to appear in your main navigation which is why we put them in the footer.  Here’s how to change the Canvas theme footer links…

In the WordPress admin go to Canvas > Theme Options > Footer Customization > scroll down the page and check “Enable Custom Footer (Left)” and “Enable Custom Footer (Right)” > Paste your custom HTML (see below for the HTML) in the Custom Text (Left) and Custom Text (Right) boxes > click “Save All Changes”

If you are not familiar with HTML then simply copy the HTML below and use it on your site.  Below is the exact HTML that we use for the footer on our demo site, OhCecelia.com.  Just make sure that you change out the links in the HTML to go to pages (or Posts) on your site instead of our demo site.

Custom HTML (left):

<p>©2012 Oh Cecelia. All Rights Reserved.</p>

Custom HTML (right):

<p><a href=”http://www.ohcecelia.com/privacy-policy/”>Privacy Policy</a> || <a href=”http://www.ohcecelia.com/contact/”>Contact Us</a> OhCecelia.com</a></p>

Canvas Theme Pages and Category Structure Setup

Map out your category structure in Notepad or on paper before you actually create it in the WordPress admin.  Take time to think about how you want to layout your category structure in detail because you’ll need your site to be able to scale properly.  Having a crappy category structure will cause problems down the road as your site grows.  Therefore, it’s better to keep the high level categories as broad / generic as possible.  Keeping the high level categories basic will allow you to create very specific sub-categories under them as your Canvas site grows and the need for more categories arises.

Tips on how to determine your category structure…

Do a Google search to find other sites that are similar to what the overall theme of your site will be like.  Find the ones you like best and note how they’re category structure is setup.  Take ideas from what they have and use them for the Page and Category structure of your Canvas site.

For your reference, below is the exact category structure we created for our demo site OhCecelia.com.  As you’ll see, we went with very broad, one word parent categories.  The broad high level categories will make it easier for us to add many sub-categories down the road…

Food
-> Recipes
-> Dinner
-> Breakfast

Home
-> Arts & Crafts
-> Cleaning & Organizing
-> Decorating
-> DIY
-> Entertaining & Parties

Parenting
-> Health & Safety
-> School & Education
-> Potty Training
-> Single Parents

Lifestyle
-> Beauty & Style
-> Health & Fitness
-> Travel
-> Relationships
-> Work & Money
-> Pets

After you’ve completed the process of mapping out your category structure, you’re ready to create them in the WordPress admin.  Here’s how to create your Canvas theme categories in the WP admin…

Go to Posts > Categories > Create your high level categories first > once your high level categories have been created create the sub-categories (a.k.a. child categories)  by using the “Parent” drop-down

Canvas Theme Custom Navigation Setup via Custom Menus

With the Canvas theme  it’s easy to design the navigation of your site in any way that you desire via the use of Custom Menus.  For the purposes of this tutorial, we decided to structure our navigation so that our desired Pages show up at the top of the site and our high level categories show up in the main navigation.  It’s important to note that there is no right or wrong way to layout the navigation of your Canvas theme site.  We chose this layout because we think it makes sense for our site but we encourage you to play around with it until you find a navigation layout that best fits your site.

Canvas theme Top Navigation and Primary Navigation Setup via Custom Menus…

Step 1: Create a “Top Navigation” menu and a “Primary Navigation” menu.

In the WordPress admin go to Appearance > Menus > Menu Name enter “Top Navigation” > click Create Menu > click on the plus sign tab (+) to create your “Primary Navigation” menu > for Menu Name enter “Primary Navigation” > click Create Menu

Step 2: Select Primary Navigation as the Primary Menu and Top Navigation as the Top Menu.

In the Theme Locations widget on the left-hand-side of the Menus page select Primary Navigation from the Primary Menu drop down > select Top Navigation from the Top Menu drop-down > click Save

Step 3: Assign Pages to the Top Navigation menu and Categories to the Primary Navigation menu.

The final step of the Canvas theme custom menus setup is to assign Categories to the Primary Navigation menu and Pages to the Top Navigation menu.  Let’s start by assigning our high level categories to the Primary Navigation…

Make sure that you’re on the Primary Navigation tab and scroll down the page until you see the Categories widget on the left side of the screen > click on the “View All” tab > check the box next to each of your high level (a.k.a Parent) categories > click Add to Menu > scroll back up the page and drag / drop the categories so that they are in the order you desire > click Save Menu

Now that your Primary Navigation menu is setup, it’s time to setup your Top Navigation menu…

Click on the Top Navigation tab > scroll down the page until you see the Pages widget on the left side of the screen > click the “View All” tab > check the box next to the pages you want to display in your top navigation > click Add to Menu > scroll back up the page and click Save Menu > go out to your site, refresh the page and your Canvas theme navigation should now be setup exactly as you desire

Important Notes on Canvas Custom Menus Setup:

  • When assigning categories to your Primary Navigation menu start with just the high level categories for now to keep it simple.
  • You can always go back and tweak the setup of your Top Navigation and Primary Navigation menus so don’t get too caught up in getting it perfect on the first try.

HostGator Web Hosting

3 COMMENTS

  1. hi guyes!

    Thanks so much for the tons of great tutorial! You’re helping me a lot with buolging up the page of our brand. But right now I’m wuite stucked with one issue and I’m sure you could help me with it;
    I created a custom menu with my product categories and I want it to show up on the “SHOP” page (and only there) in the sidebar. How can I do that?

    Thanks in advance for your help!

  2. Hi, I set up the custom footers with links to pages, but then had to change the link color to a lighter color to show up on a black background. This also changed the link color throughout the site. Is there a way to ONLY change the color for the links in the footer, and not the rest of the site (so they stay a shade of blue)?
    Thanks

    • Hi Sue,

      Were you able to resolve the link color issue? I just looked at your site, FastWomen.net (nice job!) and it appears that you've solved it. The footer links are white and the other links on the site are blue. Please let me know.

LEAVE A REPLY