How to Add a 3 Column Widgetized Footer in Genesis Theme

By default Genesis doesn’t come with a widgetized footer, to add the footer you have to manually insert the code in the child theme.In this post I will show you how to add a widgetized footer in your Genesis child theme. This tutorial will only work if your site is running on Genesis theme by StudioPress.
Step 1: Add the following code in your functions.php file (at the bottom of it). You can increase the number of columns you want to show by changing the number 3 to 4 or 5 in the code. Though, generally 3 column widgets work best.
Note: The latest version of Genesis theme comes with 3 columns widget, so no need to add any extra code.

That’s all there it is. If you have any questions or comments, please let us know in the comments section below.

Add a three-column set of widgets in Footer

You need to edit 2 files:

  • functions.php
  • style.css

Genesis is one of the most popular theme frameworks in the WordPress industry. Around half of my sites are running on Genesis framework including WPKube. If you want to learn more about Genesis and frameworks, in general, you should check out our in-depth post on theme frameworks.
/* —
Footer Widgets — */ .footer-widgets { background: #333; color: #999; clear: both; font-size: 14px; font-size: 1.4rem; padding: 40px 0 16px; padding: 4rem 0 1.6rem;
} .footer-widgets-1,
.footer-widgets-3 { width: 350px;
} .footer-widgets-2 { width: 360px;
} .footer-widgets-1 { margin-right: 40px;
} .footer-widgets-1,
.footer-widgets-2 { float: left;
} .footer-widgets-3 { float: right;
} .footer-widgets a { border-bottom: 1px solid #666; color: #999;
} .footer-widgets a:hover { color: #ccc;
} .footer-widgets .widget { margin-bottom: 24px; margin-bottom: 2.4rem;
} .footer-widgets .widgettitle { color: #fff;
} .footer-widgets li { list-style-type: none; margin-bottom: 6px; margin-bottom: 0.6rem; word-wrap: break-word;
} .footer-widgets .search-form { width: 100%;
}

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

footer widgets
A widgetized footer provides site operators with a low maintenance section of footer-area widgets that can be administered from within the WordPress interface.
Step 2: Now you want to add some styling or custom css to the widget, so it looks well designed and match the main styles of your theme. Add the following code in the style.css file.

Posted by WordPress Guru