Hello there,
Unfortunately, this doesn’t provide this feature. For creating this manually you have to first register three footer widget area. Follow the link to do so https://codex.ww.wp.xz.cn/Widgetizing_Themes
after that, you have to display your new widget area in your theme’s footer.php file.
Then you will find 3 sidebars in your widget section and you will able to add widgets in these sidebars.
Otherwise, you can achieve by using plugin
Try this one hope it will help
https://ww.wp.xz.cn/plugins/podamibe-simple-footer-widget-area
Hi Poonam Namdev,
thanks for your help.
I’ve tried to create a footer widget area manually following your link, and that’s what I get:
asakaltrove dot com
A one-column widget area.
How can i fix it?
@asakasan once you’ve got the widget area added, the columns can be created via CSS. A basic implementation can be done like this:
@media all and (min-width: 800px) {
.sidebar-footer .widget {
display: inline-block;
width: 33%;
}
}
I used “sidebar-footer” as the class, but yours may be different depending on the ID you assigned the widget area. I’m making each widget 1/3 of the width, so they can sit next to each other in 3 columns. Lastly, I’ve wrapped the code in a media query so it only affects the page if it’s 800px or wider. This way, it won’t force the widgets into 3 columns on small mobile screens.
@poonam9 thanks for assistance 🙂
Hi @bensibley, thanks for help. 🙂
I’m afraid I’m messing up my code. In the CSS code you’ve suggested, you wrote “sidebar-footer”.
So I replaced that with the ID I wrote in functions.php, but it doesn’t work. 🙁
I wrote, as the link by @poonam9 suggested,
<?php
/**
* Register our sidebars and widgetized areas.
*
*/
function arphabet_widgets_init() {
register_sidebar( array(
'name' => 'Home right sidebar',
'id' => 'home_right_1',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h2 class="rounded">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'arphabet_widgets_init' );
?>
So I’ve replaced sidebar-footer with home_widget_1
I guess i’ve mistaken! 🙁
-
This reply was modified 9 years, 2 months ago by
Asakasan.
Okay I see what’s happening now.
In the codex tutorial, they recommend this code for outputting the widgets:
<?php if ( is_active_sidebar( 'home_right_1' ) ) : ?>
<div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
<?php dynamic_sidebar( 'home_right_1' ); ?>
</div><!-- #primary-sidebar -->
<?php endif; ?>
You can update the “primary-sidebar” class in that code to “sidebar-footer”, or whatever you prefer.
Also, make this one update to the “before_widget” value when registering the widget area:
function arphabet_widgets_init() {
register_sidebar( array(
'name' => 'Home right sidebar',
'id' => 'home_right_1',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2 class="rounded">',
'after_title' => '</h2>',
) );
}
That will give each widget the class “widget” and will also add dynamic classes/ID which can make styling with CSS easier.
Wow Ben! Thank you so much @bensibley!
That was too difficult to achieve for me, but now that’s fine! 🙂
May I ask you how to change font size of the footer widgets, both widget title and widget text?
-
This reply was modified 9 years, 2 months ago by Asakasan.
Sure thing!
This CSS will make a nice adjustment to the footer widget text size:
.sidebar-footer .widget {
font-size: 16px;
}
.sidebar-footer .widget h2 {
font-size: 21px;
}
The first part is for the overall text size, and the second part adjusts the titles in particular.
Thanks Ben, you’re the best! So kind 🙂
You’re welcome, happy to help 🙂
