Genesis Tutorials

Tips, Tricks, and How-tos for the Genesis Theme Framework

You are here: Home / Uncategorized / Genesis Footer

Uncategorized

Genesis Footer

by

Google+0

Website footers have become so much more than the end of the scroll for a site. Once a place to only find some credit to the designer or copyright/trademarks of the blog, they have now evolved into their own significant part of the site. They contain anything from contact information and twitter feeds, to contact forms and any extra information or functionality that really increases the usability of a site.

The default genesis child theme has a “go to top” link and a credit section, both of which are filterable. If you are looking to just change the text of either, you may want to check out these other tutorials.

Changing “Return to Top of the Page” text in the footer.
Giving Credit Where Credit Is Due

If not, continue on.

In addition to the filters available in the footer, it is possible to unhook the entire area and replace it with custom code or a widget-ed area. This tutorial will go over removing the default footer and replacing it with a widget-ed area. With tons of widgets available, the possibilities of creating a full functioning footer custom to your needs is endless and as simple as drag and drop; after, of course, following these steps below.

Removing the default footer:
to remove the content of the footer simply add the following to your child theme’s functions.php
remove_action('genesis_footer', 'genesis_do_footer');

This code will register our widget areas for use in our footer. Open your child theme’s function.php and add the following code.

genesis_register_sidebar(array(
	'name'=>'Footer Left',
	'description' => 'This is the first column of the footer section.',
	'before_title'=>'<h4 class="widgettitle">','after_title'=>'</h4>'
));
genesis_register_sidebar(array(
	'name'=>'Footer Middle',
	'description' => 'This is the second column of the footer section. Half the size of The First column this section is great for lists like a blogroll widget. ',
	'before_title'=>'<h4 class="widgettitle">','after_title'=>'</h4>'
));
genesis_register_sidebar(array(
	'name'=>'Footer Right',
	'description' => 'This is the last column of the footer section.',
	'before_title'=>'<h4 class="widgettitle">','after_title'=>'</h4>'
));
genesis_register_sidebar(array(
	'name'=>'Footer Bar',
	'description' => 'This is the row for below the 3 columns.',
	'before_title'=>'<h4 class="widgettitle">','after_title'=>'</h4>'
));

adding our custom footer code:

add_action('genesis_footer', 'do_custom_footer');
function do_custom_footer() { ?>

<div id="footer-widgetized">
    <div class="wrap">
    	<div class="footer-col1">
        	<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Left') ) : ?>
            	<h4><?php _e("Footer Left Widget", 'genesis'); ?></h4>
            	<p><?php _e("This is an example of a widgeted area. You can add content to this area by visiting your Widgets Panel and adding new widgets to this area.", 'genesis'); ?></p>
	    	<?php endif; ?>
   		</div><!-- end .footer-col1 -->
    	<div class="footer-col2">
        	<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Middle') ) : ?>
            	<h4><?php _e("Footer Middle Widget", 'genesis'); ?></h4>
            	<p><?php _e("This is an example of a widgeted area. You can add content to this area by visiting your Widgets Panel and adding new widgets to this area.", 'genesis'); ?></p>
   	    	<?php endif; ?>
    	</div><!-- end .footer-col2 -->
    	<div class="footer-col3">
        	<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Right') ) : ?>
            	<h4><?php _e("Footer Right Widget", 'genesis'); ?></h4>
            	<p><?php _e("This is an example of a widgeted area. You can add content to this area by visiting your Widgets Panel and adding new widgets to this area.", 'genesis'); ?></p>
	    	<?php endif; ?>
    	</div><!-- end .footer-col3 -->
    	<div class="footer-bar">
        	<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Bar') ) : ?>
            	<h4><?php _e("Footer Bar", 'genesis'); ?></h4>
            	<p><?php _e("This is an example of a widgeted area. You can add content to this area by visiting your Widgets Panel and adding new widgets to this area.", 'genesis'); ?></p>
   	    	<?php endif; ?>
    	</div><!-- end .footer-bar -->
    </div><!-- end .wrap -->
</div><!-- end #footer-widgetized -->

<?php }

* Bonus
This is just basic structure to set you in the right direction.


#footer-widgetized {
	width: 960px;
	font-size: 11px;
	margin: 0 auto 0;
	padding: 0;
	overflow: hidden;
	clear: both;
	}

#footer-widgetized .wrap {
	width: 940px;
	margin: 0 auto 0;
	padding: 0;
	}

#footer-widgetized .widget {
	background: none;
	margin: 0;
	padding: 0;
	border: none;
	}

.footer-col1 {
	width: 500px;
	float: left;
	margin: 0;
	padding: 0 20px 0 0;
	}

.footer-col2 {
	width: 200px;
	float: left;
	margin: 0;
	padding: 0 20px 0 0;
	}

.footer-col3 {
	width: 200px;
	float: right;
	margin: 0;
	padding: 0 0 0 0;
	}

.footer-bar {
	width: 940px;
	float: right;
	margin: 0;
	padding: 0;
	}
#footer-widgetized .footer-bar li {
	display:inline;
	padding:5px;
	}

Comments

  3. Just when I was about to kill the sample child theme I found your post.

    You made my day!! Thanks for sharing.

    Debbie

    • So glad you didn’t kill the sample Child! That would be tragic and may have the GenesisWP police after you or something by now :p.

      Anyways, glad I could make you day and that my tutorial was helpful.

  4. I found your tutorial very interesting. I think is will give a great look. I updated your code to my in progress blog. I am puzzeled though how do you create the widget to put in the widget area? I am learning PHP and I am probably a little slow. If you have a minute I would appreciate asome clues to get this going.

    Thanks,
    Doak

    • When in the admin under Appearance > Widgets you will see newly create sidebar regions to add any widgets you like. There any many plug-ins in the WordPress repo ( http://wordpress.org/extend/plugins/ ) you can use to find useful widget as well as some great built in genesis widgets like the Featured post widget, E-new & Updates widget and more.

      The other thing you can do is replace any the

            
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Left') ) : ?>
                <h4><?php _e("Footer Left Widget", 'genesis'); ?></h4>
                <p><?php _e("This is an example of a widgeted area. You can add content to this area by visiting your Widgets Panel and adding new widgets to this area.", 'genesis'); ?></p>
<?php endif; ?>

      with your own html or php code.

  5. Thanks, very helpful!
    I am also trying to make my footer full-width. Because the #wrap div is at the end of the footer content, I am not able to accomplish this (with the way I know how to make full width footers anyway).

    I was able to make it work on the home page by modifying the home.php/footer.php code and moving the #wrap div just before the call for the footer. This of course only fixes the home page and all single post and archive pages maintain the old structure.

    I would rather not have to modify all of the affected files individually – is there something else I can add to the functions.php file to move the #wrap div before the footer in all instances?

  6. I’m trying to remove that footer completely that says return to top of page copyright @2011 genesis, i took your advice and added remove_action(‘genesis_footer’, ‘genesis_do_footer’); to the functions.php. It got rid of the text but the bar is still there. how do i remove the bar?

    • Since v1.2 Genesis functionized the wrapping of the footer, so you could remove the markup and/or change it. The code below will remove the footer entirely including markup.

      remove_action('genesis_footer', 'genesis_footer_markup_open', 5);
remove_action('genesis_footer', 'genesis_do_footer');
remove_action('genesis_footer', 'genesis_footer_markup_close', 15);

  8. Hi does anyone know How to add an additional Middle Row of Widgets to the Enterprise Theme

    ie second middle row
    .home-middle-4 .home-middle-5 .home-middle-5

  10. Yes! Thank you so much! I was searching for a way to remove the footer and everyone was giving these long technical ways. If I only knew it was one line of code added to the functions file. You rock!

  14. Thank you Chris, I have been able to resolve the footer widgets issue on a client’s site. Thank you for the help. I should follow you on Twitter!

Trackbacks