Multi-Column Widget WordPress Theme

Create Widgets in Your WP Theme

Widgets are an extremely powerful feature of WordPress blogs. If you use a widget-ready WP theme, you can add a variety of plug-ins or WordPress-ready features such as Recent Posts, Recent Comments, Calendar, Search, and much more by using the simple drag and drop widget interface within the WordPress dashboard.

This article describes how you can add a flexible multiple-column widget into your WP theme. Most WP theme widgets are placed on a sidebar that is very tall but not very wide. In such a layout, there is usually a single column of widgets, and each widget is placed on its own row.

However, it is also useful to place widgets in the header and footer areas of your blog. Unlike the sidebar, however, these areas tend to be wide but not very tall. In these instances you want a multi-column WP widget layout.

Screen-shot of a tall sidebar widget area.

Multi-Column WP Theme Widgets

The screen-shot below shows a multi-column WP theme widget area. There are a maximum of three columns, but it will expand and shrink according to the number of widgets you have placed in the area. If there is only one widget, it will expand to take up the entire space; if there are two widgets, it will divide the space into two columns; and if there are three of more widgets, it will use a three column layout like the one shown.

shiba-multi-column-widget2

shiba-multi-column-widget3

shiba-multi-column-widget1

Multi-column WordPress theme widget area.

Creating a multi-column widget area is all in the styling of the elements within your WP theme. Here is a step by step on how to add a multi-column widget area into your WP theme –

1. Register a theme widget area with WordPress

Go into the functions.php file of your theme. If your theme is already widget enabled, then there will be one or more register_sidebar function calls. The PHP code will look something like this –

functions.php

if ( function_exists('register_sidebar') ) {
	register_sidebar(array(
		'name' => 'sidebar',
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<div class="widget-title">',
        'after_title' => '</div>',
    ));
}

You just need to register a widget area by adding a new register_sidebar statement as is shown below –

functions.php

if ( function_exists('register_sidebar') ) {
	register_sidebar(array(
		'name' => 'sidebar',
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<div class="widget-title">',
        'after_title' => '</div>',
    ));

// Register new widget area
$header_sidebar = register_sidebar(array('name'=>'header'));
  
$sidebars_widgets = wp_get_sidebars_widgets();
$num_header_widgets = count($sidebars_widgets[$header_sidebar]);
}	

Doing so will make that new widget area available to you in your WordPress dashboard. You can check by logging into your WordPress blog, and going into the Appearance >> Widgets menu on the left.

Your new ‘header’ widget area should show up on the right of your screen. You can open it by clicking on it, and then drag and drop the widgets of your choice into it.

Note that lines 13 and 14 in the code above retrieves the number of widgets that are in your new widget area. You will need to use this later on.

Screen-shot of the Appearance - Widget screen within the WordPress dashboard.

2. Add the widget area to your WP theme

Go into the template header file (header.php) of your theme. Now you want to make your new widget area show up at your chosen location in your WordPress blog. Add the following HTML code to your header.php file where you want your widget area to appear –

header.php

<div id="header-widget">
	<div class="inner"> 
        	<?php dynamic_sidebar('header'); ?>
        </div>  
</div> <!-- End header-widget -->

3. Style your widget area

Once you have added in your widget area you want to style it so that it looks clean and professional. As a start, add the new styles below into your WP theme style.css file.

style.css

#header-widget {  
	width:750px;  
	overflow:hidden;

}

#header-widget .inner {  
	margin-top:20px;
	margin-bottom:20px;	
}  


#header-widget .inner li {  
	list-style-type: none;  
	list-style-image: none;  
	float: left;
	
	border-top-style: solid;	
	border-top-width:1px;

    	font-family: "lucida sans unicode","lucida grande",sans-serif;
	font-size: .7em;
	letter-spacing:1px;
}  

#header-widget .inner li ul {  
	padding-left:0px;  
} 
	
#header-widget .inner li ul li { 
	width:100%;
	float:none; 
	padding:0px; margin:0px;
	
	border-style:none;
	font-size: 100%;
} 	

Screen-shot of your WordPress blog widget area after applying the styles above.

4. Set the multiple column layout of your widget area

The code above just styles the individual widgets, you must still style your widget area so that it properly lays things out in a multi-column format. To do that, you need to add some dynamic styles into your WP theme functions.php file.

It is easiest to group all your dynamic styles into a function. For example in the code below, we put all our dynamic styles into a function called header_style.

functions.php

function header_style() {
	global $num_header_widgets;
?>
<style type="text/css">
#header-widget .inner li {  
	<?php 
		switch ($num_header_widgets) {
		case 1:
			echo "width: 90%;";
			echo "margin:0% 5% 0% 5%;";   
			break;
		case 2:
			echo "width: 45%;";
			echo "margin:0% 2.5% 0% 2.5%;";   
			break;
		default:
			echo "width: 29%;";
			echo "margin:0% 2% 0% 2%;";   
			break;
		}		
	 ?>
}
</style>
<?php
}

This header_style function will dynamically set your widget area to the right number of columns according to the number of widgets you have within it. If there is only one widget (e.g. case 1), we set the single column to 90% of the total width, together with a 5% margin on the left and right sides. If there are two widgets (e.g. case 2), we set each column to take up 45% of the total width, together with a 2.5% margin on the left and right sides of each column. Finally if there are three of more widgets (e.g. case default), we set each column to take up 29% of the total width, together with a 2% margin on the left and right sides of each column.

Ensure that the sum of column and margin widths add up to less than or equal to 100%. Otherwise, the columns will not be properly aligned. For example in the three column scenario, each column has a width of (29% + 2% + 2% = 33%). The total width therefore comes to (33% * 3 = 99%).

Notice that this is where we use the number of widgets data ($num_header_widgets) that we retrieved earlier on.

Now that we have defined our new dynamic styles, we just need to apply them to our WordPress blog. To do this we add the following code to our theme functions.php file.

add_action('wp_head', 'header_style');

Screen-shot of your multi-column WP widget area after applying the dynamic style code above.

5. Set your widget area to a fixed height

Now we have our multi-column layout, but notice that the height of our widget area is dynamic. I.e. it expands according to the size of the widgets we have placed within it. This may not be desirable, as it may push our other WP theme elements much farther down than we would like, or it may disrupt subsequent elements in our WP theme layout.

For these purposes, we may want to set our widget area to a fixed height. This can be easily achieved by adding the code below into the header_style function you just created –

#header-widget {  
	<?php
	if ($num_header_widgets)
		echo "height:340px;";
	else	  
		echo "height:0px;";

	?>
}

This sets your widget area to a fixed height of 340 pixels if there are widgets within it. Otherwise, we set its height to zero. You can also use the max-height CSS property to set a maximum height instead of a fixed height.

As you see below, this cuts off any text overflow when our height limit is reached.

Screen-shot of multi-column widget with fixed height.

6. Add some bottom borders

Finally, we may want to enhance our widget area by adding a border to the bottom of our columns. To do this, add the following code to your header.php template file, right below where you added your header widget area.

header.php

<div id="header-border">
        <?php
            global $num_header_widgets;
            if ($num_header_widgets < 3) $num_borders = $num_header_widgets; else $num_borders = 3;
            for ($i=0; $i<  $num_borders; $i++) { ?> 
                <div class="bottom-border"></div>
                <?php }
        ?>
</div> 

Next, we need to style our bottom borders by adding the following code into our style.css theme file.

style.css

#header-border {
	width:750px;
}

#header-border .bottom-border {
	border-top-style: double;
	border-top-width:3px;
	float:left;
}

Finally, we need to set our border areas into the same multi-column format as we did with our widget area. To do this, add the code below into the header_style function within your functions.php file.

functions.php

#header-border .bottom-border {  
	<?php 
		switch ($num_header_widgets) {
		case 1:
			echo "width: 90%;";
			echo "margin:0% 5% 0% 5%;";   
			break;
		case 2:
			echo "width: 45%;";
			echo "margin:0% 2.5% 0% 2.5%;";   
			break;
		default:
			echo "width: 29%;";
			echo "margin:0% 2% 0% 2%;";   
			break;
		}		
	 ?>
}

Screen-shot of multi-column widget with fixed height and a bottom border.

Congratulations!

You are done creating your new multi-column widget-ready theme. Play around with the styling of borders, colors, background-colors, and more to get exactly the look that you want for your blog.

For an example of the multi-column widget area described in this article, check out the header widget at the top of this page. You can also get all the source code by just downloading the Shiba theme.