At the moment this site is a child theme of the-bootstrap theme and one of the features that I wanted was a widgetized footer. I wanted to have three widget areas (sidebars) so I could easily change the content via Appearance -> Widgets and have them named so I can easily identify them, eg, Footer 1, Footer 2 and Footer 3.

Firstly, let’s get one thing straight! If you are making modifications to a theme, please do it via a child theme (WordPress Codex – Child Themes). The good people of WordPress will love you for it and send you a WordPress Unicorn for your birthday!

Here is how I added that feature to my the-bootstrap child theme.

Adding The Function

In your child theme functions.php file I added the following code.

// Adding Footer Widgets Function
function footer_widgets()  {
  register_sidebar(array(
    'name'          => __( 'Footer 1', 'the-bootstrap' ),
    'id'            => 'footer-1',
    'before_widget' => '<aside class="widget well %2$s" id="%1$s">',
    'after_widget'  => '</aside>',
    'before_title'  => '<h2 class="widget-title">',
    'after_title'   => '</h2>',
  ) );

  register_sidebar(array(
    'name'          => __( 'Footer 2', 'the-bootstrap' ),
    'id'            => 'footer-2',
    'before_widget' => '<aside class="widget well %2$s" id="%1$s">',
    'after_widget'  => '</aside>',
    'before_title'  => '<h2 class="widget-title">',
    'after_title'   => '</h2>',
  ) );

  register_sidebar(array(
    'name'          => __( 'Footer 3', 'the-bootstrap' ),
    'id'            => 'footer-3',
    'before_widget' => '<aside class="widget well %2$s" id="%1$s">',
    'after_widget'  => '</aside>',
    'before_title'  => '<h2 class="widget-title">',
    'after_title'   => '</h2>',
  ) );
}
// Hook The 'widgets_init' Action
add_action( 'widgets_init', 'footer_widgets', 11);

A few things to note if you are not familiar with functions or adding new sidebars:

  • I renamed the function for this example, but I think it is good practice to name your functions so they are unique. ┬áThis will help avoid clashes with other plugins/functions etc. For example, use could your name as part of the function. You will also need to change the function name on line 13 as well, but Line 2 would be: function yourname_footer_widgets() {
  • Line 3 to 10, line 12 to 19 and line 21 to 28 is a little repetitive, but this will give you 3 new widget areas. You can see that the ‘name’ and ‘id’ change accordingly for each new widget area.
  • In the first array of registering a sidebar, take a look at line 6 to 9. This will give your widgets the standard HTML markup of the sidebar widgets, makes for easy styling.
  • Line 13 adds the function. If you changed your function name, you will need to change ‘footer_widgets’ to the new name, eg, ‘yourname_footer_widgets’
  • I also added a priority of 11, in your widget area this will put your new widget boxes under the standard ones. I think it just makes it a little neater considering they are footer widgets.

Calling Your New Widgets In The Footer

Now you can call your new widgets in your footer.php file of your child theme. I wanted 3 widget areas so using the Twitter Bootstrap markup, I created a div with a class=”span12″, then placed each sidebar/widget in its own div with a class=”span4″. Remember they need to add up to 12 (span4 x 3 new widget areas = span12).

<div id="footer-widget-area" class="span12">
  <div class="footer-widgets-1 span4">
    <?php dynamic_sidebar( 'footer-1' ); ?>
  </div>
  <div class="footer-widgets-2 span4">
    <?php dynamic_sidebar( 'footer-2' ); ?>
  </div>
  <div class="footer-widgets-3 span4">
    <?php dynamic_sidebar( 'footer-3' ); ?>
  </div>
</div><!-- footer-widget-area ends -->

You can see that I called footer-1 first so it will be on the left, then 2 and 3. If you added extra sidebars/widget areas or registered less, you will need to change the above HTML to match.

It is up to you where in the footer.php file you call your widgets, I placed my footer widget area just above the div that holds the site-generator id.

  1. hello Bradley
    ? when working with these footers did you run into an issue of putting content in these widgets then content appears on the site but do not remain in the widgets in the admin?

    • Hi raffa,

      Have found the bug that was causing the widget area not to save. It seems that registering multiple sidebars and using the %d to give them individual ids was it. I have changed the code above but basically what you need to do is expand the function to register each sidebar individually.

      Things to note:
      – register_sidebars changes to register_sidebar
      – remove the number that registers multiple widgets and the comma
      – copy and paste the new register_sidebar block of code
      – Change the name from ‘Footer %d’ to ‘Footer 1’ etc
      – Change the ‘id’ from ‘footer-%d’ to ‘footer-1’ etc

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>