How to add a (2) footer widgets in the WordPress Twenty Fifteen theme

Let’s add a footer widget first in the WordPress Twenty Fifteen theme.

There are several tutorials on the internet that add one footer widget that covers the entire width.

I think that is a waste of most space. Why not divide the entire width into 2 widgets?

The two widgets that I explain here are shown next to each other.


Well, let’s start!

Before you start we need:

If you already have a functions.php you can skip this step.

Create a new file in NotePad-Plus-Plus and save it as functions.php.

Then add the code snippet below.

/** * Register footer widget area. 
* 
* @since Twenty Fifteen Child 1.0 
* 
* @link https://codex.wordpress.org/Function_Reference/register_sidebar 
*/ 

Adding this piece of code will make sure the child-theme functions.php will still inherit everything from your main theme functions.php.

Then add this code snippet to add the first footer widget.

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

If you now save the functions.php and upload to your hosting, you have one footer widget that you can see under Widgets.

Only you don’t see this in your footer yet. Go to Show the widget in the footer for the next steps, or add a second one in advance.


We want two footer widgets, of course!

If, like me, you want a second footer widget to get rid of more, just add the following snippet to your functions.php.

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

We’ll need to add them to the footer now, to show on your WordPress website.


Show the widget in the footer.

We have to edit the footer.php to add the widgets.

Go to your main theme folder with filezilla and copy the footer.php to your child theme folder.

The path to the main folder is:

/Domainname.com/wp-content/themes/twentyfifteen

Now open the footer.php in Notepad-Plus-Plus.

Find the following snippet:

<footer id="colophon" class="site-footer" role="contentinfo">

Then add the snippet code below UNDER the above snippet.

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

	</div> 

<?php endif; ?>

The second widget and CSS to align both widgets.

Add the following snippet code for the second widget.

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

	</div> 

<?php endif; ?>

You should already have a .css file after creating your child theme. Open it in Notepad-Plus-Plus.

Add the below snippet to your .css file.

.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;
}

You can further style it as you prefer.


Why would you add a footer widget, though?

In the footer you could place extra information, for example where your company is located, a contact form, or a Twitter widget.

This ensures a better experience on your website, you are easy to reach and the information is on the first page where they appear.


Summary

I have reviewed this blog post and I no longer think that the content is very relevant, but because this post has been popular and some may still want a footer widget in the WordPress TwentyFifteen theme, I keep the blog post for now.

The original post dates from 7 September 2015.


Banner image credits

Banner Image by simplu27 from Pixabay.

Published by

Bas Wijdenes

My name is Bas Wijdenes and I work as a PowerShell DevOps Engineer. In my spare time I write about interesting stuff that I encounter during my work.

4 thoughts on “How to add a (2) footer widgets in the WordPress Twenty Fifteen theme”

  1. Mis-leading, I made a child of the theme and replaced the functions.php with your code and it crashed my site.

  2. 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 🙂

    1. Hello and thank you for the feedback.

      You’re right there might be other plugins that also do the same, so thanks for sharing this with us 🙂

Leave a Reply

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