Home  ›  The Links  ›  Word Press Code Snippets/Tutorials  ›  Adding a Widgeted Footer in a Studio Press Theme

Adding a Widgeted Footer in a Studio Press Theme

Below is directions for creating a 3 column footer area for a Genesis Child Theme using the Simple Hooks Plugin.

First: Register Sidebars in functions.php:

genesis_register_sidebar(array(
	'name'=>'Home Bottom #1',
	'description' => 'This is the first column of the bottom section of the homepage.',
	'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget'  => '</div>',
	'before_title'=>'<h4 class="widgettitle">','after_title'=>'</h4>'
));
genesis_register_sidebar(array(
	'name'=>'Home Bottom #2',
	'description' => 'This is the second column of the bottom section of the homepage.',
	'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget'  => '</div>',
	'before_title'=>'<h4 class="widgettitle">','after_title'=>'</h4>'
));
genesis_register_sidebar(array(
	'name'=>'Home Bottom #3',
	'description' => 'This is the third column of the bottom section of the homepage.',
	'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget'  => '</div>',
	'before_title'=>'<h4 class="widgettitle">','after_title'=>'</h4>'
));
?>

2nd, add following code to stylesheet:


#footer_widgeted {

width: 960px;

margin: 0 auto 0;

padding: 0;

overflow: hidden;

}

 

#footer_widgeted a, #footer_widgeted a:visited {

color: #CC3300;

text-decoration: none;

}

 

#footer_widgeted a:hover {

color: #CC3300;

text-decoration: underline;

}

 

#footer_widgeted p {

margin: 0;

padding: 0 0 10px 0;

}

 

#footer_widgeted h2 {

color: #444444;

font-size: 16px;

font-family: Arial, Tahoma, Verdana;

font-weight: bold;

margin: 0 0 5px 0;

padding: 0;

text-decoration: none;

}

 

#footer_widgeted h2 a, #footer_widgeted h2 a:visited {

color: #444444;

text-decoration: none;

text-transform: none;

font-style: normal;

}

 

#footer_widgeted h2 a:hover {

color: #CC3300;

text-decoration: none;

}

 

#footer_widgeted h4 {

color: white;

font-size: 18px;

font-family: Arial, Tahoma, Verdana;

font-weight: bold;

margin: 0 0 10px 0;

padding: 0;

}

 

#footer_widgeted ul {

list-style-type: none;

margin: 0;

padding: 0;

}

 

#footer_widgeted ul li {

list-style-type: none;

margin: 0 0 5px 0;

padding: 0 0 5px 0;

border-bottom: 1px solid #DDDDDD;

}

 

#footer_widgeted ul ul {

list-style-type: none;

margin: 0;

padding: 0 0 10px 0;

}

 

#footer_widgeted ul li ul li {

margin: 0;

padding: 5px 0 0 0;

}

 

#footer_widgeted .widget {

margin: 0;

padding: 0 0 5px 0;

}

 

#footer_widgeted .textwidget {

margin: 0;

padding: 0;

}

 

#footer_widgeted .featuredpost .post, #footer_widgeted .featuredpage .page {

clear: both;

}

 

#footer_widgeted .featuredpost, #footer_widgeted .featuredpage {

clear: both;

}

 

#footer_widgeted .featuredpost img, #footer_widgeted .featuredpage img {

margin: 0 0 10px 0;

padding: 0;

border: 10px solid #F2F2F2;

}

 

#footer_widgeted .user-profile .avatar {

background: #FFFFFF;

margin: 0 0 -5px 0;

padding: 1px;

border: 4px solid #EEEEEE;

}

 

#footer_widgeted_left {

float: left;

width: 300px;

margin: 0;

padding: 10px 15px 0 0;

border-right: 1px dotted #373737;

height: 200px;

}

 

#footer_widgeted_center {

float: left;

width: 300px;

margin: 0;

padding: 10px 0 0 12px;

height: 200px;

}

 

#footer_widgeted_right {

float: right;

width: 300px;

margin: 0;

padding: 10px 0 0 20px;

height: 200px;

border-left: 1px dotted #373737;

3rd Add following code under genesis_footer Hook in simple hooks plugin and check Execute PHP on this hook?,

<div id="footer_widgeted">

	<div id="footer_widgeted_left">
		<?php if (!dynamic_sidebar('Home Bottom #4')) : ?>
		<?php endif; ?>
	</div>

<div id="footer_widgeted_center">
		<?php if (!dynamic_sidebar('Home Bottom #5')) : ?>
		<?php endif; ?>
	</div>

  <div id="footer_widgeted_right">
		<?php if (!dynamic_sidebar('Home Bottom #6')) : ?>
		<?php endif; ?>
	</div>
</div>

<div id="footer-cr"<p>Copyright &copy; <?php echo date('Y'); ?>  &middot; Windsor Direct. All rights reserved &middot;   <?php wp_loginout(); ?></p><div>

Leave a Reply

Help us improve the wiki Send Your Comments