Add an Affiliate Box to Your Website

In this post, we’ll add an affiliate Box using the Extender Plugin for Genesis. Scroll to the bottom of this post, or any post on this website, to see the affiliate box in action.

If you haven’t already, be sure to sign up for the Genesis Extender Affiliate Program, so when you add this affiliate box to your website(s), you can make 40% ($17.60) when visitors click your affiliate link and then decides to buy the Extender Plugin for Genesis.

Once you are affiliated, it’s time to build the affiliate box, then put it where we want it to show up, and, finally, style the affiliate box to suit our taste and whichever Genesis Child Theme you are using.

Setup Custom Conditional

First, lets create the Custom Conditional that will determine where our Affiliate Box will appear on our website.

If you aren’t already, then login to your WordPress installation, look in the left column

Genesis –> Extender Custom –> Conditionals

Click the Add button to add a new Conditional, then click the Examples dropdown on the left side of your Conditional.  Choose the Is Single Post conditional, this will add your Affiliate Box to each single post on your website, but not Pages or the front page etc.  Click the Save button and then Refresh your browser so the Conditional will be available when you area ready to add it to the Custom Hook Box below.

Build the affiliate box

Now that we have the conditional setup, we are ready to build the affiliate box.  No need to write any html for this, you just need to copy the code snippet below:

<div id="affiliate-box">
<h3>Minimum 2.0 Child Theme: Extended!</h3>
<a href="http://your-affiliate-link.com"><img class="alignright" title="Check out the Genesis Framework" alt="Genesis Framework" src="http://genesis.extenderplugin.com/wp-content/uploads/2012/10/genesis-260x125.jpg" /></a>
Thanks to the Extender Plugin for Genesis, I can add content (like this affiliate box) anywhere I need, without hiring a developer. Best of all, the extender plugin works with ANY Genesis Child Theme!
</div>

and paste the html into a custom hook box (make sure to replace the “http://your-affiliate-link.com” link to your actual affiliate link).

Create Custom Hook Box

To create your Custom Hook Box, go to the Hook Box tab, and click the Add a new Hook Box button.

1. Give your hook box a name (I named this one Genesis Box)
2. Choose the Conditional you created above so it will show up only on the Single Posts (you could also do what’s mentioned in THIS COMMENT to make it so your Affiliate Box is tied to a specific Category)
3. Choose the hook location you want your hook box to show up in (I used the genesis_after_post_content hook)
4. Click Save

Style Your Affiliate Box

If you don’t have the Custom Front-End CSS Builder active, then click on the CSS tab and then toggle the box to Activate the Front-End CSS Builder.

Click Save.

Now open up a new window of a single post on your website. Click the Green button at the top right of your screen, to Show the Custom CSS Builder.

Copy the CSS below and paste it into the Custom CSS Editor at the bottom of the left column created by the Front-End CSS Builder.

Click Save for the changes to be live and then feel free to use the Front-End CSS Builder to tweak the look to suit your taste and current Genesis Child Theme.

/* Affiliate Box */
#affiliate-box {
background: #131313;
margin: 10px 0 0;
overflow: hidden;
padding: 30px;
color: #FFFFFF;
}
#affiliate-box h3 {
font-size: 30px;
font-weight: normal;
margin: 0 0 20px;
padding: 0;
text-transform: uppercase;
text-align: center;
color: #FFFFFF;
}
#affiliate-box .alignright {
background: #fff;
border: 1px solid #ddd;
float: right;
margin: 0 0 5px 20px;
padding: 7px;
}
#affiliate-box p {
font-size: 18px;
text-align: center;
margin-bottom: 10px;
color: #FFFFFF;
}