Hooks/Action Reference/builder module render


This action hook is run by the builder_layout_engine_render_modules action and calls the module-specific rendering action, builder_module_render_MODULE, based upon the $fields['module'] value which contains the current module variable.

Possible Uses

This action is useful if every module on the site is to be modified in the same way. Using this action to add elements before and after each module will be its most common use. It could also be used to override the default action of calling the module-specific rendering process, thus allowing custom modules to be used in specific situations.

Default Attached Functions


(array) (required) Contains data necessary to render a module.
Default: None

Example Use

This example is the same as the one given for builder_module_render_MODULE with the exception of it now will apply the rounded corners to all modules rather than just the Image module.

This example shows how to implement the CSS Liquid Round Corners technique on all modules. A zip file for an extension that includes the code, images, and styling needed to fully implement this concept is below, but first, here is how the action was used to implement this example:

add_action( 'builder_module_filter_widths', 'filter_module_widths' );
add_action( 'builder_module_render', 'open_module_border', 0 );
add_action( 'builder_module_render', 'close_module_border', 20 );

// Sorry about the z-index nastiness. It fixes an IE7 and IE8 bug.
global $z_index_count;
$z_index_count = 999;

function filter_module_widths( $fields ) { 
    $fields['widths']['container_width'] -= 50; 
    $fields['widths']['content_width'] -= 50; 
    return $fields;

function open_module_border( $fields ) { 
    global $z_index_count;

function close_module_border( $fields ) { 

Note that the builder_module_filter_widths action is also used in order to shrink the module size down. This is to allow the styling to pad the module inside the rounded corners box.

The key to getting the opening and closing elements in the right place is by using the 0 and 20 inside the add_action function calls. For more details on how this works, read the priorities page.

Since this type of solution uses solid images, HTML structure, and CSS, it is cross-browser compatible and doesn't require JavaScript. However, it will not adapt to just any style. If a different background color or rounded corner box colors are wanted, the images will need to be recolored by hand in a image editor.

Download the example extension

Other rounded corner solutions may better fit your project. This solution was used since it is popular and has the most flexibility since the size of the box is not limited in either dimension. The goal of this example is to show how Builder is flexible enough to allow for any type of solution while showing how such a solution can be implemented.

Have more questions? Submit a request