How to Add Footer Widgets in Genesis Themes

Widgetized footers on WordPress sites are really handy as it is a way to put some bottom of the site viewable content for visitors on your website. It is your last opportunity to convert visitors, outside pop-up notifications, re-directions to thank you pages, lead generation forms, and more. It also allows for organizing content to seem more balanced on your website’s design.

Not everyone has to have footer widgets on their website. However, for those wanting to use them, and are using the StudioPress Genesis framework, you can add them into your site. For example, if you see the image below, it is a screenshot of how my footer looks at the bottom of my website, for most pages.

This article is a tutorial on how to add a widgetized footer in Genesis Themes without a plugin.

How to Add Footer Widgets in Genesis Themes Without A Plugin

For this tutorial we are going to do 3 columns. Please note that you can do this with more columns, but you will have to adjust your CSS, adjust the code in this tutorial, and register more widgets in your theme’s functions.php template.

Note: This should work in ALL current Genesis child theme’s AND for ones you are building. Also, you should NOT be editing the Genesis framework. You SHOULD be creating a child theme when adding modifications to your site.

Genesis has by default a hook for footer widgets a built in code. To add theme support, you only have to put the following code into your functions.php:

/** Add support for 3-column footer widgets */
add_theme_support( 'genesis-footer-widgets', 3 );

Side note: This is referred to from the file called widgetize.php in the Genesis core under lib/functions/ and footer.php in lib/structure/

You can either choose to keep 3 widgets, or change the number 3 to whatever you like.

This code will register 3 widgets and product the code automatically because it is built into the core Genesis theme framework.

You can either choose to keep 3 widgets, or change the number 3 to whatever you like.

This code will register 3 widgets and product the code automatically because it is built into the core Genesis theme framework.

From there, you can customize the look via CSS.

However, you can also do it the long way by creating your own. Also, this part of the tutorial will help you understand the widget’s markup in order to customize with CSS or add other elements.

Side Note: CSS and filter for Genesis footer widgets are courtesy of Brian Gardner.

/*
Footer Widgets
---------------------------------------------------------------------- */
 
#footer-widgets {
	clear: both;
	margin: 0 auto 10px;
	overflow: hidden;
	width: 960px;
}
 
#footer-widgets .widget {
	background: none;
	border: none;
	margin: 0 0 15px;
	padding: 0;
}
 
#footer-widgets p {
	padding: 0 0 10px;
}

#footer-widgets h4 {
	padding: 0 0 10px;
}
 
#footer-widgets ul {
	margin: 0;
}
 
#footer-widgets ul li {
	margin: 0 0 0 20px;
}
 
.footer-widgets-1 {
	float: left;
	margin: 0 20px 0 0;
	width: 300px;
}
 
.footer-widgets-2 {
	float: left;
	width: 300px;
}
 
.footer-widgets-3 {
	float: right;
	width: 300px;
}

This is a very basic code that you can adapt for your own. If you wish to understand more on customizing your CSS for your footer widgets, you are more than welcome to view the source of my site and check out my style sheet for this theme.

The Long Way On How To Add Footer Widgets In Genesis Themes

I have found a lot of tutorials also mentioning that you should put the following code in your functions.php and creating a template. Please note that this is NOT necessary unless you are wanting to add specific markup (like HTML) to your footer widgets. Otherwise, you really do not have to put this code.

This is actually pulled and adapted from the Metric child theme for the Genesis framework.

This goes into the functions.php

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

Replace yourthemename with the name of your child theme. For example, in the Metric child theme, this function was called metric_include_footer_widgets

The following code basically gives the division layer (DIV) for the footer widgets, and designates each individual footer. This code goes in a separate file. We will use the footer-widgeted.php as according to the code given above.

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

Once you have created this file, you can load it to your theme’s files.

Again, this is NOT necessary. And if you do use this, you WILL have to register custom widgets as they have to coordinate with your footer widget names as specified in the code right above this paragraph. Include is filler text so you have some default words while you develop.

If you want to add more widgets, then you will have to add more markup. For example, with the code above, just 1 widget is:

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

If you do choose to go the long way in adding footer widgets, then your sidebar widgets should be registered as followed:

/** Register widget areas */
genesis_register_sidebar( array(
	'id'			=> 'footer-left',
	'name'			=> __( 'Footer Left', 'your child theme name' ),
	'description'	=> __( 'This is the footer left section.', 'your child theme name' ),
) );
genesis_register_sidebar( array(
	'id'			=> 'footer-middle',
	'name'			=> __( 'Footer Middle', 'your child theme name' ),
	'description'	=> __( 'This is the footer middle section.', 'your child theme name' ),
) );
genesis_register_sidebar( array(
	'id'			=> 'footer-right',
	'name'			=> __( 'Footer Right', 'your child theme name' ),
	'description'	=> __( 'This is the footer right section.', 'your child theme name' ),
) );

If you need to add more widgets, you will have to register another sidebar.

The last would be CSS in order to complete this. Again, if you need to add more sidebars, you just need to add more CSS classes to coordinate with the extra footer widgets. If you need In fact, you can use and adapt the CSS from the first tutorial. Keep in mind that the more widgets you do add, the thinner the widget will have to be coded.

How to Add Footer Widgets in Genesis Themes With A Plugin

Aside from using code, if you prefer to use a plugin, Genesis Widgetized Footer is an option. There are a few other plugins available, so you are welcome to search the WordPress Plugin Repository for Genesis footer widgets.

Do you use Genesis? Do you use footer widgets in your Genesis child theme? Which way do you prefer to add footer widgets?