Introducing the Widgetize Plugin for WordPress

Quickly widgetize any post or page with the new Widgetize plugin. Many themes offer widgetized home pages, but Widgetize allows you to create any number of widget areas on any post or page. Here’s how it works…

1. Create widget areas

Widgetize adds a meta box to the WordPress editor which allows widget areas to be created specifically for that post or page. As you can see in the image above, three widget areas have been created, in this case, for the “Hello World!” post.

The “Placement” selection allows the widget areas to be displayed before the standard page/post content, after the content, or even used to replace the content entirely.

Clicking the “Manage Widgets for this Page” button will take you to the Appearance > Widgets page of the WordPress admin area.

2. Choose your widgets

Notice just below the “Widgets” title at the top of the page there are a couple new tabs. These tabs are used to separate the standard widget areas built into the theme and the widget areas created for posts/pages with the Widgetize plugin. Each specific post or page with widget areas will automatically be added to this list of tabs. As you can see, the “Hello World!” tab is selected and the three widget areas created in step 1 are visible on the right.

3. View the results

In step one, the widget area placement was set to “Before content” and in step two, three widgets were added to the first widget area and a single widget was added to the second widget area. With the Twenty Twelve theme activated, the new “Hello World!” post would look like this:

4. Styling

Since this plugin is intended for developers only, it does not style the widgets on the front end. However, it does add a class to each widget area specifying how many widgets are in that area. The following CSS can be added to the theme to automatically create columns based on the number of widgets in a widget area:

/* =Widgetize columns
-------------------------------------------------------------- */

.widgetize:after{
	visibility: hidden;
	display: block;
	content: "";
	clear: both;
	height: 0;
}

.widgetize .widget{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.widgetize-count-1 > .widget{
	float: left;
	width: 100%;
}

.widgetize-count-2 > .widget{
	float: left;
	width: 50%;
}

.widgetize-count-3 > .widget{
	float: left;
	width: 33.333333333%;
}

.widgetize-count-4 > .widget{
	float: left;
	width: 25%;
}

.widgetize-count-5 > .widget{
	float: left;
	width: 20%;
}

.widgetize-count-6 > .widget{
	float: left;
	width: 16.666666667%;
}

As you can see in the following example, the first widget area now displays three columns, while the second widget area still takes up the full width of the page.

Update

This plugin is no longer available, but the features described here are built into the Rampart theme.