Building a Flexible Multi-column Joomla! 3.2 Template

02.22.2014

We once took over a Joomla! site for a client that had three different custom templates to handle varying multi-column layouts.

Three different templates.

Granted, this was back in the Joomla! 1.5 days. I'm hopeful that this isn't a common practice in the new shiny Joomla! 3.2 world. If you're not sure how to set up a flexible multi-column template, you've come to the right blog post! I'll show you how in a custom Joomla! template.

countModules

countModules is the magical method that will help us achieve flexibility within our template.

Let's start with the simplest of templates:

  • Three columns
  • Two modules
    • left
    • right

We use countModules to—wait for it—count the modules assigned to a specific position. For this particular template, we'll have three (3) different layouts depending on which modules are enabled for the page.

Step One: Count the modules

Here's how we count the modules (stick this somewhere before your HTML in the index.php file of your template):

$left	= $this->countModules('left');
$right	= $this->countModules('right');

The 'left' and 'right' within the countModules(); represents the module position.

Step Two: Add conditional statements

Now that we have the number of modules for each position, we can place a PHP conditional statement around the left and right columns:

<!-- This is the left column containing the 'left' module position include -->
<?php if( isset($left) && $left > 0 ){ ?>
	<div id="left-column">
		<jdoc:include type="modules" name="left" style="none" />
	</div>
<?php } ?>

<!-- This is the middle column that contains the component include -->
<div id="middle-column">
	<jdoc:include type="component" />
</div>

<!-- This is the right column containing the 'right' module position include -->
<?php if( isset($right) && $right > 0 ){ ?>
	<div id="right-column">
		<jdoc:include type="modules" name="right" style="none" />
	</div>
<?php } ?>

Step Three: Add classes to columns

We're not done yet, though. To truly make this template flexible, we have to adjust the sizes of the columns based on which columns are present.

There are several ways to do this, but let's go over a typical use case for us—adding a class to each column:

//We can place this somewhere above the HTML in your index.php file

//Let's start with the case where we have BOTH left and right columns
if( isset($left) && isset($right) && $left > 0 && $right > 0 )
{

	$columnClass = 'three-columns';

}

//Now let's set the class if we only have one of the non-middle columns
elseif( (isset($left) && $left > 0) || (isset($right) && $right > 0) )
{

	$columnClass = 'two-columns';

}

//If we don't have any non-middle columns, we'll still need a class.
else
{

	$columnClass = 'one-column';

}
<!-- This is the left column containing the 'left' module position -->
<?php if( isset($left) && $left > 0 ){ ?>
	<div id="left-column" class="<?php echo $columnClass; ?>">
		<jdoc:include type="modules" name="left" style="none" />
	</div>
<?php } ?>

<!-- This is the middle column that contains the component -->
<div id="middle-column" class="<?php echo $columnClass; ?>">
	<jdoc:include type="component" />
</div>

<!-- This is the right column containing the 'right' module position -->
<?php if( isset($right) && $right > 0 ){ ?>
	<div id="right-column" class="<?php echo $columnClass; ?>">
		<jdoc:include type="modules" name="right" style="none" />
	</div>
<?php } ?>

Step Four: Add some CSS

Almost there! All we have to do now is setup some CSS to adjust the columns' widths at different layouts:

#left-column{float:left}
	#left-column.three-columns{width:25%}
	#left-column.two-columns{width:40%}

#middle-column{float:left}
	#middle-column.three-columns{width:50%}
	#middle-column.two-columns{width:60%}
	#middle-column.one-column{width:100%}
	
#right-column{float:left}
	#right-column.three-columns{width:25%}
	#right-column.two-columns{width:40%}

Notice the varying sizes? You can play around with this, of course, to fit the need of your design.

Also, if you're using Bootstrap 3, you can replace the $columnClass names with Bootstrap column classes (col-md-4, col-lg-4, etc.).

Happy Joomla!-ing!