How to Add a Genesis Box to Posts

Many of you know that popular websites such as Chris Brogan and Problogger have a box at the end of their posts that says something like “ChrisBrogan.com runs on the Genesis Framework.”

I’ve been asked a number of times by people how to display a Genesis Box. Below you will find detailed instructions how you can add it to your blog or website.

To become an affiliate, sign up now and start receiving 35% commissions.

1. Create the Genesis Box Content
First create a file called genesis-box.php, place the code below into it, and then upload it into your child theme’s folder. Modify the text if you would like.

<div id="genesis-box">
	<h3>YourDomain.com runs on the Genesis Framework</h3>
	<a href="AFFILIATE LINK GOES HERE"><img class="alignright" src="IMAGE URL GOES HERE" alt="Genesis Framework" title="Check out the Genesis Framework" /></a>
	<p>Genesis empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go. It's that simple - start using <a href="AFFILIATE LINK GOES HERE">Genesis</a> now!</p>
	<p>Take advantage of the 6 default layout options, comprehensive SEO settings, rock-solid security, flexible theme options, cool custom widgets, custom design hooks, and a huge selection of child themes ("skins") that make your site look the way you want it to.  With automatic theme updates and world-class support included, Genesis is the smart choice for your WordPress website or blog.</p>
</div>

2. Include the Genesis Box on Single Posts
Now you’ll need 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', 9);
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 to style the Genesis Box – be sure to add it to your child theme’s style.css file:

/* Genesis Box
------------------------------------------------------------ */

#genesis-box {
	background: #f5f5f5;
	border: 1px solid #ddd;
	margin: 10px 0 0;
	overflow: hidden;
	padding: 10px 10px 0;
}

#genesis-box h3 {
	font-size: 18px;
	font-weight: normal;
	margin: 0 0 10px;
	padding: 0;
	text-transform: none;
}

#genesis-box .alignright {
	background: #fff;
	border: 1px solid #ddd;
	float: right;
	margin: 0 0 5px 10px;
	padding: 7px;
}