The New Columns Function in Arturo

I have just release the latest update to my WordPress theme framework Arturo. I have added many new features but one of the most interesting one is the new arturo_columns() function. This function allows you to create multi-grid layouts for your posts, similar to Magazine Basic and Magazine Premium.

Here is a snapshot of the Arturo demo:

You can see it live at: http://demos.bavotasan.com/arturo/

By default, the posts appear in a single column underneath the slideshow. Let’s try to change that using the new arturo_columns() function. First let’s take a look at the function and its arguments:

$args = array(
	'width' => 'full', // 'full' or number
	'columns' => 1, // number
	'posts' => 1, // number
	'text' => 'excerpt', // 'excerpt' or 'content'
	'readmore' => 1, // boolean (1 = on, 0 = off)
	'category' => 'all', // 'all' or category ID
	'dates' => 1, // boolean (1 = on, 0 = off)
	'authors' => 1, // boolean (1 = on, 0 = off)
	'comments' => 1, // boolean (1 = on, 0 = off)
	'images' => 1, // boolean (1 = on, 0 = off)
	'img_w' => 100, // number
	'img_h' => 100, // number
	'img_align' => 'alignright', // 'alignleft', 'alignright', 'aligncenter' or 'alignnone'
	'margin_right' => '0', // number
	'offset' => '', // number
	'title' => '', // text header that appears above columns
	'id' => '', // text ID for div container
	'padding' => 15, // number
	'gap' => 30, // number
	'sticky' => 1, // boolean (1 = on, 0 = off)
	'masonry' => 0 // boolean (1 = on, 0 = off)
);
arturo_columns($args);

There are quite a few arguments but you really don’t need to set all of them since the defaults are sufficient for simple changes. The easiest mod would be to create two columns instead of one. Open up your Custom Actions editor and add this block of code:

remove_action('arturo_index_middle', 'arturo_loop');
add_action('arturo_index_middle', 'new_loop');
function new_loop() {
   $args = array(
		'columns' => 2,
		'posts' => 6
   );
   arturo_columns($args);
}

First we need to remove the current action arturo_loop and then add our new action new_loop to the arturo_index_middle hook. Now Arturo will look like this:

We could even take it a step further and include a single post displaying the full content above the two columns by adding this block of code:

remove_action('arturo_index_middle', 'arturo_loop');
add_action('arturo_index_middle', 'new_loop');
function new_loop() {
   global $paged;
   if(is_home() && $paged < 2) arturo_columns('columns=1&posts=1&img_align=alignleft&text=content');
   $args = array(
		'columns' => 2,
		'posts' => 6,
		'offset' => 1
   );
   arturo_columns($args);
}

That little conditional tag near the beginning of the new_loop() function will make sure that the single column first post only appears on the front page and not any subsequent page. Take at look at the site now:

We could even easily remove that slideshow to move our posts up with a simple additional line of code:

remove_action('arturo_index_top', 'arturo_index_top_slideshow');

remove_action('arturo_index_middle', 'arturo_loop');
add_action('arturo_index_middle', 'new_loop');
function new_loop() {
   global $paged;
   if(is_home() && $paged < 2) arturo_columns('columns=1&posts=1&img_align=alignleft&text=content');
   $args = array(
		'columns' => 2,
		'posts' => 6,
		'offset' => 1
   );
   arturo_columns($args);
}

Take a look at it now:

On top of all these modifications that you can create using the new arturo_columns() function, one of the coolest features is the ability to hook into David DeSandro’s jQuery Masonry plugin. All it takes is this:

remove_action('arturo_index_middle', 'arturo_loop');
add_action('arturo_index_middle', 'new_loop');
function new_loop() {
   $args = array(
		'width' => '600',
		'columns' => 2,
		'posts' => 6,
		'gap' => 30,
		'id' => 'masonry',
		'masonry' => 1
   );
   arturo_columns($args);
}

add_action("wp_footer", "add_masonry");
function add_masonry() {
	$twocol = (600 + 30) / 2; // (Width + Gap) / 2 
	echo "\n".'<script type="text/javascript" src="https://github.com/desandro/masonry/raw/master/jquery.masonry.min.js"></script>'."\n";
	echo '<script type="text/javascript">
(function($) {
	$(window).load(function(){
		$("#masonry").masonry({ columnWidth: 315, singleMode: true, itemSelector: ".post" });
	});
})(jQuery);
</script>
';
}

One thing to notice in the above code is that I hard coded some of the arguments. The width, gap and id need to be set in order to make sure the Masonry plugin aligns properly. And you need to make sure to use the following equation to determine the columnWidth var: (width + gap) / 2 = columnWidth

With the above code we now get this:

Each posts fits snugly beneath the other. That’s the power of David DeSandro’s jQuery Masonry plugin.

By playing around with the samples above you can really start to customize Arturo and see just how powerful it is. Stay tuned for more tutorials on some of the other new features in Arturo v1.0.1.