How to Add Widgetized Footer in Genesis Framework
Widgetized footers add value to WordPress themes because they increase their flexibility and ease of use. If a person who installs a theme with a widgetized footer wants to change the footer content, rather than editing code or needing to pay someone else to do it, he can drag and drop widgets for the footer from within WordPress. In regular WordPress themes, all you need to do is register sidebars in the footer, call them in the footer template and write some CSS to organize the widgetized sections into columns. Genesis requires you to make these customizations in the functions file instead, but the method is similar.
Other People Are Reading
Instructions
-
-
1
Open the “functions.php” file of your child theme in Notepad or a code editor. Remove the default footer by inserting this code at the bottom of the file:
remove_action('genesis_footer', 'genesis_do_footer');
-
2
Start a new line in “functions.php” and add this code to create three widgetized sections:
genesis_register_sidebar(array(
'name' => 'Left Footer',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h4 class=”widgettitle”>',
'after_title' => '</h4>'
));
genesis_register_sidebar(array(
'name' => 'Center Footer',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h4 class=”widgettitle”>',
'after_title' => '</h4>'
));
genesis_register_sidebar(array(
'name' => 'Right Footer',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h4 class=”widgettitle”>',
'after_title' => '</h4>'
)); -
-
3
Use “add_action()” to hook your custom footer in to the “genesis_footer()” function. You must then write a function that outputs the HTML and PHP that creates the actual footer:
add_action('genesis_footer', 'widgets_footer');
function widgets_footer() : ?>
<div id=”footer”>
<div id=”left_footer” class=”widget_footer”>
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Left Footer')) : ?>
<?php endif; ?>
</div>
<div id=”center_footer” class=”widget_footer”>
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Left Footer')) : ?>
<?php endif; ?>
</div>
<div id=”right_footer” class=”widget_footer”>
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Left Footer')) : ?>
<?php endif; ?>
</div>
</div>
<?php }As you can see, the code breaks out of PHP and uses HTML to create divs for the widget areas.
-
4
Open the “style.css” file for your Genesis child theme. Set up your three columns:
#footer {
width: 960px;
margin: 0 auto;
}
.widget_footer {
width: 33%;
float: left;
}You can now style each individual footer as you like, using the ID names of their respective divs. Style content in all footers by adding to the “.widget_footer {}” style rule.
-
1
