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

The latest default WordPress theme is Twenty Fifteen, a lovely blogging theme that makes a bold statement in terms of breaking away from familiar blog layouts.

There’s a fixed sidebar to the left that turns into a header in mobile view, a minimal footer area, beautiful typography and nice featured image area.

The theme is quite impressive, but understandably users still want to customize it and make it their own.

I’ve just come across a Twenty Fifteen user who asked to display widgets in the footer area. However, this theme only offers one sidebar (which is a widget-ready area in WordPress language).

Adding a widget area to the Twenty Fifteen footer is not different from adding a widget area in most WordPress themes.

Here’s how.

Create a Child Theme

When customizing a WordPress theme’s template files, it’s always 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 mods intact in the child theme.

You can create a child theme using a great new plugin freely available on the WordPress plugins repo, called Orbisius Child Theme Creator.

As for me, being the control freak that I am, I’d rather go the traditional route and code myself one. If you’re a bit like me, follow along with the steps below.

#1 Step: Child Theme Directory and Files Creation

As a first step, create a folder inside the wp-content > themes folder. I call my folder twentyfifteen-child, but you can call it what 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 Footer

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, grab footer.php from the Twenty Fifteen theme and paste it into your child theme.

Great, now you have all the files you need for your child theme to do its job.

#3 Step: Add Code to the Child Theme’s Files to Make It Work

As it is, the child theme doesn’t work. A working child theme needs some comments at the top of style.css. If you’re following along, open style.css in a 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 crucial bit of info in there 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 in a code editor 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, if you’d like your child theme to inherit the look and feel of its parent, then this is how it’s done.

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

Now your child theme is available. 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

It’s now time to add the code for the sidebar. 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.

Footer widgets in Twenty Fifteen theme
Footer widgets in Twenty Fifteen theme

I added a couple of widgets to my Twenty Fifteen Child footer sidebar and noticed that the text was too close to the top of the container and the widgets’ bottom margin was too high.

If you notice the same behaviour, 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%;
}	

To Sum Up

In this post I show how to add a new widget area to the Twenty Fifteen WordPress theme. Here I place the widget area in the theme’s footer, but you could add widget areas pretty much everywhere in a theme by following similar steps.

Have you tried the Twenty Fifteen theme? How do you like it? I’d love to hear from you in the comments below.
Advertisements

10 thoughts on “How To Add A Widget Area To The Twenty Fifteen Theme Footer

  1. Thanks for this lovingly prepared tutorial. Nicely done. I was looking for a way to widgetize the twentythirteen header. This should get me most of the way there – if not all the way.

  2. Nicely done. I’m looking to customize the menu in twentyfifteen across the top of the page. any interest in that?

Have your Say

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s