• 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
  • How to Increase the Memory Limit in WordPress

    How to Increase the Memory Limit in WordPress

  • 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 Use Git to Push Your Local Site Live

    How to Use Git to Push Your Local Site Live

Coupons

View more deals
  • Recipe Card Blocks Coupon
    15% OFF

    Recipe Card Blocks Coupon

    Running a cooking or food website can be fun (and tasty) – but
    Get This Deal
  • WP 2FA Coupon
    20% OFF

    WP 2FA Coupon

    Security should be at the forefront of all site owner’s min
    Get This Deal
  • Themskingdom Coupon
    20% OFF

    ThemesKingdom Coupon

    First impressions count. As such, you’ll want a WordPress t
    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

18 Best Cheap WordPress Hosting Providers in 2023 (From $1.99)
210 Best WordPress Hosting Options for 2023 (Pros & Cons)
38 Best Managed WordPress Hosting Providers for 2023 Compared
45 Best WooCommerce Hosting Providers Compared in 2023 (All Budgets)
5Top 9 Landing Page Plugins for WordPress (2023)
69 Best List Building Plugins for WordPress In 2023
7How to Fix the 500 Internal Server Error on Your WordPress Website
8Thrive Themes Review: A Look At The Full Membership
9Beaver Builder Review: Is it The Best Page Builder Plugin for WordPress (2023)?
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
1317 of the Best Google Fonts for 2023 (And How to Use Them in WordPress)
14How to Start a Blog in 2022 (Step by Step Guide)
15How To Fix ‘503 Service Unavailable’ WordPress Error
1611 Best Contact Form Plugins for WordPress in 2023
17How to Add a Custom Logo to Your WordPress Site
18How 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

Flywheel(our review)

Our Newsletter

Get awesome content delivered straight to your inbox.

Thank you!

You have successfully joined our subscriber list.

.
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 2023 WPKube ® All Rights Reserved.
  • Contact
  • Site Terms
  • Disclosure
  • Privacy Policy