Adding, Editing and Removing Layout Grids

BizzThemes Grid Structure Explained

As you are using BizzThemes for building custom websites, there is usually a need to change the default layout of the web site. For instance, you want to include another area above logo, where you want to display your ads. Even better, you want to split this area in two and have two banners in it. Or, even better, you want to split right area in three pieces, but leave left half intact. Now, that would be virtually impossible with most WordPress themes currently available, but our framework allows you to do just that.

So, what’s the BizzThemes grid layout structure anyway? Any web site can be splitted into sections:

• you’ll find a header area on the top of the page (usually that’s the location of the navigation menu, logo, etc.),
• there’s the main area where the page content is (usually the middle of the page) and
• you’ll find a footer on the bottom.

Every section needs to have a defined grid. A grid is the division of a section that forms blocks and provides a basic structure for organizing elements on your site. The BizzThemes framework allows you to define your sections and their grid structure (blocks) programatically – the defined blocks automatically convert into WordPress widget areas. This means that you can simply drag’n’drop widgets in Bizz Template Builder to the blocks and easily create your web site.

A picture is worth more than 1000 words, so let’s take a look at the example – Pure Magazine Theme.

The header of Pure Magazine looks like this:
As you can see, there’s a section called header_area in the Pure Magazine theme and this section has 2 blocks (in the header they’re placed next to each other as columns): header_one on the left side and header_two on the right side.

The theme’s original layout is defined in the custom/lib_theme/theme_widgets.php file and the code to define the header is this:

bizz_register_grids(array(
	'id' => 'header_area', /* id of the DIV element of the section */
	'name' => __('Header Area', 'bizzthemes'), /* name of the section */
	'container' => 'container_24', /* class of the inner DIV container () */
	'show' => 'true', /* whether the section is enabled or disabled (true=enabled, false=disabled) */
	'grids' => array( /* definition of blocks (array): */
		'header_one' => array( /* key is the block name */
			'name' => __('Header One', 'bizzthemes'),
			'class' => 'grid_18a',  /* this is a CSS class of the block DIV */
			'before_grid' => '', /* HTML code that's inserted before the element */
			'after_grid' => '', /* HTML code that's inserted after the element */
			'tree' => '' /*child block if exists */
		),
		'header_two' => array(
			'name' => __('Header Two', 'bizzthemes'),
			'class' => 'grid_6a last',
			'before_grid' => '',
			'after_grid' => '',
			'tree' => '' /*child block if exists */
		)
	)
));

As you can see, a section is defined by calling bizz_register_grids function and passing an array with the grid definition to it.

The code is very self-explanatory. A header section has an ID ('id' => 'header_area'), a name ('name' => __('Header Area', 'bizzthemes')), a CSS class ('container' => 'container_24') and a definition of blocks ('grids' => array ( ...). The grid parameter is an array and includes two blocks: header_one and header_two. Each block has its ID, name, class and optional child blocks (tree).

Let’s look how the header looks in the Theme Builder and how we can set the elements in the section:

As you can see, the header area has 2 blocks (exactly like we defined them): you have an Ad space widget, a logo underneath and a  navigation menu in the »Header One« block and a single Ad space widget in the »Header Two« block. Now you can simply add the widgets into the blocks, move them out or change their display order simply by dragging and dropping them with your mouse.

Hopefully you’ve realized the flexibility of the BizzThemes Framework for building custom web sites. After you’ve correctly defined the grids it’s very simple to modify the site elements. You can use any BizzThemes theme and make virtually any kind of web site out of it – the theme design and layout is not locked (as it’s usual with the other premium WordPress themes). Only the sky and your imagination is the limit.

Let’s take a look at the details; how to add, remove or modify the sections.

How to Create and Modify the Sections (Grid Structure)?

Now you already know that the original grid structure is defined in the lib_theme/theme_widgets.php file. However, you shouldn’t modify this file directly. This file is a core theme file and is overwritten every time you update the theme. So, once again, since this is very important: If you modified this file the changes you make would be eventually lost (with the theme update).

The correct way to modify/customize the theme is to use the files in the /custom folder. You’ll find (among others) the file custom_functions.php there – this file can be used to modify/add your own sections, modify theme hooks, etc.

Adding new custom section (even with tree structure):

1. Open custom/custom_functions.php
2. Define grid structure with bizz_register_grids function. Let’s say you want to have a new Custom area section with 2 blocks – first block will ocuppy 3/4 of the full width, and the second will take 1/4 of the full width:

   bizz_register_grids(array(
   	'id' => 'custom_area',
   	'name' => 'Custom Area',
   	'container' => 'container_24' , /* full width is 24 columns */
   	'show' => 'true',
   	'grids' => array(
   			'custom_wide' => array(
   				'name' => 'Custom Wide',
   				'class' => 'grid_18', /* 3 of full width (full width -> 24 columns, 3 width -> 18 columns) */
   				'before_grid' => '',
   				'after_grid' => '',
   				'tree' => ''
   			),
   			'custom_narrow' => array(
   				'name' => 'Custom Narrow',
   				'class' => 'grid_6', /* 1/4 of full width (full width -> 24 columns, 1/4 width -> 6 columns) */
   				'before_grid' => '',
   				'after_grid' => '',
   				'tree' => ''
   			)
   	)
   ));

Removing existing section:

1. Open custom/custom_functions.php
2. Remove grid structure with bizz_unregister_grids function. Simply call the function with the grid ID. You want to remove header area? No problem:

   bizz_unregister_grids( 'header_area' );

Editing existing section (custom CSS classes, grids and names):

1. Open custom/custom_functions.php
2. Redefine existing grid with your own grid structure:

bizz_replace_grids( 'header_area', array( # replace "header_area" with grid ID you want to replace
	'id' => 'header_area',
	'name' => 'Header Area',
	'container' => 'container_24',
	'show' => 'true',
	'grids' => array(
			'header_wide' => array(
				'name' => 'Header Wide',
				'class' => 'grid_8', // was grid_9
				'before_grid' => '',
				'after_grid' => '',
				'tree' => ''
			),
			'header_narrow' => array(
				'name' => 'Header Narrow',
				'class' => 'grid_8', // was grid_3
				'before_grid' => '',
				'after_grid' => '',
				'tree' => ''
			)
	)
));

This works with Framework version 7.8.7 and above.