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... Did you know that people who share useful stuff like this post look AWESOME too? ;-)
Please leave a useful comment with your thoughts, then share this on your Facebook group(s) who would find this useful and let's reap the benefits together. Thank you for sharing and being nice!

Featured On

Inc Magazine Logo  

Sitepoint logo  

CSS Tricks logo   

webdesignerdepot logo   WPMU DEV logo   

and many more!

 

 

 

 

Best Rated Caching Plugin

Make your website faster 

TemplateMonster Bundles

Awesome bundles for awesome websites. $1300 worth of products for $49 only!

We've got an exclusive 10% OFF for CollectiveRay visitors until - use Coupon Code: collectiveray

TemplateMonster Bundles

How to make your website FAST!

Step-by-step - free email course, how to make your website load in less than 1 second 

 

The Outstanding HungryJPEG Bundles

AWESOMENESS! Bundles of premium font + graphic packs at more than 96% OFF!  Get a bundle for just $9 - ONLY!

The Hungry JPEG Awesome font bundles

 

Advertise on CollectiveRay.com

CollectiveRay (formerly known as DART Creations) is interested in developing partnerships with mutual benefit. If you like the stuff we publish and would like to develop a relationship, we'd be happy to hear from you. Go on - drop us a line - we'd love to hear from you :-)

 

 

Disclosure: CollectiveRay is funded personally out of pure passion for helping people working with websites. We do however generate some income through recommendations of products. This means if you click on a link and purchase an item we link to, we will receive a small sum out of that sale. We usually partner with vendors to make your purchase cheaper than buying direct.

who are we?

CollectiveRay is run by David Attard - working in and around the web design niche for more than 12 years, we provide actionable tips for people who work with and on websites. We also run DronesBuy.net - a website for drone hobbyists.

David attard

Follow us on Social

Follow us on Facebook   Follow us on Google+   Subscribe to our RSS Feed   Follow us on Twitter

 

Where are we hosted?

This site is proudly powered by FAST VPS InMotion Servers and given an insane speed thanks to MaxCDN!

Web Hosting MaxCDN - Speed up your website