How Can You Add Footer Widget In WordPress Theme?

how to add footer widget in wordpress theme

When you look at any WordPress footer area then there maybe three or fours footer widgets available to add the widget items.

But do you know how to add footer widget in WordPress theme? If you have been using a theme and now you want to add an extra widget in the footer then you can do that.

The WordPress theme file structure is quite easy and as the name suggests, here you have to use the footer.php. And we always use the functions.php to add some extra feature in our theme.

In this post, I will let you walk through a process in which you would learn how to add footer widget in WordPress theme with three widget areas.

You Have To Register The Footer Widgets In The functions.php file.

There are basically two steps to add footer widget area WordPress site. First, you have to register the widgets and then call them in the footer area. The code is quite similar which is used to add new sidebar in WordPress theme.

Let me show you both the codes.

Step 1:- Add this code in the functions.php file of your theme.

function footer_widgets_items(){
register_sidebar( array(
‘name’ => ‘Footer Column 1’,
‘id’ => ‘footer1’,
‘before_widget’ => ‘<div class=”widget-item”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h4 class=”widget_heading”>’,
‘after_title’ => ‘</h4>’
));register_sidebar( array(
‘name’ => ‘Footer Column 2’,
‘id’ => ‘footer2’,
‘before_widget’ => ‘<div class=”widget-item”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h4 class=”widget_heading”>’,
‘after_title’ => ‘</h4>’
));
register_sidebar( array(
‘name’ => ‘Footer Column 3’,
‘id’ => ‘footer3’,
‘before_widget’ => ‘<div class=”widget-item”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h4 class=”widget_heading”>’,
‘after_title’ => ‘</h4>’
));
}
add_action(‘widgets_init’, ‘footer_widgets_items’);

This code will register the three footer widgets in your theme. You have just registered the widgets. One more step is required to show widgets in your WordPress theme.

To find the complete answer for how to add footer widget in WordPress theme, you have to take this step.

Step 2:- In the footer.php file, you have to add a little bit of CSS and the WordPress functions to call the registered footer widgets. Three <div> tags would be taken. One for each widget.

<div class=”footer-widgets clearfix”>

<?php if (is_active_sidebar(‘footer1’)) : ?>

<div class=”footer-widget-area”>
<?php dynamic_sidebar(‘footer1’); ?>
</div>
<?php endif; ?>

<?php if (is_active_sidebar(‘footer2’)) : ?>

<div class=”footer-widget-area”>
<?php dynamic_sidebar(‘footer2’); ?>
</div>
<?php endif; ?>

<?php if (is_active_sidebar(‘footer3’)) : ?>

<div class=”footer-widget-area”>

<?php dynamic_sidebar(‘footer3’); ?>
</div>
<?php endif; ?>

</div>

This will show three widgets in the footer area. You can see that to call each of the footer widgets, the ID from the above code is used.

You can check for the first footer widget the “id=footer1“, for second “id=footer2“, for third “id=footer3“. We are using the same IDs in the footer.php file.

For the proper design, you have to target the class=”footer-widget-area” mentioned with the <div> tags.

A class of “clearfix” is added in the main <div> tag. It is used to clear the floats. If you want to clear the floats using any other method then you can remove this class.

Let me show a little bit of CSS to add the position of all the widgets of the footer.

Add the code in your style.css file.

.footer-widget-area {
   width: 30%;
   float: left;
   box-sizing: border-box;
   margin-right: 2%;
}

With this code, all the three widgets are floated so that you can see them in horizontal line. The width is give as 30% to each of the widgets.

When you register four widgets area then you can reduce the width according to that. You can use 25% width with no margin.

The IDs and classes are given in the code and you can target the HTML elements to design the footer widgets according to your choice.

Do You Now Know How To Add Footer Widget In WordPress Theme?

The process is quite similar with adding the sidebar in the theme. But you have to take care of the HTML tags because without the proper structure, you can design the widgets.

Use the <div> tags with class and IDs to give a perfect shape to your footer widgets. The most important thing is that you should know how to place them horizontally.

As I have shown above, it can be done using the float property of CSS. I hope you won’t as the question how to add footer widget in WordPress theme after that. If you still face any problem then feel free to ask anything.

by Ravi Chahar

A blogger, web developer, and designer who intend to guide his readers about WordPress, Blogging, Web Development, Web Design and more. I have expertise in WordPress theme development and customization. I can set up and redesign the Thesis themes. I have been working in this field for years now.

8 comments

  1. Hi Ravi,

    Informative post indeed 🙂

    You know I am one person who never plays around with codes, that’s my better half’s department! Yes, unless they are easy ones, I just don’t touch them, lest I mess up things you know. I remember the time I tried it once and it took a while to get things back to normal!

    Yes, the footer widget surely can be made creative and impressive, so thanks for sharing this with us, which would help so many others.

    Have a nice day ahead 🙂
    Harleena Singh recently posted…Exposed – The Dangers of Romanticizing AddictionMy Profile

    1. Hey Harleena,

      Even I was like you in my starting days. I never thought to deal with the codes. Especially the WordPress codes. I used to freak out after seeing the WordPress functions and PHP codes.

      But the time makes us learn more. Glad that you found it helpful.
      Thanks for sharing your thoughts.
      Have an awesome day.
      ~Ravi

    1. Hey Atish,

      Adding the footer widgets in the theme isn’t hard. You just need to put the code shown above. In most of the themes, footer widgets are available. And if you want to add any extra widget then it can be done by this method.
      Thanks for stopping by.
      Enjoy the day.
      ~Ravi

  2. Hi Ravi,
    I am impressed .. you know code. I don’t! Something very good to know. I usually use what’s available to me in the theme with widgets. You have inspired me to learn more. I imagin once you know code you can do a lot with it ..

    1. Hey Lesly,

      Coding is a kind of fun. if you know a little bit of coding then you can change anything on your website. You just have to pick up the WordPress functions and use them properly with PHP.
      I hope you will learn more with the time.
      Good to see you here.:)
      ~Ravi

Leave a Reply

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

CommentLuv badge