• 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
    • Rocket.net
    • 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
  • Dealing with WordPress RSS Feed Errors: How to Identify and Fix Them

    Dealing with WordPress RSS Feed Errors: How to Identify and Fix Them

  • What is WordPress? A Beginner's Guide!

    What is WordPress? What Can it do & Is it Right for You? A Beginner’s Guide

  • How to Set Up WordPress Two-Factor Authentication: WP 2FA Review

    How to Set Up WordPress Two-Factor Authentication: WP 2FA Review

Coupons

View more deals
  • 10% OFF

    Elegant Themes Coupon

    You can’t move within WordPress circles without coming across E
    Get This Deal
  • pressable logo
    15% OFF

    Pressable Coupon

    If you’re looking for a high-quality managed WordPress hosting
    Get This Deal
  • Teachable Coupon Code
    10% OFF

    Teachable Coupon

    Building an online course business requires the right platform to
    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.

Our Newsletter

Get awesome content delivered straight to your inbox.

Thank you!

You have successfully joined our subscriber list.

.

THE BEST OF WPKUBE

Some of the best content we have published so far.

BEGINNER GUIDES & REVIEWS

110 Best WordPress Hosting Options for 2025 (Pros & Cons)
28 Best Managed WordPress Hosting Providers for 2025 Compared
38 Best Cheap WordPress Hosting Providers in 2025 (From $1.99)
46 Best WordPress LMS Plugins – Detailed Comparison & Review for 2024
55 Best WooCommerce Hosting Providers Compared in 2024 (All Budgets)
66 Best WordPress Landing Page Plugins Compared + Recommendations (2024)
79 Best List Building Plugins for WordPress In 2024
8How to Fix the 500 Internal Server Error on Your WordPress Website
9Beaver Builder Review: Honest Thoughts + Pros and Cons (2025)
10OptimizePress Review: Create Landing Pages with Ease
11How to Make a Website: Complete Beginner’s Guide
12Top 22 Best Free Stock Photo Resources For Your Site
13How to Start a Blog in 2022 (Step by Step Guide)
14How To Fix ‘503 Service Unavailable’ WordPress Error
1511 Best Contact Form Plugins for WordPress in 2025
16How to Add a Custom Logo to Your WordPress Site
17How to Fix Error Establishing a Database Connection in WordPress

WPX Hosting: 50% OFF

Save 50% on WPX Hosting using our exclusive coupon code.

Get this Deal
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
  • WPX Hosting
  • Flywheel 33% OFF
  • Divi Theme 20% OFF
  • Systeme.io
  • Elegant Themes
Reviews »

Deals

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