e33.io

Widgets are great for adding dynamic content to WordPress sites like Recent Posts, Archives, Custom HTML, etc. The method below adds three widgets to the site’s footer area. The widgets stack on top of each other when the viewport is less than 769px wide, then at 769px or wider, they divide into three equal width columns. They also only affect the layout if one or more widgets are active.

Start by adding this to the theme’s functions.php file.

<?php
function emit_widgets_init() {
	register_sidebar( array(
		'name'          => esc_html__( 'Footer 1', 'emit' ),
		'id'            => 'footer-1',
		'description'   => esc_html__( 'Add widgets here.', 'emit' ),
		'before_widget' => '<div id="%1$s" class="widget widget-1 %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h4 class="widget-title">',
		'after_title'   => '</h4>',
	) );
	register_sidebar( array(
		'name'          => esc_html__( 'Footer 2', 'emit' ),
		'id'            => 'footer-2',
		'description'   => esc_html__( 'Add widgets here.', 'emit' ),
		'before_widget' => '<div id="%1$s" class="widget widget-2 %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h4 class="widget-title">',
		'after_title'   => '</h4>',
	) );
	register_sidebar( array(
		'name'          => esc_html__( 'Footer 3', 'emit' ),
		'id'            => 'footer-3',
		'description'   => esc_html__( 'Add widgets here.', 'emit' ),
		'before_widget' => '<div id="%1$s" class="widget widget-3 %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h4 class="widget-title">',
		'after_title'   => '</h4>',
	) );
}
add_action( 'widgets_init', 'emit_widgets_init' );

Then add this to the theme’s footer.php file.

<div id="footer-widgets">
	<?php
	if( is_active_sidebar( 'footer-1' ) ) {
		dynamic_sidebar( 'footer-1' );
	}
	if( is_active_sidebar( 'footer-2' ) ) {
		dynamic_sidebar( 'footer-2' );
	}
	if( is_active_sidebar( 'footer-3' ) ) {
		dynamic_sidebar( 'footer-3' );
	}
	?>
</div>
<div class="clear"></div>

Finally, add the CSS below to the theme’s existing stylesheet.

@media (min-width: 769px) {
	.widget-1,
	.widget-2 {
		float: left;
		width: 30%;
		margin-right: 5%;
	}
	.widget-3 {
		float: left;
		width: 30%;
	}
}
.clear {
	clear: both;
}