How Can You Add Footer Widget In WordPress Theme?
September 22nd, 2016 | by Ravi Chahar || 8 Comments |
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.
‘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>’
));
}
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.
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.
Related Posts
8 comments
Leave a Reply
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 ?
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
Ravi,
Again a good one! There are many WordPress users use the footer area effectively, and this tip can help everyone who is using a theme which doesn’t have footer widgets.
Keep sharing such cool stuff.
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
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 ..
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
Fantastic content quality keep on writing
We needed many Blogger like in the blogosphere
Hey Mihir,
It’s aways good to know that I am helping someone.
Thanks for stopping by.
~Ravi