If you’re an online blogger, web designer/developer, or website owner looking to generate income then you need to sign up for the StudioPress affiliate program.
I mean right now… seriously, I’ll wait for you to come back.
And as promised, I’m going to reveal the tricks of my trade by teaching you today how you can make money by adding a Genesis Box to your site.
Why You Should Become an Affiliate
You might wonder why you should promote the Genesis Framework.
Well how about a 35% commission on all sales? Yes, this means if you refer a person to our website who purchases the Pro Plus All-Theme package you will earn more than a hundred bucks – $105.00 to be exact.
Our top affiliate has made over $100,000 so you can be assured that the conversion rate on generating sales by promoting our WordPress themes is sky high.
How to Add the Genesis Box to Your Site
Let’s jump right in and assume you have been accepted into our affiliate program. Keep in mind the code below is taken directly from my personal theme, so you might need to do a little customization to match your site’s design.
1. Create the Genesis Box Content
The first step is create a file called genesis-box.php, place the code below into it, and then upload it into your child theme’s folder. Feel free to modify the text.
<div id="genesis-box">
<h3>Powered by the Genesis Framework</h3>
<a href="http://www.studiopress.com/"><img class="alignright" src="http://www.briangardner.com/wp-content/uploads/genesis.jpg" alt="Genesis Framework" title="Genesis Framework" /></a>
<p>Genesis empowers you to easily build amazing websites with WordPress. Whether you're a novice or advanced developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to incredible places.</p>
<p><a href="http://www.studiopress.com/">It's that simple - start using Genesis now!</a></p>
</div>Click here for a Genesis Box image. Please save the image and host it yourself.
2. Include the Genesis Box on Single Posts
Next you want to hook the content of the genesis-box.php file below your posts. Open up your child theme’s functions.php file and place the following code into it:
/** Add Genesis Box on Single Posts */
add_action( 'genesis_after_post_content', 'include_genesis_box', 11 );
function include_genesis_box() {
if ( is_single() )
require( CHILD_DIR.'/genesis-box.php' );
}3. Style the Genesis Box to Match Your Site
Lastly, you may want to style the Genesis Box to match the look of your site. Below is sample CSS that can be used – be sure to add it to your child theme’s style.css file:
/* Genesis Box
------------------------------------------------------------ */
#genesis-box {
background: #222;
color: #fff;
margin: 0 0 20px -30px;
overflow: hidden;
padding: 20px 20px 0;
}
#genesis-box h3 {
color: #999;
font-size: 18px;
font-weight: normal;
margin: 0 0 10px;
padding: 0;
text-transform: uppercase;
}
#genesis-box a,
#genesis-box a:visited {
color: #fff;
text-decoration: underline;
}
#genesis-box a:hover {
text-decoration: none;
}
#genesis-box p {
color: #fff;
padding: 0 0 20px;
}
#genesis-box .alignright {
border: 5px solid #999;
float: right;
margin: 0 0 5px 15px;
}
Thanks for sharing this nice information. Would be great of you if you write a tutorial on adding tabs in sidebar and a slider on homepage (just like in magazine theme).
I know, that already there are plugins for doing this thing but would be great of you if you come up with a custom code (like this).
Thanks in advance..
Vivek, appreciate the suggestion. First and foremost, my tutorials are aimed at explaining how I’ve done things specifically on my site. In other words, more of a personal “here’s how I do things” kind of way.
Thanks Sir,
Forget that its a personal site..Will take next time…and looking forward for more tutorials..
Hello Sir,
As mentioned by you, I’ve added genesis box but its not working properly as some of the text is missing. Would be great of you if you let me know my mistake so that I can correct it..
Try changing this line in the css:
margin: 0 0 20px -30px;
To this:
margin: 0 0 20px;
Thanks for this Brian! I’ve been wondering how to get this on my site for a while now.
Your welcome Quincy – let me know if you run into any issues… we’re asked all the time how guys like Chris Brogan and Darren over at Problogger add that to their sites.
Thanks Brian for this tip! As I read your post, I’m pondering…. The links in the genesis-box.php file should be your affiliate links, not the ones you have above, right? Also, the graphic image is a reference to a jpg file on your site, can we copy it and upload to our own site in case you ever change the path, it won’t break on our site?
Thanks
Yes – the destination links in the genesis-box.php file should be your affiliate links. I obviously don’t need to be an affiliate so I link directly.
As for the image, yes, you can save the image and upload to your site – not a problem. In fact, I should mention that is the better way to do it since I don’t want folks to hotlink my image.
I’ve decided you’re goal in life is to make my to do list. You should make a to do list plugin.
Heh, what else you got Michele? I’m happy to write tutorials that are helpful for folks!
Hi Brian,
I think genesis box looks more effective than just an image. Already inserted in my post. Thanks for sharing this tutorial.
Thanks for sharing this nice information. I’ve been wondering how to get this on my site for a while now. Put in things to do. I love your themes … and the way you work!!!
Nash
Do you mind if I translate this post into Italian and the public on wptemi.com?
Thanks for sharing this
Not at all – go for it!
Adding a Genesis box is the least of my problems when it comes to creating themes built on Genesis.
What I’m more interested in, is the process (and thought patterns) you follow from initial theme idea to final product.
Sounds like an very interesting idea for an upcoming blog post or series.
Brian,
One other thing, not sure if it is worth a blog post or not, but when creating a child theme, is it easier to copy the Genesis style.css file into the child theme, and modify as required. Or refer to the Genesis style.css file and copy in the relevant parts as required?
Thanks Brian for this tip! As I read your post, I’m pondering…. The links in the genesis-box.php file should be your affiliate links, not the ones you have above, right? Also, the graphic image is a reference to a jpg file on your site, can we copy it and upload to our own site in case you ever change the path, it won’t break on our site?
Thanks
+1
Just followed your directions to the letter and it came out sweet. Helps that I am using Genesis and child themes.
Made a few mods to the CSS to fit my needs, but that was minor. Thanks!
Where can I find the Genesis box graphic Brian.
Seems to have disappeared.
This looks great but I have no skills when it comes to adding code so I’m going to have to have someone look into doing this for me because I would want this added. I saw this on chrisbrogan.com and loved that box.
It’s really straightforward… if you run into any troubles with this, let me know.
Sweet! This is just what I’ve been looking for. My attempts at creating a similar box were as ugly as my Bronco’s defense this year. Can you imagine?! #horrifying
This may be a dumb question to some, but I’ve had clients ask me all the time:
Do you have any tutorials I can point people to or a simple explanation for non-programming website owners?
Thanks Brian!
You can do this in Notepad, or any text editor. Just save the file with a .php extension. That’s all.
If you are using Windows Notepad, when saving the file you need to either change the file type to “All files” or enclose the filename in quotes, i.e. “genesis-box.php”
I would like to put this box on my site, but the problem is that I want it in Norwegian language and we got the letters æøå and when I insert them I get a question mark.
Is there a way for me to use these letters in the genesis-box.php?
Hm, honestly not sure what to suggest – perhaps replacing the call for the genesis-box.php file with a widget area, and see if using a text widget from WordPress make any difference.