How To Add A Widget Area To The Twenty Fifteen Theme Footer

The latest default WordPress theme is Twenty Fifteen with a fixed sidebar to the left that turns into a header in mobile view, a minimal footer area, great typography and nice featured image area.

The theme is awesome, however we can understand that users still want to customize it and make it their own. Since, this theme only offers one sidebar (which is called widget-ready area in WordPress) we will show you how to add a widget to the footer. Adding a widget area to the Twenty Fifteen footer is not different from adding a widget area in most WordPress themes.

wordpress widget area footer and other positions

Create a Wordpress Child Theme

When customizing a WordPress theme’s template files to create a widget area, it’s good practice to create a child theme.

Your modifications will be added to the child theme rather than to the original theme. When an updated version of the original theme is out, you’ll be able to update your copy of the original theme and leave your changes intact in the child theme.

#1 Step: Create Child Theme directory and files 

As a first step, create a folder inside the wp-content > themes folder. Call the folder twentyfifteen-child, or whatever you like.

The necessary file for a child theme to work is style.css. A desired file is functions.php. These two files go inside the twentyfifteen-child folder.

#2 Step: Add the file for the Wordpress footer widget area

Because the widget area is to be added to the theme footer, you need to have a file for the footer code. The safest way to code a WordPress template file is to start from a ready-made template, then add what you want and/or delete what you don’t want.

In this case, take the footer.php from the Twenty Fifteen theme and paste it into your child theme.

#3 Step: Add Code to the Child Theme’s Files to create the widget

As it is, the child theme doesn’t do anything. A working child theme needs some comments at the top of style.css. Open style.css in your favourite code editor and add this bit of code. 

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    
 Description:  Twenty Fifteen Child Theme
 Author:     
 Author URI:  
 Template:     twentyfifteen
 Version:      1.0.0
 Tags:         light, one-column, responsive-layout, accessibility-ready
 Text Domain:  twenty-fifteen-child
*/	

The really important part here is Template: twentyfifteen. This tells WordPress the name of the parent theme. Make sure the name is the same as the parent theme’s folder name (letter case, or any spaces, dashes, underscores, etc. are important: everything has to match exactly the parent theme’s folder name).

Next, open functions.php  and add this bit of code.

<?php 
//Import parent styles the right way and add other stylesheets if necessary.
function twenty_fifteen_child_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
add_action( 'wp_enqueue_scripts', 'twenty_fifteen_child_styles' );

This step is not mandatory. However, it is recommended since with this code the child theme will inherit the look and feel of its parent.

Now - let's write a function that hooks into the wp_enqueue_scripts() action hook. Inside the function you enqueue the parent theme’s stylesheet using the wp_enqueue_style() function. This ensures that the child theme inherits its parent’s styles while overriding any specific style rule in its own style.css file.

Your child theme is mostly done!

Access the Themes panel in your WordPress installation and you should see your Twenty Fifteen Child theme ready for use. Click Activate and visit your site. It should look exactly the same as the parent theme.

Adding the Widget Area

Now we need to add the code to define the footer widget area. Here’s the snippet that goes into functions.php

/**
 * Register footer widget area.
 *
 * @since Twenty Fifteen Child 1.0
 *
 * @link https://codex.wordpress.org/Function_Reference/register_sidebar
 */
function twentyfifteen_child_widgets_init() {
  register_sidebar( array(
    'name'          => __( 'Footer Widgets', 'twenty-fifteen-child' ),
    'id'            => 'sidebar-2',
    'description'   => __( 'Add widgets here to appear in your footer area.', 'twenty-fifteen-child' ),
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget'  => '</aside>',
    'before_title'  => '<h2 class="widget-title">',
    'after_title'   => '</h2>',
  ) );
}
add_action( 'widgets_init', 'twentyfifteen_child_widgets_init' );

The code above adds a function that registers a sidebar with the ID of sidebar-2 (the Twenty Fifteen theme already has a sidebar with the ID of sidebar-1), and then hooks this function into the widgets_init() action hook.

Next, let’s go ahead and add the new sidebar to the footer. Open footer.php in a code editor and enter this snippet just below this line of code: <footer id="colophon" class="site-footer" role="contentinfo">.

<?php if ( is_active_sidebar( 'sidebar-2' )  ) : ?>

 <div class="widget-area" role="complementary">
 
  <?php dynamic_sidebar( 'sidebar-2' ); ?>
 
 </div>
 
<?php endif; ?>

The code above first checks that the sidebar-2 has any widgets, if so it displays the sidebar inside a div with class of widget-area. The next thing you need to do is to head over to the Widgets panel of your WordPress back-end, locate the Footer Widgets sidebar, and add some widgets to it. Save the widgets as you add them and check the result.

Wordpress footer widget
Footer widgets in Twenty Fifteen theme

The above shows a couple of widgets on the Twenty Fifteen Child footer sidebar and you can see that text was too close to the top of the container and the widgets’ bottom margin was too high. This little snippet in style.css will improve the appearance considerably. 

.site-footer .widget {
  margin: 0;
  padding: 10% 20% 0;
}
.site-footer .widget:last-child {
  margin-bottom: 10%;
}	

Your Wordpress footer widget is done!

In this post we've seen how to add a new widget area to the Twenty Fifteen WordPress theme footer. Although we've placed the widget area in the theme’s footer, but you could add widget areas pretty much everywhere in a theme by following similar steps.

Download the list of 101 WordPress tricks every blogger should know

101 WordPress tricks

Click here to Download Now

One more thing...

Do you have friends or a Facebook group who you think would find this useful? Share this with them and then let me know what they think.

Want to supercharge your website?

 
Our website loads FAST ... just 1.29 seconds. We're hosted on FAST InMotion VPS servers We want YOUR website to be fast too, so we've gotten you an exclusive deal - 47% OFF for CollectiveRay visitors + FREE domain! Check it out NOW!