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 © <?php echo date('Y'); ?> · Windsor Direct. All rights reserved · <?php wp_loginout(); ?></p><div>

