Custom WordPress Homepage widget area with Bootstrap

This tutorial we will show you how to implement a custom WordPress homepage and footer widget areas. These widget areas will auto conform using the boostrap grid system based on the number of widgets.

Adding a new function to your themes functions.php

In this step we need to add a new function to our wordpress themes functions.php we will call this custom_widgets_count. This function will setup two areas to check our conditions and then pass through our $params.

// Add Bootstrap column class to widgets
function custom_widgets_count($params) {

  $sidebar_id = $params[0]['id'];

  	/* Homepage Widgets */
  	if ( $sidebar_id == 'homepage-content-widgets' ) {
	  	$total_widgets = wp_get_sidebars_widgets();
	  	$sidebar_widgets = count($total_widgets[$sidebar_id]);
	  	$params[0]['before_widget'] = str_replace('class="', 'class="col-md-' . floor(12 / $sidebar_widgets) . ' ', $params[0]['before_widget']);
  	}
  	
	/* Footer widgets */
	if ( $sidebar_id == 'sidebar-footer' ) {
    	$total_widgets = wp_get_sidebars_widgets();
		$sidebar_widgets = count($total_widgets[$sidebar_id]);
		$params[0]['before_widget'] = str_replace('class="', 'class="col-md-' . floor(12 / $sidebar_widgets) . ' ', $params[0]['before_widget']);
  	}
  return $params;
}
add_filter('dynamic_sidebar_params','custom_widgets_count');

Register our widget area so WordPress can tell us what and where our widgets will be shown

/**
 * Register widget area.
 *
 * @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
 */
function custom_theme_widgets_init() {

	register_sidebar( array(
		'name'          => __( 'Homepage Content Widgets', 'theme-slug' ),
		'id'            => 'homepage-content-widgets',
		'description'   => __( 'Add widgets for HomePage Content area, below Jumbotron', 'theme-slug' ),
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h3 class="widget-title">',
		'after_title'   => '</h3>',
	) );

	register_sidebar( array(
		'name'          => __( 'Footer', 'theme-slug' ),
		'id'            => 'sidebar-footer',
		'description'   => __( 'Add widgets here.', 'theme-slug' ),
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h3 class="widget-title">',
		'after_title'   => '</h3>',
	) );
}
add_action( 'widgets_init', 'custom_theme_widgets_init' );

Be sure to replace theme-slug with your themes slug. To find this look at the top of your functions.php file and look for @package.

Add your new widget are to your theme files

Our first bit will be in our custom front-page.php file.

Add this code anywhere you would like to add your new homepage widget area.

			<?php if (is_active_sidebar('homepage-content-widgets')) : ?>

			 <div id="homepage-widgets">

				 <div class="row">

					 <?php dynamic_sidebar('Home Content Widgets'); ?>

				 </div><!-- .row -->

			 </div><!-- #homepage-widgets -->
			 
			 <?php endif; ?>

This tells wordpress that if the sidebar is active to display our widgets. If there is no widgets nothing will be displayed. Make sure you place this code inside of a .container div <div class="container"> or container-fluid

Finally lets add it some code to the footer.php file to show our footer widgets.

	<footer id="site-footer" class="">

		<div class="container">

			<?php if (is_active_sidebar('sidebar-footer')) : ?>

			 <div id="footer-widgets">

				 <div class="row">

					 <?php dynamic_sidebar('Footer'); ?>

				 </div><!-- .row -->

			 </div><!-- #footer-widgets -->

			<?php endif; ?>
		</div>
	</footer>

This code is just like the other section for the homepage. Checks to see if they’re any widgets to display if so display them, if not, don’t display anything.

We hope this is easy enough to follow along and is easy for you to implement in you theme. If you have a trouble, comments, or issues please let us know.