Add Fifth Column to Footer Widget Area

Hello, I was hoping you may be able to share with me a code snippet or two that would add a fifth column to the footer widget area. The url is: https://martinandcosalon.com . Thank you in advance! :slight_smile:

Hello there,

Firstly add the below snippet to child theme’s functions.php file.

    add_action('init', 'sydney_pro_child_five_footer_widgets_area', 9999);
    function sydney_pro_child_five_footer_widgets_area() {
    	//Footer widget areas
    	$widget_areas = 5;
    	for ($i=1; $i<=$widget_areas; $i++) {
    		register_sidebar( array(
    			'name'          => __( 'Footer ', 'sydney' ) . $i,
    			'id'            => 'footer-' . $i,
    			'description'   => '',
    			'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    			'after_widget'  => '</aside>',
    			'before_title'  => '<h3 class="widget-title">',
    			'after_title'   => '</h3>',
    		) );
    	}
    }

Then duplicate the sidebar-footer.php file to child theme’s folder. Replace this code block:

    <div id="sidebar-footer" class="footer-widgets widget-area" role="complementary">
    	<div class="container">
    		<?php if ( is_active_sidebar( 'footer-1' ) ) : ?>
    			<div class="sidebar-column <?php echo $cols; ?>">
    				<?php dynamic_sidebar( 'footer-1'); ?>
    			</div>
    		<?php endif; ?>
    		<?php if ( is_active_sidebar( 'footer-2' ) ) : ?>
    			<div class="sidebar-column <?php echo $cols; ?>">
    				<?php dynamic_sidebar( 'footer-2'); ?>
    			</div>
    		<?php endif; ?>
    		<?php if ( is_active_sidebar( 'footer-3' ) ) : ?>
    			<div class="sidebar-column <?php echo $cols; ?>">
    				<?php dynamic_sidebar( 'footer-3'); ?>
    			</div>
    		<?php endif; ?>
    		<?php if ( is_active_sidebar( 'footer-4' ) ) : ?>
    			<div class="sidebar-column <?php echo $cols; ?>">
    				<?php dynamic_sidebar( 'footer-4'); ?>
    			</div>
    		<?php endif; ?>	
    	</div>
    </div>

with:

    <div id="sidebar-footer" class="footer-widgets widget-area" role="complementary">
    	<div class="container">
    		<?php if ( is_active_sidebar( 'footer-1' ) ) : ?>
    			<div class="sidebar-column <?php echo $cols; ?>">
    				<?php dynamic_sidebar( 'footer-1'); ?>
    			</div>
    		<?php endif; ?>
    		<?php if ( is_active_sidebar( 'footer-2' ) ) : ?>
    			<div class="sidebar-column <?php echo $cols; ?>">
    				<?php dynamic_sidebar( 'footer-2'); ?>
    			</div>
    		<?php endif; ?>
    		<?php if ( is_active_sidebar( 'footer-3' ) ) : ?>
    			<div class="sidebar-column <?php echo $cols; ?>">
    				<?php dynamic_sidebar( 'footer-3'); ?>
    			</div>
    		<?php endif; ?>
    		<?php if ( is_active_sidebar( 'footer-4' ) ) : ?>
    			<div class="sidebar-column <?php echo $cols; ?>">
    				<?php dynamic_sidebar( 'footer-4'); ?>
    			</div>
    		<?php endif; ?>
    		<?php if ( is_active_sidebar( 'footer-5' ) ) : ?>
    			<div class="sidebar-column <?php echo $cols; ?>">
    				<?php dynamic_sidebar( 'footer-5'); ?>
    			</div>
    		<?php endif; ?>
    	</div>
    </div>

If everything goes right, you’ll have a new sidebar footer area “Footer 5”.

Then add the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 992px) {
      .footer-widgets .col-md-4 {
        width: 20%;
      }
    }

Regards,
Kharis

1 Like

Good morning Kharis, incredibly good of you to respond so quickly. Also, thank you SO much for all the work you do in general. I use the Sydney Pro theme almost exclusively in my little web design/maintenance biz and it’s been incredibly stable and good to me. Seriously, you rock, my man! :slight_smile:

So I actually figured a solution before reading your reply, I was coming here to share the results in case anybody else could use the info . . . I think the end result is exactly the same . . . here goes . . .

  1. In Customizer > Footer change from 4 columns to one column
  2. In Appearance > Widgets add Layout Builder Widget to Footer 1 widget area.
  3. Click on “Open Builder”
  4. Add a row, and then set the row to as many columns as you like, in my case I set it to 5, each being 20% width. These widths can I guess rather obviously be adjusted in any combination to change the width of the individual footer columns, if that’s appealing to somebody.

Boom! :slight_smile: Thoughts?

Dude, I freaking love Sydney Pro theme. It’s seriously brilliant as to how easy it is to customize it any way you need to. No two sites need to look the same. And this forum is incredible, I learn so much from here, thanks again.