Doing more with widgets: Changing Layouts

Posted: 13th Nov 2007, in: Organisation, Widgets - Older Post - Newer Post

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 class="description"><?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:

Widget Setup Diagram

Which results in the following layout:

Widget Diagram

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.

Comments

1

Michael Wender (http://michaelwender.com) commented at 10:24 pm, 20th 11 2007:

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

Andrew Rickmann (http://www.arickmann.co.uk) commented at 6:26 am, 21st 11 2007:

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

arham | blogpreneur (http://road-entrepreneur.com) commented at 6:17 pm, 28th 02 2008:

just one word.. awsome
5

4

Ian Stewart (http://themeshaper.com/) commented at 12:26 am, 8th 03 2008:

Andrew, this is very cool. Thank you for this.

I am currently testing a comment link policy which means commenters do not get a link. There is a poll, and open comments for feedback on the comment policy page.

Doing more with widgets: Changing Layouts

Comments

Leave a Reply

Categories

Archives