Pin It

Updated with revised information to support the newly updated Adsensed template now available at the owner’s dashboard.

Lot’s of website publishers using my WordPress theme, ClickBump 5,  to rapidly produce product review sites. In this quick blog post, I’m going to show you how the new “Adsensed” template can be used to create a site that contains monetization from multiple sources: Amazon, ClickBank and Adsense (you could also feature Ebay listings if you like, but this example does not).

Now, let’s see what’s happening in WordPress using ClickBump Engine to easily manage things. This screenshot has overlays that pinpoint exactly where each element is coming from (Post title, tagline, excerpt, ad blocks, etc)…

Click here to see a full screen preview with help overlays, then click the back button to continue reading about

So, as you can see from the screenshots, the page we’ve taken from this site has neatly arranged all the site elements to create a compelling and organized display for the user. At the top of the page, we have our Avatar character that’s created to help quickly convey comfort and trust. When people see a page, they immediately fixate on any faces they see. This visual cue helps to lead the eyes down across the Adsense leaderboard and engage them into “buyers” mode.

Here’s the Avatar (header.png) character I’ve used in this example. You can substitute your own header.png using the included uploader wizard in the ClickBump Engine theme options panel at “ClickBump 5 > Images > Header Image“.

Adding the Avatar > Step 1

This template, like all ClickBump templates, enables a custom header image named header.png. Its super simple to add a custom Avatar of your own (or you can use the default one supplied with this particular premium template) simply by clicking the “Upload Header” button from theme options at “ClickBump 5 > Images > Header Image > Preview” and uploading your own header.png file.

I’m using a PNG image type here (as opposed to JPG or GIF) because we need a nice transparent background around the avatar character. If you start out with a character with a white background, you can easily make the white background transparent by opening the image at pixlr.com (Free online image editor), then double click on the layer titled “background”, to unlock it. Once you’ve unlocked it, it becomes “Layer 0″ (as in “layer zero”). Doing this enables the image to have a hidden transparent layer, which you will see in the next step.

Now, click on the “magic wand” tool from the tools palette to select it as the active tool (its the 3rd icon from the top left), and click anywhere in the white background of the image to select it (You may want to experiment with the “tolerance” value to get a closer crop on your selection). Once the background is selected, click the “Delete” key on your keyboard. This will remove the background and you will see a gray and white checkerboard pattern which indicates that area will be transparent when the final avatar.png is viewed in the browser.

Finally, click “File > Save” and from the “Format” pulldown menu, choose “PNG (Transparent, full quality) and click “OK” to save the image. Make sure you name it “avatar.png” exactly, all lowercase characters. You can save it to your desktop in a place you can remember. You will be uploading this image to your site next.

Adding the Avatar > Step 2

Once you’ve got your avatar.png created and uploaded (or you can just use the default character that ships with the Adsensed template), the next step is to add some content to the “Header” sidebar (which makes the avatar show up in the template on your home page).

In WordPress, head over to “Appearance > Widgets” (see the screenshot below) and expand the widget named “Header“. Drag an empty “C5: Box Ad” or (if not using Adsense) a standard text widget over into the sidebar titled “Header”. Open the widget and add some text or customize your Adsense leaderboard code (if using the “C5:Box Ad” widget) and click “Save”.

(Above: The widgets panel. Click the image for a full screen preview)

Now you can preview the home page. You should now see your avatar character in the header area, along with whatever text or ad content you placed into the widget in the “Header” sidebar.

Check the screenshot below to see all of the default options, including the template color swatches that allow you to fully customize your site.

(click the image for the full screen preview, then click the BACK button to return here)

The final touch: Add the search box

To add the search box widget, just drag a “Search” widget over to the “Sidebar” widget. If you’ve placed the ad box into the “Header” widget area as I’ve done in this site, you’ll need to add this custom css to position the search box so that it makes room for the ad:

.home .widget_search,.single .widget_search{top:230px}

That’s it! Preview your site again and you will see the search box has been added to the post title bar just as you see in the screenshots above.

In this example, you can see that the currently active template is “Adsensed”. You can easily choose from any available template on the fly without changing your site content simply be selecting it and clicking the “Save Changes” button.

This template, and all premium templates, allow you to customize the layout colors with the convenient visual color picker right from theme options. The example template is using the default green color scheme. However, as you can see from the screenshot, you have 4 color swatches that you can adjust to “dress” the site in a completely unique color scheme that’s all your own. You can pick from a selection of “web safe colors” simply by clicking on the color swatch or you can type your 6 digit hexidecimal color right into the box.

Here’s a screenshot showing the colors you can customize, along with a couple of different looks achieved with various color selections…


(click the image for the full screen preview, then click the BACK button to return here)

In the next update, I’ll begin to discuss how easily I’ve integrated ClickBank hoplinks and Amazon affiliate links right into the content and images you see across the top of the post content.

Note: The new premium product review template used in this example is “Adsensed”, ClickBump Engine owners can purchase and activate this template for immediate use or click here for a preview of all of the latest premium templates available for ClickBump Engine.