Adding a fourth footer widget area


Note :This snippet works only with the Classical style option. The Classical style option can be enabled in Appearance > Customize > Advanced > Theme Style. More about the theme style option here


I showed you how to add a widget area after the header here. But what if you feel you don’t have enough widget areas in the footer? Luckily, there are several filters in Customizr that we can use for this.

First you need to add the widget area, then you need to change its CSS class, so it will line up properly with the others. Below I show you how.

 

Adding the widget area

Unlike when we were adding a widget area to the header, where we had to register (create) our own widget area, this time we’re simply adding another to a series that Nicolas has already created. Once we add it, his “widget factory” will take care of its creation, along with all the others.

Add the following code to your functions.php:

 

This will set up the widget area and you will be able to see it in Appearance > Widgets. However, it wraps on to the next row. We still need to change the spacing to accommodate it in the same row as the others.

 

Spacing your widget area correctly with the others

Again, Nicolas has given us a hook to do this. Add the following to your functions.php, below the code you pasted above:

Using the Bootstrap scaffolding terminology, this gives each footer widget area a “span” of span3 — each taking up one quarter of the full span12 width.

 

Use case 1 : adding a fourth widget area below (after) the three defaults footer widget area

 

Use case 2 : adding a fourth widget area above (before) the three defaults footer widget area

 

Where to copy/paste this code? => in your functions.php file. We strongly recommend you create a child theme. Download a start-up child theme here.

Remember: you shouldn’t edit the parent theme’s functions.php.

That’s it! Now go to Appearance > Widgets, where you’ll find your widget area, ready to be filled with whatever you want. Drag and drop new widgets into the area and click the dropdowns to delete the widgets you don’t want.

You can style your widget areas as before (as explained in the FAQ).


Related Snippets you may also like


We can help you to implement this snippet

Coding is our job and we know WordPress inside and out. We can help you to customize your website with small chunks of code snippets like this one.

Send us your request and we'll get back to you quickly.



34 thoughts on “Adding a fourth footer widget area

  • AndrewZak

    I would have entered the fourth widget after the three already present
    (case 1), more than one-fifth over the four widgets .. in practice as
    the “case 1” and “Case 2” of this article, but put both, how can I do?

  • AndrewZak

    I would have entered the fourth widget after the three already present (case 1), more than one-fifth over the four widgets .. in practice as the “case 1” and “Case 2” of this article, but put both, how can I do?

  • Bogdan Alexandru

    I’ve seen how to add a 4th footer widget area, but how about to delete a footer area? How can I make the modification to have only 1 full-width footer area instead of 3?

  • Isabelle Larrodé

    Hi DAvid,
    it seems you’re not using a child theme.
    By the way, did you put this code in your functions.php ?

  • David Londono

    I have followed the instructions to the letter and with child theme functions,php but the forth footer widget still does not display in widgets, where there remains only three footer area widget

    I have the space for the fourth wigdet but not on the menu the option to customize

    http://once14.cl/bci2

  • Ashot

    Great snippet thanks for the awesome work!

    Is it possible to change the widget sizing? For example if we have 4 widgets each one of them takes up 25% of the space, let’s say I wanted to have 25% – 30% – 25% – 20% would that be possible?

    Help would be greatly appreciated!

  • Evgeny

    Hi! I want to add two widget areas below – on the left and on the right, but I need the left widget area to be span8 and right widget area to be span4 or to be more precise I want the left WA a bit more wider than the right WA and all it to be responsive. Can it be achieved?

  • Helena

    Hi,

    Thanks for this snippet.
    It does work with my site. WP 4.1 Customizr 3.2.17.
    I have been trying to get it horizontal instead of a list (vertical), but was not enable to get that.
    Can anyone help me customizing the secondary menu to be horizontal?

    Thanks in advance for all assistance.

    • gene coon

      How do I change just the background color of the new fourth widget area. I added below the original three. http://www.legal-organizer.com is my site. I have tried to add custom css by adding this code:

      but the color does not change from the other three. Any suggestions are greatly appreciated. thanks

  • Evgeny

    Hi!

    Does it work with the 3.2.3 version? I tried this code in my child theme’s functions.php and it breaks site. As far as I understand for adding the fourth widget area below, first I must paste the “Adding the widget area” code into the functions.php, second “Spacing your widget area correctly with the others” code and finally the “Use case 1 : adding a fourth widget area below (after) the three defaults footer widget area” code. After the first snippet added and saved, site breaks and it breaks too if I add only the third final code. I put all in the marks.

  • Zach

    Hey guys! Great snippets! I have a question; based on the “adding a fourth widget area below the three defaults footer widget area”, can I add it on top of the first 3 widgets instead? Would I be able to do that?

    Thanks a bunch and keep up the good work! 🙂

  • daniela

    thanks a mill, was able to add the 4th widget.
    but would like to add a 2nd row:
    4th, 5th, 6th widget.
    tried various but without success. any hint?

  • Wahab Khan

    Hi Theme Developers,

    My question is, can we have different Widget footers for different pages?
    1:
    I appreciated that the slider is so nicely customizable that every new page can have a different slider, but it would have been more nice if we had different (customized) widget footers for each different pages, in that context we could have that particular page’s related information links in the widget footer area. It would have been more presentable though. Any solution is much appreciated.
    2:
    My second question is, can we have customized side bars with customized menu or links with different pages? the Idea is the same as above. I hope the developers get it right what I put here in my layman language.

    Thanks in advance.
    Wahab Khan

    PS: To all Theme Users: Kindly retain the theme credits, that is the least the developers get from users like us…

    • ElectricFeet Post author

      1. The nature of the footer widgets is that they are the same on all pages, so I shouldn’t imagine that this would become a feature.

      One way to achieve what you want would be to code it in php, adding only the widgets you want to the individual pages. This would be a fair amount of work, so it depends if you’re up to doing the coding.

      2. Same as above.

      If you want to do this, head over to the WordPress Customizr forum and ask there. Comments aren’t a good place to do support.

  • Frank King

    Thanks for this code! I do need a 5th footer widget and tried adding the same code but changing “four” to “five” in all instances. I got thi error:

    Fatal error: Cannot redeclare my_footer_widgets()

    Any quick solutuoins?

    • Marcus Crutcher

      I was searching this topic & didn’t see a reply to this question. Below is the code I used to add the 4th & 5th sections.

      add_filter( ‘tc_footer_widgets’, ‘my_footer_widgets’);
      function my_footer_widgets( $default_widgets_area ) {
      $default_widgets_area[‘footer_four’] = array(
      ‘name’ => __( ‘Footer Widget Area Four’ , ‘customizr’ ),
      ‘description’ => __( ‘Just use it as you want !’ , ‘customizr’ )
      );
      $default_widgets_area[‘footer_five’] = array(
      ‘name’ => __( ‘Footer Widget Area Five’ , ‘customizr’ ),
      ‘description’ => __( ‘Just use it as you want !’ , ‘customizr’ )
      );
      return $default_widgets_area;
      }

      You’ll also need to add a line to the styling code. Your style code will now look something like this:

      // Style all the footer widgets so they take up the right space
      add_filter( ‘footer_one_widget_class’, ‘my_footer_widget_class’);
      add_filter( ‘footer_two_widget_class’, ‘my_footer_widget_class’);
      add_filter( ‘footer_three_widget_class’, ‘my_footer_widget_class’);
      add_filter( ‘footer_four_widget_class’, ‘my_footer_widget_class’);
      add_filter( ‘footer_five_widget_class’, ‘my_footer_widget_class’);
      function my_footer_widget_class() {
      return ‘span2’;
      }

  • Cheryl

    Added new widget area which only shows on my home page, but have no idea how to style them so there is one row and four columns, help please

  • Gerry

    I have followed the instructions to the letter and with child theme functions,php but the forth footer widget still does not display in widgets, where there remains only three footer area widgets.

  • Karina

    I have been using the Child Theme to input codes into the Editor from the dashboard. I inserted the code for “Use case : adding a fourth widget area below the three defaults footer widget area” into functions.php after the previous codes for adding the 4th widget area, and suddenly I have the following anytime I want to access my website or wordpress:

    “Fatal error: Cannot redeclare my_footer_widgets() (previously declared in /home/ontar924/public_html/wp-content/themes/CustomizrChild/functions.php:16) in /home/ontar924/public_html/wp-content/themes/CustomizrChild/functions.php on line 39”

    HELP please. How do I get back into Editor to delete that last piece of code that gave me the fatal error?? I am a beginner WP user and hope all my information and work is not deleted!

  • Kevjon

    I don’t understand where to put this code.
    You say put it in functions.php, then you say you should never edit the themes functions.php!!
    So what do I do?
    A child theme has only style.css, no functions.php

Comments are closed.