February 28, 2010

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:

function sidebar_container_widget(){
?>
<div id=”sidebar”>
<?php if ( function_exists(‘dynamic_sidebar’) ) { dynamic_sidebar(2); } ?>
</div>
<?php
}

function content_container_widget(){
?>
<div id=”content”>
<?php if ( function_exists(‘dynamic_sidebar’) ) { dynamic_sidebar(3); } ?>
</div>
<?php
}

function content_widget(){
?>
<!– Here you put your WordPress Loop–>
<?php
}

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’ => ‘<div>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ”,
‘after_title’ => ”,
));
register_sidebar(array(
‘name’ => ‘main content’,
‘before_widget’ => ‘<div>’,
‘after_widget’ => ‘</div>’,
‘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.

#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.

<div id=”header”>
<h1><a href=”<?php echo get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>
<div><?php bloginfo(‘description’); ?></div>
</div>
<?php if ( function_exists(‘dynamic_sidebar’) ) { dynamic_sidebar(1); } ?>
<div id=”footer”>Footer Message</div>

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.

  every 1728s, 1s ago, in 0.02s.