Developing Child Themes For Woo Canvas for WordPress

When developing in WordPress there are many different ways to accomplish the functionality and design that you are looking for. With the ability of having many ways to accomplish the goal there also comes many unreliable ways that just may not be able to stand the test of time. By this, I mean, they may not have the ability to be upgraded or allow other plugins as well as the core of WordPress to not be able to be updated. Updates most often are looked at as unnecessary code changes, however, this is not always the case. Often, updates are not always cosmetic changes to a feature but a change in the codes functionality in order to increase or correct security issues.

Enter Woo

With there being many WordPress solutions the key is to finding a solid solution that is durable, can be upgraded, is scalable, and don't forget stylish. WooThemes has come up with Woo Canvas that provides durability, expandability, and can be styled any way you want. In order to take full advantage of Canvas as a developer you can create a "child theme" for you or your clients WordPress website. The Woo Canvas system supports WooCommerce to maximize all the ecommerce features that WooCommerce has to offer.

Using the Woo Canvas base and creating a child theme allows the core WordPress framework to be updated without having to worry about it overwriting any code changes. WooCommerce and any plugins used also have the advantage of being able to be updated without the concern of overwriting and knocking out any code that is currently in place. Not only does Woo Canvas protect the code, but it also protects the framework and base design so that it is fully responsive and customizable on almost every level. What cannot be done out of the box can done in the child theme code.

The base concept for using a Woo Canvas theme is to have the Woo Canvas Theme in the themes folder of your WordPress project and then create a new folder in the themes folder that will contain the "child theme. "The child theme runs off of a base theme inheriting all that themes styling abilities and functionality and then extending off those." Thus, creating a stand-alone instance of custom styling, templates and functions. Having the integrity of the code remain intact and protected is the biggest advantage to using Woo Canvas for your WordPress project.

Structure

Now that we know why we should be using Woo Canvas, lets go over the Woo Canvas structure in more detail. As mentioned earlier, when using Woo Canvas, the product being developed will be a "child theme."To initially declare and be able to call a child theme via the WordPress theme selection, we need to create a new folder to hold our child theme. Start by creating a style.css file in the root of the new child theme folder. The style.css file will contain the code snippet below, which declares the theme, the theme dependency (the parent to the child theme), and where to find the additional styling for the custom child theme.

/* Theme Name: Child Theme Name Here Theme URI: Theme URL Here Version: 1.0.0 Template: canvas Description: CHILD THEME DESCRIPTION HERE Author: YOURNAME HERE Tags: THEME, TAGS, CUSTOM, HERE Copyright: (c) 2015 YOURNAMEHERE. License: GNU General Public License v2.0 License URI: http://www.gnu.org/licenses/Fgpl-2.0.html */ @import url("../canvas/style.css"); 

The code snippet above can be left alone or you can do an import call to your child theme's css just below the import of the parent canvas theme css. Another way of including the child theme's css can be to call it through a function through the functions.php file.

Again, the main focus of using a child theme is to house and contain all the themes templates, styling and non-plugin functionality within the child theme folder in the themes folder.

Within the child themes folder the main files you will initially want to focus on is your child themes CSS style sheet, functions.php and your page templates (e.g. template-homepage.php). You can also put into your child theme folder any of the parent theme's (and WordPress') regular template files such as 404.php, header.php, footer.php, etc. After creating a copy of the original template file into the child theme folder you can then modify the files to your desire and when the website renders as long as you have your child theme activated those template files will over right any standard or parent theme versions of those files, thus protecting the original WordPress and Canvas theme structure and code base.

There is extreme power and the strong promotion of consistency by using and developing a Canvas child theme. An extremely powerful file of the child theme will be the functions.php file within the child theme folder. As mentioned above, you can write functions in that file that can use the native WordPress style sheet import call, however, this is just the beginning of the what can be done in the functions.php file. The functions.php file can also be used to set the default styling options of the child theme. It does this by declaring the values in the child functions.php file that will then set the default styling options that are in the parent template. You can re-write and modify current functions in place, as well as, create your own custom functions.

Within this functions.php file you can also import additional Google fonts to be selected from the drop down menus. However,Woo Commerce makes a plugin that can easily do this for you without having to import each individual additional font via the functions.php file.

The Child Template

Now that we have discussed the styling and the functionality calls via the functions.php file we can move towards the templates we are going to be creating for the child theme. To declare a new template, select from the page type drop down in the WordPress Pages by simply creating a file in the child theme's root folder that starts with "template-" (e.g. template-homepage.php). This will create or override the current WordPress template and will use the code that you have in your template file in the child themes root folder.

Woo Canvas comes with a set of standard templates out of the box for magazine, portfolio, sitemap, timeline, widgets, archives, contact, homepage, and image gallery. These in-place templates can easily be copied to the child theme folder and customized from there.

In order to let WordPress initialize the template and make it available, you will need to include a variation of the code snippet below at the top of your child theme template.

/** * Template Name: Business * * The business page template displays your posts with a "business"-style * content slider at the top. * * @package WooFramework * @subpackage Template */