Adding a fourth footer widget area

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:

// Adds a widget area. It gets registered automatically as part of the arra
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' )
    );
    return $default_widgets_area;
}

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:

// 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');
function my_footer_widget_class() {
    return 'span3';
}

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

// Adds a widget area. It gets registered automatically as part of the arra
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' )
    );
    return $default_widgets_area;
}

// Adds a class to style footer widgets
add_filter( 'footer_four_widget_class', 'my_footer_widget_class');
function my_footer_widget_class() {
    return 'span12';
}

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

add_filter( 'tc_footer_widgets', 'my_footer_widgets');
function my_footer_widgets( $default_widgets_area ) {
    $new_widgets_area = array('footer_four' => array(
          'name'                 => __( 'Footer Widget Area Four' , 'customizr' ),
          'description'          => __( 'Just use it as you want !' , 'customizr' )
    ) );
    return array_merge($new_widgets_area , $default_widgets_area);
}

// Adds a class to style footer widgets
add_filter( 'footer_four_widget_class', 'my_footer_widget_class');
function my_footer_widget_class() {
    return 'span12';
}

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).