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.

Featured Plugin - WordPress Ecommerce Shopping Cart Plugin

Out of all the WordPress ecommerce plugins available, MarketPress has got to be the winner - easy to configure, powerful functionality, multiple gateways and more. A simply brilliant plugin!
Find out more

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.

Comments (7)

  1. I don’t think there is any need for this Code Snippet plugin. There’s already a Canvas > Hook Manager option that allows you to insert hooks in different posts and pages. I don’t think you’ve studied Canvas well.

    • But Tom’s solution with the awesome “Code Snippets” plugin is much more elegant and future proof. If he ever switches themes in the future, he has all his snippets there in the plugin. if the theme/framework has similar hooks he has to only change the hook handle and is done.

      Also, Code Snippets allows for bulk activation/deactivation (just like with Plugins!).

      Most info boxes or ad areas we want always to be there, no matter which theme/framework we use, right? So I also highly recommend the Code Snippets plugin over any “functions.php” file or framework-specific hook-Plugins.

      -Dave :)

  2. I tried to do the process outlined in this article, and for some reason it didn’t work. I installed the snippet plugin, added the snippet exactly as written by cutting and pasting (except with my HTML in the middle), activated it – and nothing happened. Any ideas what I should check/fix?

Participate