• 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
  • Themes
    • Elegant Themes
    • Thrive Themes
    • OptimizePress
  • Hosting Reviews
    • WPEngine
    • Bluehost
    • A2 Hosting
    • Kinsta
    • WPX
  • Coupons
    • WPEngine
    • Flywheel
    • HostGator
    • A2 Hosting
    • WPX Hosting
Genesis WordPress Tutorials

How to Add a 3 Column Widgetized Footer in Genesis Theme

Last Updated on: July 22, 2015 Dev 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

Dev 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
  • Sorry You Are Not Allowed to Access This Page

    7 Ways to Fix the ‘Sorry You Are Not Allowed to Access This Page’ Error

  • How to Duplicate a Page in WordPress

    How to Duplicate a Page in WordPress

  • How to Create a Site Icon for Your WordPress Website

    How to Create a Site Icon for Your WordPress Website

Coupons

View more deals
  • Imagely Coupon
    20% OFF

    Imagely Coupon

    Photographers and WordPress are a match made in heaven. The flexi
    Get This Deal
  • 20% OFF

    Flothemes Coupon

    As an experienced photographer, it’s not always easy to get the
    Get This Deal
  • Nexcess coupon code
    Save 40%

    Nexcess Coupon

    Looking to save money on managed hosting from Nexcess?
    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 WordPress Blog (Step by Step Guide)
2How to Install WordPress - The Complete Guide
38 Best Options for Managed WordPress Hosting Compared
4The 6 Best WordPress Hosting Providers for 2021 Compared
5Top 9 Landing Page Plugins for WordPress (2021)
69 Best List Building Plugins for WordPress In 2021
7How to Fix the 500 Internal Server Error on Your WordPress Website
8Beaver Builder Review: Is it The Best Page Builder Plugin for WordPress (2021)?
9What is a Gravatar and Why You Should Get One
10Thrive Themes Review: A Look At The Full Membership
117 Best WordPress Migration Plugins Reviewed and Compared for 2021
12OptimizePress Review: Create Landing Pages with Ease
13How to Make a Website: Complete Beginner’s Guide
14WordPress.com vs WordPress.org: Which is Best for Me?
15Top 22 Best Free Stock Photo Resources For Your Site
1617 of the Best Google Fonts for 2021 (And How to Use Them in WordPress)
17LifterLMS Review: Is it The Ultimate WordPress LMS Plugin?
18How To Fix ‘503 Service Unavailable’ WordPress Error
1911 Best Contact Form Plugins for WordPress in 2021
20How to Use BackupBuddy – The Best Backup Solution for WP??
21How to Add a Custom Logo to Your WordPress Site
22Kinsta Review: Real Test Data + My Likes And Dislikes
23How to Fix Error Establishing a Database Connection in WordPress
24Thrive Architect Review – Best Landing Page Plugin for 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 2021 WPKube ® All Rights Reserved.
  • About
  • Contact
  • Site Terms
  • Disclosure
  • Privacy Policy