A few weeks ago I showed how the home page contents could be moved into a widget to allow additional content to be added above and below it. That’s an interesting technique but not as interesting as this one. Using nested widgets to control the overall layout.
By nesting widgets it is a fairly simple process to allow the sidebar to switch from left to right, and to control the content in both the sidebar and the main content. I have created a sample theme that contains only the code necessary to do this, you can download it at the bottom of the page.
First you need to create the necessary widgets and register the sidebars, this is done in the functions.php file in your theme:
[php]
function sidebar_container_widget(){
?>
}
function content_container_widget(){
?>
}
function content_widget(){
?>
}
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name' => 'layout',
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => '',
));
register_sidebar(array(
'name' => 'sidebar',
'before_widget' => '
',
'before_title' => '',
'after_title' => '',
));
register_sidebar(array(
'name' => 'main content',
'before_widget' => '
',
'before_title' => '',
'after_title' => '',
));
register_sidebar_widget('Sidebar Widget',sidebar_container_widget);
register_sidebar_widget('Content Widget',content_container_widget);
register_sidebar_widget('Home Page Content',content_widget);
}
In the code above I have registered three sidebars, the home page layout, the main content, and the sidebar content. I have registered three widgets, one that includes the main content, one that includes the sidebar and one that contains the WordPress loop that would normally be on the home page. In the example I have included one more sidebar and widget, a full width banner than can be inserted above or below both the content and sidebar.
Next you need to set up your styles in an appropriate way to be sure that the sidebar and content can be interchangeable. I have floated them both left with an all round margin.
[css]
#content {
float:left;
width:500px;
border:1px solid #cccccc;
margin:10px;
padding:5px;
}
#sidebar {
float:left;
width:200px;
border:1px solid #cccccc;
margin:10px;
padding:5px;
}
Next you need to setup your index page. This is a simple prospect as there will not be any remaining content.
[php]
You should now have everything you need to make your layout work. In the example theme I have set up the widgets like this:
Which results in the following layout:
To move the sidebar over to the left is a simple matter of swapping the sidebar and content widgets around.
You can download the sample theme here. It contains only three files, those necessary to illustrate the technique.
[...] the scenario described about, and which I wrote about in a previous post — changing layouts using widgets, many more places use widgets to provide options. For example, the main area could contain a single [...]
This is a great post that really gets my head spinning with the potential! Definitely something I would have to draw out to keep straight lol. Let’s make it completely boggling and add in conditional tags ;). I hope this is a glimpse into Wordpress of the future.
Andrew, this is very cool. Thank you for this.
just one word.. awsome :-)
It is a temptation isn’t it? I decided not to take it much further because actually just this little bit proved to be a little confusing at times.
That may be just a bad naming policy on my part though.
I really like the potential of this technique. I already imagine that I’ll be loosing sleep as I brainstorm about ways to take advantage of this.