Wordpress Banner

TUTORIAL: Add footer widget twenty fifteen

The twenty fifteen theme is a great and clean theme, but it’s missing a footer widget. I’ve been searching Google and found a great post that explains exactly how to add a footer widget to your theme, but this only explains how to add a footer widget what will cover the whole footer width. In this tutorial I’ll explain to you how you can create 2 footer widgets that will be aligned next to each other as shown in my footer.

Here is a link to the original source: Wpthememakeover.com by Maria Antonietta.


before we start to add the footer widgets

Before we can start we need:

The only original part on this page is how I explain you to have two footer widgets.  Here is a link to the original source: Wpthememakeover.com by Maria Antonietta.


how to: Add footer widget twenty fifteen
  • open your FTP client and browse to your child theme directory.
  • create a new file and name it functions.php
  • Open and add this to your 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' );

Adding this piece of code will make sure the child-theme functions.php will still inherit everything from your main theme functions.php. And now you’ve also added a footer widget.

If you want 2 footer widgets add this piece of code instead:

<?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' );

/**
 * 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' );

function two_twentyfifteen_child_widgets_init() {
 register_sidebar( array(
 'name' => __( 'Footer Widgets two', 'twenty-fifteen-child' ),
 'id' => 'sidebar-3',
 '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', 'two_twentyfifteen_child_widgets_init' );

?>
  • Copy the footer.php from your main theme to the child directory.
  • Open the footer.php

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">

And add this snippet of code;

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

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

for a second footer widget add the snippet code again, but change the ‘sidebar-2’ to ‘sidebar-3’. So make it look like this:

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

<?php endif; ?>

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

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

<?php endif; ?>
</div>

Now we’ve got two footer widgets we want them to align next to each other.

  • Open your child-theme css file and add this snippet of code:
.site-footer .widget {margin: 0;
padding: 10% 20% 0;}
.site-footer .widget:last-child {
 margin-bottom: 10%;}
.widget-area {max-width:400px;width:100%;float:left;padding: 15px !important;text-align:center;}
.widget-area  id{padding: 15px !important;
margin:2px !important;}

If you’ve got your own child-theme css file I don’t think I need to explain this too much. Just play with what you’ve got and see how you can style the footer-widgets the way you like it.

Good luck with adding two footer widgets to your theme, and please also credit: Wpthememakeover.com by Maria Antonietta.

Published by

Bas

My name is Bas Wijdenes and I'm working full time as a services engineer at Wortell. In my free time I like to write tutorials about computer problems I encounter on a daily basis. The main reason I started my blog is, because I wanted to work on my English vocabulary. If you've encountered a computer problem you can't get your head around, please do not hesitate to contact me.

2 thoughts on “TUTORIAL: Add footer widget twenty fifteen”

  1. Hi Bas,

    Thanks for the tutorial, worked a treat 🙂 One small change to the CSS…

    A plugin widget I used in the standard sidebar (social media feather) also employs the class ‘widget-area’ so i changed your CSS to:

    .site-footer .widget-area {max-width:400px;width:100%;float:left;padding: 15px !important;text-align:center;}
    .site-footer .widget-area id{padding: 15px !important;margin:2px !important;}

    There may be other plugins that also do the same?

    Anyway thanks again – happy chappy here 🙂

Leave a Reply

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