Creating a dynamic multi column grid based theme in Drupal 7

I think the topic that I am covering today in this article is very rare to find out on search engines and in any book because it is completely for those who are struggling to find out a solution so that they can develop a theme in Drupal 7 which manages its columns’ width and numbers according to the assigned content to the regions.

I searched on internet before finding the solution myself on internet using various keywords such as

• “How to manage a theme that decides its number of columns and width of them according to the assigned content to the regions”
• “Tips to develop a theme in Drupal that provides flexible column structure”
• “How to set content column to full width if no content in sidebars”

and many other phrases I tried but couldn’t find any useful information. Hope this would be helpful for someone.

What is a dynamic multi column grid based theme

For example if you have a theme with 2 columns (one is main_content for content and another is sidebar for blocks on right or left hand side) and if you don’t assign any content to the sidebar then main_content column will be expanded to full width and only 1 column will be displayed and if you have assigned content to the sidebar then two columns will be displayed and main_content column’s width will be smaller than the 1 column view right.

Please see the below given images.

2 columns view with the sidebar column on right hand side.

1 column view without the sidebar column on right hand side.

I actually put two images of different pages view above but they are being handled by one .tpl file.

I used only single .tpl.php file to manage both of the views in Drupal 7 and in total there are only two templates one for front page i.e. page—front.tpl.php and another is for inside pages i.e. page.tpl.php.

How to manage this type of column structure in a theme in Drupal

I hope you have basic understanding of theme development in Drupal. If not then you can read this link “Theme development in Drupal 7”.

You just need to create a template.php file and one page.tpl.php file. I will use theme_preprocess_page method to get the desired classes in my page.tpl.php file through some variables.

See the following code in your template.php file:

<?php           
    function yourtheme_preprocess_page(&$variables) {
       if($variables['page']['sidebar']) {
         $variables['sidebar_grid_class'] = 'col-md-4';
         $variables['main_grid_class'] = 'col-md-8';
  } else {
         $variables['main_grid_class'] = 'col-md-12'
  }
}

copy the above code and past in your template.php file. Please replace the “yourtheme” with the name of your theme.

Now do some changes in your page.tpl.php file too. Above function will check whether we have content in our sidebar or not. If we have some content in sidebar region then it will store appropriate classes in $sidebar_grid_class and $main_grid_class variables and if not then accordingly it sets another class.

Note: In above example I am using Bootstrap classes.

Please see the below given code for more help.

Summary:

You need to just use a theme_preprocess_page method with some region checking and variables values and directly print those variables using condition in your .tpl.php files.

Please leave your doubts and suggestions in comment.