• Categories
    • Tutorials
    • Beginners Guide
    • WordPress News
    • WordPress Security
    • Best WordPress Plugins
    • WordPress Themes
    • Product Reviews
    • WP Tips & Tricks
  • Guides
    • Start a Blog
    • Make a Website
    • WordPress Hosting
  • WordPress Hosting
    • A2 Hosting
    • HostGator
    • Bluehost
    • Cloudways
  • Managed Hosting
    • WPEngine
    • WPX
    • Kinsta
  • Coupons
    • WPEngine
    • Flywheel
    • Cloudways
    • A2 Hosting
    • WPX Hosting
Genesis WordPress Tutorials

How to Add a 3 Column Widgetized Footer in Genesis Theme

Last Updated on: July 22, 2015 Devesh Sharma 21 Comments

How to Add a 3 Column Widgetized Footer in Genesis Theme

Note: The latest version of Genesis theme comes with 3 columns widget, so no need to add any extra code.

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.

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.

A widgetized footer provides site operators with a low maintenance section of footer-area widgets that can be administered from within the WordPress interface.

Add a three-column set of widgets in Footer

You need to edit 2 files:

  • functions.php
  • style.css

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.


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

The PHP above registers three new widget areas in the footer area.

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.


/* ---
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%;
}

Step 3: The code part is done. Now visit your WordPress Dashboard > Appearance > Widgets and add some widgets to the new areas you’ve created. The new widgets / section would look something like this:

footer widgets

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

+ Share
Disclosure

Devesh Sharma

Devesh is the founder of WPKube. He has been building and managing WordPress websites for 8+ years and has been featured in Forbes, HuffPo, Entrepreneur, and more! Follow him on Twitter.

Related Posts

Back to all articles
  • How to Embed PDF Files in WordPress

    How to Embed PDF Files in WordPress

  • A HTTP Error When Uploading Images to WordPress: How to Find and Fix It

    A HTTP Error When Uploading Images to WordPress: How to Find and Fix It

  • How to Add WordPress Anchor Links in Different Ways

    How to Add WordPress Anchor Links in WordPress (3 Ways)

Coupons

View more deals
  • 10% OFF

    Elegant Themes Coupon

    You can’t move within WordPress circles without coming across E
    Get This Deal
  • wpengine coupon
    20% OFF

    WP Engine Coupon

    If you’re in search of a WordPress hosting company that deliver
    Get This Deal
  • Kraft Plugins Coupon Code
    10% OFF

    Kraft Plugins Coupon

    Business websites and WordPress go hand-in-hand. Of course, you w
    Get This Deal
21 Comments Leave a Reply
  1. Sourav says

    July 9, 2013 at 6:36 pm

    Thanks Dev, was looking all over for this! 😀

    Reply
    • Devesh says

      July 11, 2013 at 6:22 am

      Glad I could able to help you, thanks for stopping by Sourav :).

      Reply
      • Sourav says

        July 13, 2013 at 1:49 pm

        Just tried it out. Worked like a charm! 😀

        Reply
  2. Ebuka James says

    July 15, 2013 at 7:47 pm

    wonderful post, should i just add the 3 footer widgets without any code on it?

    Reply
  3. Jerralyn Tanoc says

    September 20, 2013 at 7:21 am

    Cool, Thank you for this guide on how to create a three column widget. Perfect help for beginners.

    Reply
  4. Murat "Seaman" DEMIRAG says

    October 31, 2013 at 5:33 pm

    Hello there,

    It is not working. Only my footer 1 (left) is working properly.

    :s

    Reply
  5. Mohamed says

    May 13, 2014 at 7:31 am

    Thank you very much for your help. It saved several hours of my time.

    Reply
  6. Emilie says

    January 28, 2015 at 6:29 pm

    Hey! Thanks for writing this post – very helpful! I’ve had one strange issue come up though where the third column is outside the .footer-widgets div. Any thoughts on why that is? Thanks!

    Reply
  7. Arif Hossain says

    September 11, 2015 at 9:48 pm

    Hi Thanks for your post this is easy way for adding footer Genesis Theme, it is a helpful for all Genesis Theme user. i try this tricks for my website.

    Reply
    • Devesh Sharma says

      September 12, 2015 at 2:43 am

      Glad I could be of help, Arif. Thanks for the comment.

      Reply
  8. Olusola says

    September 19, 2015 at 9:15 am

    Looks like i did something wrong
    I had a backup file of my function.php file and styles.css in a notepad. After following the process, i updated to save the recent changes and my site refuses to come up again. Just showing a blank page (no error messages). SIte is currently down and I cant even log in to my dashboard. Any suggestion?

    Reply
    • Devesh Sharma says

      September 19, 2015 at 12:02 pm

      No need to worry, Olusola. You can easily fix it by uploading the function.php and style.css file to your server via FTP or cPanel.

      Reply
  9. Tim says

    November 13, 2015 at 3:44 am

    FYI doesn’t work with Altitude Pro.

    Reply
    • Robert says

      June 4, 2016 at 9:59 am

      Look for

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

      replace with

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

      Reply
  10. Abdul Samad says

    February 22, 2016 at 1:19 am

    Really A Helpful Post 😀 😀 😀
    You Saved My Dollars!
    Thanks Dear 😀 😀 😀

    Reply
  11. Faishal says

    April 1, 2016 at 8:01 am

    Hi, thaks for sharing. but after i tried, the widget on footer still only one. Whats wrong? im using genesis latest version

    Reply
  12. Arslan says

    April 30, 2016 at 2:32 pm

    Thank you so much. It really helped me.

    Reply
  13. Agus Tamanuri says

    December 30, 2016 at 6:10 am

    Thank you so much. It really helped me.

    Reply
  14. Ronak Prajapati says

    September 2, 2017 at 11:59 am

    Thanks.. tutorial is awesome but i have 1 problem With these codes i am able to get 3 footer widget but in mobile site 3rd widget is getting very ahead. Please help me. My website is undercoverapk.net please see in mobile version

    Reply
  15. Tamara says

    June 4, 2018 at 4:34 pm

    Hello 🙂

    Thank you!

    I could add the 3 to the functions.php file but I cannot find the footer widget paragraph where to add the “break” in my style.css…. Can someone help me maybe? 🙂

    Thank you very much!!

    Reply
  16. Mike Mahaffey says

    July 31, 2019 at 6:31 pm

    The code doesn’t work in the Essence Pro theme in 2018 and I just hate that……..

    Reply

Leave a Reply Cancel reply

Full Disclosure This post may contain affiliate links, meaning that if you click on one of the links and purchase an item, we may receive a commission (at no additional cost to you). All opinions are our own and we do not accept payments for positive reviews.

THE BEST OF WPKUBE

Some of the best content we have published so far.

BEGINNER GUIDES & REVIEWS

1How to Start a Blog in 2022 (Step by Step Guide)
28 Best Cheap WordPress Hosting Providers in 2022 (From $1.99)
310 Best WordPress Hosting Options Compared for 2022 (Pros & Cons)
48 Best Managed WordPress Hosting Compared for 2022
55 Best WooCommerce Hosting Providers Compared in 2022 (All Budgets)
6Top 9 Landing Page Plugins for WordPress (2022)
79 Best List Building Plugins for WordPress In 2022
8How to Fix the 500 Internal Server Error on Your WordPress Website
9Beaver Builder Review: Is it The Best Page Builder Plugin for WordPress (2022)?
10Thrive Themes Review: A Look At The Full Membership
11OptimizePress Review: Create Landing Pages with Ease
12How to Make a Website: Complete Beginner’s Guide
13WordPress.com vs WordPress.org: Which is Best for Me?
14Top 22 Best Free Stock Photo Resources For Your Site
1517 of the Best Google Fonts for 2022 (And How to Use Them in WordPress)
16How To Fix ‘503 Service Unavailable’ WordPress Error
1711 Best Contact Form Plugins for WordPress in 2022
18How to Add a Custom Logo to Your WordPress Site
19How to Fix Error Establishing a Database Connection in WordPress

WPEngine: 50% OFF Deal

Save 50% on one of the best managed hosting providers.

Get this Deal

Flywheel(our review)

Featured In Forbes Huffpost Entrepreneur SEJ

About WPKube

WPKube is an online WordPress resource which focuses on WordPress tutorials, How-to’s, guides, plugins, news, and more. We aim to provide the most comprehensive beginner’s guides to anything about WordPress — from installing plugins, themes, automated installs and setups, to creating and setting up pages for your website.

We have over 500+ tutorials, guides, product reviews, tips, and tricks about WordPress. Founded by Devesh Sharma, the main goal of this site is to provide useful information on anything and everything WordPress.

Twitter Facebook

Useful Links

  • Behind the Scenes
  • Beginner Guides
  • WordPress Hosting
  • WooCommerce Themes
  • MeridianThemes
  • Exclusive WordPress Deals
View All Guides »

Reviews

  • WPEngine 33% OFF
  • Thrive Leads
  • Flywheel 33% OFF
  • Divi Theme 20% OFF
  • Thrive Architect
  • Elegant Themes
Reviews »

Deals

  • InMotion Hosting
  • LifterLMS Coupon
  • LiquidWeb Coupon
  • WPEngine Coupon
  • A2 Hosting
  • FloThemes
More Deals »
© Copyright 2022 WPKube ® All Rights Reserved.
  • About
  • Contact
  • Site Terms
  • Disclosure
  • Privacy Policy