We’ve developed a plugin that injects up to four widget columns and changes the width accordingly.
First you need to register the new sidebar …
function new_footer_widgets_init() {
register_sidebar(array(
'name' => __( 'Footer #3', 'options-for-twenty-twenty' ),
'id' => 'sidebar-3',
'description' => __( 'Widgets in this area will be displayed in the third column in the footer.', 'options-for-twenty-twenty' ),
'before_title' => '<h2 class="widget-title subheading heading-size-3">',
'after_title' => '</h2>',
'before_widget' => '<div class="widget %2$s"><div class="widget-content">',
'after_widget' => '</div></div>',
));
}
add_action('widgets_init', array($this, 'new_footer_widgets_init'), 11);
… then you need to inject the sidebar into the footer and use a bit of pure javascript to move it to the right location …
function get_new_footer_sidebars($index, $has_widgets) {
if ($index == 'sidebar-2') {
if (is_active_sidebar('sidebar-3')) {
?>
<div class="footer-widgets column-three grid-item">
<?php dynamic_sidebar( 'sidebar-3' ); ?>
</div>
<script type="text/javascript">
(function () {
var sidebarWrapper = document.getElementsByClassName('footer-widgets-wrapper')[0],
newSidebar = document.getElementsByClassName('footer-widgets-wrapper')[0].getElementsByClassName('column-three')[0];
sidebarWrapper.appendChild(newSidebar);
}());
</script>
<?php
}
}
}
add_action('dynamic_sidebar_after', 'get_new_footer_sidebars', 10, 2);
… and then you need to use the following CSS to resize the new column …
@media (min-width: 700px) {
.footer-widgets {
width: 33.3333333333%
}
}
Oliver