Creating Blocks & Layouts

WP Page Builder supports third-party blocks and layouts. It is very easy to add a custom block or layout via a plugin or theme.

Adding a Custom Block

Firstly, you need to create a block using WP Page Builder and export it. Secondly, add this via wppb_add_block filter.

function prefix_add_block_callback( $blocks ){
	$blocks[] = array(
		'name' => 'Name of the Blocks', // Name of the Block
		'file' => plugin_dir_path( __FILE__ ).'test.json', // JSON export file directory path
		'banner' => 'https://builder.themeum.com/wp-content/uploads/2018/07/Content-1.png', // Banner Image URL
		'section' => 'Section Name', // Section Name
		'liveurl' => 'https://builder.themeum.com/call-to-action-item-1/' //
	);
	return $blocks;
}
add_filter('wppb_add_block', 'prefix_add_block_callback');

Note: All the fields are required except liveurl.

Adding a Custom Layout

Firstly, you need to create a layout using WP Page Builder and export it. Secondly, add this via wppb_add_layout filter.

function prefix_add_layout_callback( $layouts ){
	$layouts[] = array(
		'name' => 'Example', // Name of the Layput
		'category' => array( 'Category Name', 'Creative' ), // Category Must be Array and 
		'preview2x' => 'https://builder.themeum.com/wp-content/uploads/2018/07/Content-1.png', // Preview in Listing 2x
		'preview' => 'https://builder.themeum.com/wp-content/uploads/2018/07/Pricing-table-1.png', // Preview in Listing
		'single' => array(
				array(
					'name' => 'EHome', // Name of the Inner Layout
					'preview' => 'https://builder.themeum.com/wp-content/uploads/2018/07/Content-1.png', // Preview in Inner
					'preview2x' => 'https://builder.themeum.com/wp-content/uploads/2018/07/Pricing-table-1.png', // Preview in Inner 2x
					'file' => plugin_dir_path( __FILE__ ).'template1.json', // File path of the Export JSON
					'liveurl' => 'https://builder.themeum.com/agency-home/'
				),
				array(
					'name' => 'EAbout',
					'preview' => 'https://builder.themeum.com/wp-content/uploads/2018/07/Content-1.png',
					'preview2x' => 'https://builder.themeum.com/wp-content/uploads/2018/07/Pricing-table-1.png',
					'file' => plugin_dir_path( __FILE__ ).'template2.json',
					'liveurl' => 'https://builder.themeum.com/agency-home/'
				)
		)
	);
	return $layouts;
}
add_filter('wppb_add_layout', 'prefix_add_layout_callback');

Note: All the fields are required except liveurl.

Was this helpful?