We are launching a special category called “Genesis Quick Tips” which will include articles showing you how to extend the Genesis Theme Framework. Some of these “tips” will cover specific child themes, while others will work for any child theme using Genesis.

Disclaimer: This following tutorial was written specifically for the AgentPress child theme – which means the code provided below may not work on all child themes that run the Genesis. Keep in mind that it’s always a good idea to make a backup copy of your files before trying this.

Step #1

The first thing to do is to register the widgeted footer areas in the AgentPress child theme’s functions.php file.

Open that up and look for this code:

genesis_register_sidebar(array(
	'name'=>'Multi-Agent Page',
	'description' => 'This is the main content area of the mult-agent page template.',
	'before_title'=>'<h4 class="widgettitle">','after_title'=>'</h4>'
));

Immediately after that, place this code:

genesis_register_sidebar(array(
	'name'=>'Footer #1',
	'description' => 'This is the first column of the footer section.',
	'before_title'=>'<h4 class="widgettitle">','after_title'=>'</h4>'
));
genesis_register_sidebar(array(
	'name'=>'Footer #2',
	'description' => 'This is the second column of the footer section.',
	'before_title'=>'<h4 class="widgettitle">','after_title'=>'</h4>'
));
genesis_register_sidebar(array(
	'name'=>'Footer #3',
	'description' => 'This is the third column of the footer section.',
	'before_title'=>'<h4 class="widgettitle">','after_title'=>'</h4>'
));
genesis_register_sidebar(array(
	'name'=>'Footer #4',
	'description' => 'This is the fourth column of the footer section.',
	'before_title'=>'<h4 class="widgettitle">','after_title'=>'</h4>'
));

Step #2

The second is to establish the proper style for the widgeted footer area. You’ll need to add all of the CSS shown below to style.css, but I’ll break them out so you can see what each section is.

Main Container Styling

#footer-widgeted {
	width: 960px;
	background: #022747;
	color: #CCCCCC;
	font-size: 11px;
	margin: 0 auto 0;
	padding: 0;
	border-bottom: 1px solid #FFFFFF;
	overflow: hidden;
	clear: both;
	}
	
#footer-widgeted .wrap {
	width: 940px;
	margin: 0 auto 0;
	padding: 0;
	}
	
#footer-widgeted .widget {
	background: none;
	margin: 0;
	padding: 0;
	border: none;
	}

Widget Headline Styling

#footer-widgeted h4 {
	color: #FFFFFF;
	font-size: 12px;
	font-family: Arial, Tahoma, Verdana;
	font-weight: bold;
	text-transform: uppercase;
	margin: 10px 0 0 0;
	padding: 0;
	}

Paragraph Styling

#footer-widgeted p {
	color: #FFFFFF;
        font-weight: normal;
	margin: 0;
	padding: 0 0 10px 0;
	}

Hyperlink Styling

#footer-widgeted a, #footer-widgeted a:visited {
	color: #FFFFFF;
	text-decoration: none;
	}
	
#footer-widgeted a:hover {
	color: #FFFFFF;
	text-decoration: underline;
	}

Unordered List Styling

#footer-widgeted ul {
	list-style-type: none;
	margin: 0 0 10px 0;
	padding: 0;
	}
	
#footer-widgeted ul li {
	list-style-type: square;
	margin: 0 0 0 15px;
	padding: 0;
	}

Widget Columns Styling

.footer-widgeted-1 {
	width: 220px;
	float: left;
	margin: 0;
	padding: 0 20px 0 0;
	}
	
.footer-widgeted-2 {
	width: 220px;
	float: left;
	margin: 0;
	padding: 0 20px 0 0;
	}
	
.footer-widgeted-3 {
	width: 220px;
	float: left;
	margin: 0;
	padding: 0 20px 0 0;
	}
	
.footer-widgeted-4 {
	width: 220px;
	float: right;
	margin: 0;
	padding: 0;
	}

Step #3

Next, create a blank file called footer-widgeted.php and place all of the code below into it:

<div id="footer-widgeted">
    <div class="wrap">
    	<div class="footer-widgeted-1">
        	<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer #1') ) : ?>
            	<h4><?php _e("Footer #1 Widget", 'genesis'); ?></h4>
            	<p><?php _e("This is an example of a widgeted area that you can place text to describe a particular product or service. You can also use other WordPress widgets such as recent posts, recent comments, a tag cloud or more.", 'genesis'); ?></p>
	    	<?php endif; ?> 
   		</div><!-- end .footer-widgeted-1 -->
    	<div class="footer-widgeted-2">
        	<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer #2') ) : ?>
            	<h4><?php _e("Footer #2 Widget", 'genesis'); ?></h4>
            	<p><?php _e("This is an example of a widgeted area that you can place text to describe a particular product or service. You can also use other WordPress widgets such as recent posts, recent comments, a tag cloud or more.", 'genesis'); ?></p>
   	    	<?php endif; ?> 
    	</div><!-- end .footer-widgeted-2 -->
    	<div class="footer-widgeted-3">
        	<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer #3') ) : ?>
            	<h4><?php _e("Footer #3 Widget", 'genesis'); ?></h4>
            	<p><?php _e("This is an example of a widgeted area that you can place text to describe a particular product or service. You can also use other WordPress widgets such as recent posts, recent comments, a tag cloud or more.", 'genesis'); ?></p>
	    	<?php endif; ?> 
    	</div><!-- end .footer-widgeted-3 -->
    	<div class="footer-widgeted-4">
        	<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer #4') ) : ?>
            	<h4><?php _e("Footer #4 Widget", 'genesis'); ?></h4>
            	<p><?php _e("This is an example of a widgeted area that you can place text to describe a particular product or service. You can also use other WordPress widgets such as recent posts, recent comments, a tag cloud or more.", 'genesis'); ?></p>
   	    	<?php endif; ?> 
    	</div><!-- end .footer-widgeted-4 -->
    </div><!-- end .wrap -->
</div><!-- end #footer-widgeted -->

Step #4

Lastly, you need to include the function which will “hook” the newly footer-widgeted.php file above the footer.

Open up your child theme’s functions.php file and look for this code:

// Remove comments from property posts
function agentpress_remove_property_comments($options, $setting) {
	if($setting == GENESIS_SETTINGS_FIELD) {
		$options['comments_posts'] = 0;
	}
	return $options;
}

And immediately after that place this code:

// Add widgeted footer section
add_action('genesis_before_footer', 'agentpress_include_footer_widgets'); 
function agentpress_include_footer_widgets() {
    require(CHILD_DIR.'/footer-widgeted.php');
}