WooThemes Canvas Framework: How to Easily Include Calls to Action on Every Page

WooThemesI am a huge fan of WooThemes.

When I was just getting into WordPress they were the first premium theme developers I came across. And when I decided to launch my own blog in June 2011, my theme decision was a shootout between Thesis, StudioPress and Canvas — Woothemes’ “flagship” theme.

In reality, it’s been adapted by many (myself included) as more of a framework than a plug-and-play theme. Whilst my blog’s original design was somewhat vanilla, I was able (with the help of a tame coder) to mould it into something a little more unique over time.

And in all that time, the most common design question I have received from visitors to my blog has revolved around the calls to action that I include on just about every page on the blog. Namely, how do I put them there? With that in mind, I thought I’d take the opportunity to show you exactly how.

[wdca_ad id=”55085″ ]

What Are You Talking About?

First of all, I have a big colorful feature box that dominates my home page:

Leaving Work Behind Feature Box

And then at the bottom of every post I have a direct call to action:

Call to Action

These both do a pretty good job of netting me subscribers, as they are prominently placed (and in the case of the colorful feature box, pretty hard to ignore).

Although getting these into your theme may seem like a complicated endeavor for experienced PHP programmers and the like only, the process is in fact remarkably simple.

Hooks and Filters

Canvas (and WordPress) runs on a system of hooks and filters. Put simply, you can instruct the theme to insert specified code (and edit existing content) at particular points within every page on your site by utilizing said hooks and filters.

Rather handily, WooThemes published a reference for all of the hooks and filters available in the Canvas framework:

Canvas Hooks & Filters

If that’s a little small for your liking you can view a larger image (as well as a complete list of all hooks and filters) here.

So using my post footer call to action as an example, all you need to do is instruct Canvas to insert your HTML code at the “woo_post_inside_after” filter. But how do you do that in practical terms?

The Science Part

First of all, I recommend that you download the Code Snippets plugin. Whilst you can insert the code for your content directly into your functions.php file, Code Snippets enables you to keep things well organized and easily accessible, like this:

Code Snippets

Basically, each code snippet that you create can be treated like a plugin. You can add, edit and deactivate as you see fit. Very cool beans.

Let’s start with the feature box first. All you need to do is create a new snippet and add the following:

add_action( 'woo_main_before', 'feature_box_home_only' );

function feature_box_home_only() {
if ( is_front_page() ) {?>

YOUR HTML CODE HERE

}}

That's it! The code is pretty self-explanatory, even for non-programmer types. The first line essentially says, "At the hook location 'woo_main_before', insert the function 'feature_box_home_only'. Below that is the function itself -- as you can see, it is set to only appear if the visitor is on the front page (i.e. the home page). If you wanted your feature box to appear on every page, you could just remove the if statement.

Then it is just a case of adding the HTML code for your feature box, the design of which is entirely up to you.

The code for the post footer call to action is just as simple:


add_action( 'woo_post_inside_after', 'add_after_post' );

function add_after_post() {
if ( is_single() ) {?>

YOUR HTML CODE HERE

}}

The only differences are (1) the hook and (2) the if statement, which in this situation checks that the visitor is looking at a single post page.

The Sky is the Limit

There you have it folks -- a quick and easy way of including calls to action on every page on your blog. But in reality I'm just scratching the surface of what is possible with Canvas' powerful hooks and filters system -- you can achieve any number of things, and mould your site into just about any shape or form you would like.