Nov 21, 2011 update. Demo CTR-Plus site is now live
In this blog post tutorial, I’m going to walk you through the process of creating a review site using my WordPress theme, ClickBump 5 (aka C5).
ClickBump 5 is the WordPress core theme which comes with any of products > ClickBump Express, or Engine, or Express with JumpStart Pro or ClickBump Bundle)
Here’s what the site will look like when we are done (click the image for a larger preview):
(Above: CTR-Plus for ClickBump 5. Click the image for full screen preview.)
You can view the live demo site here
As you can see from the screenshot, there are several monetization sources available and at your disposal in ClickBump 5.
The Ads in the Example Site
To the right side of the header image, you can place a Google search widget, just by dragging and dropping the ClickBump ClickBump 5 exclusive “Google Search Widget” from the “Widgets” area over into the “Header” sidebar at “Appearance > Widgets“.
Below the header image and to the left, we’ve placed a 160×600 tall skyscraper banner (it can be from Google adsense or from any affiliate network such as Amazon or ClickBank). To place this ad, I just went to “Appearance > Widgets” and dropped a “ClickBump Ad Box” over into the “Sidebar” widget area. I then pasted my ad code into it and clicked “Save”.
To the right of the skyscraper ad, and inside the main content area, I’ve placed a set of “Stacked 336×280 ads” one on top of another. ClickBump 5 has an automated setting to do this for you, so I’ve just enabled that option at “ClickBump 5 > Ads > Use Stacked Ads“. I also placed my Adsense Publisher ID into the space provided at “ClickBump 5 > Ads > Adsense ID” and I’m all set, ClickBump 5 does the rest, including the nifty, two column, magazine style layout you see in the screenshot.
Just below the content area, I’ve placed a single 600×160 banner ad that reinforces my main offer, which is a ClickBank product on the workout ebook my site is targeted to. To place this ad, I simply grabbed my ad code from ClickBank, then opened “Appearance > Widgets” and again, dragging a “ClickBump Ad Box” over into the “Below Content” sidebar area. I then opened the sidebar widget and pasted in my ad code before clicking “Save“.
The Images in the Example Site
Starting from the top left, you have the ability to add your own custom header image (the avatar character). This can be any image you choose. You’ll upload it via “ClickBump 5 > Images > Header“. I choose an headshot of a male avatar character, which has a transparent background to seemlessly blend in with the template gradient background area for a nice, clean look.
Directly under the header area, you’ll see two large 350×250 images that match my site’s theme (Crossfit Workouts). I grabbed these images via Google search. Make sure the images you use are cleared for display and you are not violating copyright. There are many free stock photo collections available online and you can also search google images with a copyright license filter enabled. I also use istockphoto.com for paid stock photography.
The Content and Menus in the example site
To create this site, I used JumpStart Pro, the one click site installer that comes with my “Express with JumpStart Pro” and “ClickBump Bundle” packages. The JSPro installer automatically installed ClickBump 5, along with the CTR-Plus template (I placed a copy of the unzipped ctr-plus template folder into the JSPro’s “templates” folder prior to using it to create this site).
By using JSPro, I did not have to create any pages or posts, since JSPro creates them all for me as part of the one click install process. I merely had to edit my home page post with my main article content.
The menus were all created as part of the JSPro installer process as well. I simply removed the default “Custom menu” that the JSPro installer created (since I wanted a clean look across the top), but going to “Appearance > Menus > and de-selecting the “Site Menu” from the “Theme Locations” box and clicking “Save”.
Unlimited Color Options
As with all ClickBump templates, you have unlimited color options via the point and click colorpicker in ClickBump 5 theme options. For example, with just a few clicks on the colorpicker, you can instantly change the background to any color you like. Here are a few examples:
Since the template runs in the ClickBump Framework, you have complete control over ad placement, menu counts, and foreground (text) and background color options at the click of a button. You can also take advantage of ClickBump’s built in support for social media as well as Google search box as seen below (click for full size preview) as well as automatic social sharing widgets above or below your post content.
Finally, because CTR-Plus runs in ClickBump Framework, you can instantly customize the color palette to match your niche or tastes, from an unlimited selection of colors, with point and click ease via the ClickBump theme options panel. Here are a few color scheme examples:
CTR-Plus Step by step setup
- (optional) Install and activate JumpStart-Pro. This sets up your site’s default pages and posts, installs the ClickBump WordPress theme into the site and sets up the site default settings to optimize it for search traffic and monetization.
- Install the CTR-Plus template package ctr-plus.zip into the ClickBump Framework at “ClickBump > Home > Add/Upgrade Templates“.
- From the “Template/skin” pulldown menu, select ctr-plus and click “Save Changes” at the top of the theme options panel. This tells ClickBump framework to use the CTR-Plus skin for your site’s design and layout. The ClickBump framework still controls the core markup, html5 & css3 compatibility, w3c validated markup and all settings. The template gives it the unique look and feel that leads to high conversion rates.
- Site Check – Assuming you’ve built your site with JSPro, the site will now appear as in the “Figure 1” screenshot below.
- Next, if you don’t want the slider widget active, you can disable it, along with the jQuery library that it relies on by un-checking the two options at “ClickBump > Misc > Slider > Enable” and “ClickBump > Misc > Scripts > Enable jQuery“
- Configure your Ad options – To do this, Go to “ClickBump > Ads“ and enter your Adsense Client ID (if using Adsense) and/or your Ad script or Amazon/ClickBank/Ebay/Chitika code at “ClickBump > Ads > Alternate Ad Code“
- Site Check – Assuming you are using Adsense, and have pasted your Google Adsense Client ID into the space provided at “ClickBump > Ads” your site will now look like the screenshot labeled “Figure 2″ below.
- Now I’m ready to place my affiliate ads into the left sidebar and below the content as in the screenshot. Before I do so, I’m going to clear out the default sidebar widgets that JSPro added to my sidebar. To do that, I just go to “Appearance > Widgets” and drag the 3 widgets out of the box labeled “Sidebar”. Just drag them over to the left and they will be removed from the sidebar leaving it empty.
- Next, without leaving the Widgets screen, drag a “C5: Ad Box” widget from the “Available Widget’s” collection over into the sidebars labeled “Sidebar” and “Below Content“. If you don’t want to place ads here, you can skip this step.
- Continuing with Step 8, expand the “C5: Ad Box” widget and paste your ad code into it and click “Save”. In my example, I’m using a ClickBank offer in these areas, so I’ve uploaded my ad images via “Dashboard > Media” as ad1.png and ad2.png (but you can name your images anything you like). For the left sidebar, which will be using ad1.png, I”ve placed the following code into my “C5: Ad Box” widget for the left sidebar (don’t forget the “alt” attribute. You site won’t validate as html5 without it):
<a href=”my-affiliate-link”><img src=”path-to-my-site/wp-content/uploads/ad1.png” alt=”crossfit workout course” /></a>
- Continuing on with Step 9, for the Ad that appears below my content, I’ve expanded the “Below Content” sidebar and pasted the code for the 2nd ad into the “C5: Ad Box” that I placed into that sidebar:
<a href=”my-affiliate-link”><img src=”path-to-my-site/wp-content/uploads/ad2.png” alt=”crossfit workout course” /></a>
- Site Check – Now that I’ve got all my ads in place, you can see what my site looks like now in Figure 3 below…
- Next, I’m going to temporarily hide the 4 boxes that JSPro added to my “Footer” sidebar at the bottom of my template. Unlike before in Step 8 where I removed the widgets completely from the sidebar, in this case I might want to use them later, so I’m going to use ClickBump Framework’s built in “Widget Visibility” option to simply disable them for now. To do this I simply check the Hide button on each of the “C5: Box” widgets 1-4 and then “Save” at the bottom of each widget. You can see this in Figure 4 below.
- Next, I’m going to customize the header image and replace the image of the girl with my own custom image. The default size of the CTR-Plus template’s header image is 967×100, but your image can be any size you like. To expand the header to accomodate a taller image, you can enter a custom header height at “ClickBump > Images > Header Image > Custom Height“.
- To upload your image, go to “ClickBump > Images > Header” and click the button that reads “Upload Header”. Just remember to save your image as a .png file. ClickBump will automatically rename the image header.png and place it into the ctr-plus folder under “wp-content/themes/c5/styles/ctr-plus/”
- Site Check – Now that I’ve disabled the 4 Boxes in my “Footer” sidebar, and uploaded a custom header image, my site looks like you see in Figure 5
- Finally, all that’s left is to add the two large images just below my header area. To do that, I’ve renamed my images with an underscore in front of the filename (_image1.jpg and _image2.jpg) and uploaded them via “WordPress Dashboard > Media“. I’ve also checked the option to show product images at “ClickBump > Product Images > Enable“. This tells the theme to display any images it finds with an underscore character preceeding the filename at the top of each of my posts.
- All done! Now you just need to add your content and you are set to go forward. For help configuring your custom menus, check FAQ #19 in the ClickBump User’s Forum. To see how ClickBump Framework’s automated metadata manager works, check FAQ’s #10-12.
- BONUS: If you want to short circuit a few of the setup steps above (specifically #3, #5 and #17), here’s a script that you can import via “ClickBump > Misc > Settings Manager > Import Settings” to insure your site is set up as directed above (Note: you will still need to upload the product images, this script just assigns all the correct settings in CE4 theme options to emulate my example site).
Figure 4 -Temporarily hiding the footer boxes using ClickBump Framework’s unique “Widget Visibility” panel.