Documentation /

Extending Builder Layouts & Blocks

Disabling Pre-Designed Layouts in the Builder

Themify Builder comes with a wide variety of pre-designed layouts that can speed up the process of designing pages on the frontend. However you may wish your clients to not have access to this feature in the Builder, just in case. If so, you can use this snippet of code to eliminate access to the pre-designed layouts:


<?php

add_filter( 'themify_builder_active_vars', function( $vars ) {
	unset( $vars['paths']['predesigned'] );

	return $vars;
} );

Similarly you can replace the predesigned layouts with your own, to do that:


<?php

add_filter( 'themify_builder_active_vars', function( $vars ) {
	$vars['paths']['predesigned'] = array(
		'title'=>__( 'Pre-designed', 'themify' ),
		/* URL to the file containing a list of layouts */
		'url' => 'https://themify.me/public-api/builder-layouts/index.json',
		/* URL to file containing Builder data for layout {SLUG} */
		'single' => 'https://themify.me/public-api/builder-layouts/{SLUG}.txt',
	);

	return $vars;
} );

And change the values for "url" and "single". The values above are the default used by Builder. You can download the "index.json" file from the above snippet, make it your own and then upload it to your own site. Note that for the "single" URL, the string "{SLUG}" is dynamically replaced with the slug of the selected layout user chooses to import.

Pre-Designed Rows

Themify Builder also offers "Pre-Designed rows", also called "Blocks", which you can mix & match to quickly put together the design you have in mind.
If you wish, you can supply your client with a custom list of pre-designed blocks. For that first download: "https://themify.me/public-api/predesigned-rows/index.json". This is the file Builder loads to display the Blocks list.

Public API

This is a JSON file where each member contains the following data:

  • id Something unique.
  • slug Must be unique. This is used later on when Builder wants to load this specific Block template.
  • title A name for this Block.
  • url URL to where the demo of this Block can be seen.
  • thumbnail URL to a thumbnail image.
  • category A comma-separated list of categories. Blocks that share the same categories will be displayed together.

Now to tell the Builder to load a custom version of this file: 


<?php

function custom_themify_builder_script_vars( $vars ) {
	$vars['paths']['rows_index'] = 'https://themify.me/public-api/predesigned-rows/index.json';
	$vars['paths']['row_template'] = 'https://themify.me/public-api/predesigned-rows/{SLUG}.txt';

	return $vars;
}
add_filter( 'themify_builder_active_vars', 'custom_themify_builder_script_vars' );

Of course, you must update the URLs in the snippet.

Note the second line ("row_template"), that tells Builder where to load a Block when user selects one. So for example, if a user decides to use the "E-commerce - Hero Banner" block (the first item in above screenshot), the Builder will attempt to load the template from this URL: "https://themify.me/public-api/predesigned-rows/e-commerce-hero-banner.txt".