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

function custom_themify_builder_layout_providers( $providers ) {
	$key = array_search ( 'Themify_Builder_Layouts_Provider_Pre_Designed', $providers );
	unset( $providers[ $key ] );

	return $providers;
}
add_filter( 'themify_builder_layout_providers', 'custom_themify_builder_layout_providers' );

Adding Pre-Made Layouts to the Builder

You can create custom layouts and add them to your theme. These will be available in the Load Layout dialog box in their own tab and can be used just like other layouts. Several Themify themes such as the Ultra, Shoppe, and Fullpane use this feature so that demo pages made with that theme can be easily accessed and re-used.

Predesigned Layout

To use this feature:

  1. Export the page(s) you want to re-use as a .zip file, see here: https://themify.me/docs/builder#import-export
  2. Create a folder named "builder-layouts" in your theme's root directory. For example if you're using Themify's Ultra theme, that folder would be: "wp-content/themes/themify-ultra/builder-layouts".
  3. Copy the .zip files (exported pages) to that folder.
  4. Create a file named "layouts.php" in that directory.
  5. In layouts.php file add:
  6. 
    <?php
    
    return array(
    	array(
    		"title" => "Home",
    		"data"  => "home.zip",
    		"thumb" => get_template_directory_uri() . '/builder-layouts/home.jpg',
    	),
    );
    

    Basically, the file should return an array, where each item is itself an array describing one layout:

    • title Layout name
    • thumb URL to an image thumbnail
    • data Name of the .zip file that contains the Builder data. This file should be placed in the "builder-layouts" folder that was created in step 2.

    In the above example, we're adding 1 layout, titled "Home".

That's it. Your folder structure should look like this:

Folder Location

Adding Custom Layouts From External Sources

You can also add custom layouts however you desire by extending the "Themify_Builder_Layouts_Provider" base class. The Themify Popup plugin for example uses this feature to add sample popup layouts to Builder's layouts list. See the example below:


<?php

function custom_add_sample_themify_layouts( $providers ) {

	class Themify_Builder_Layouts_Provider_Custom extends Themify_Builder_Layouts_Provider {

		public function get_id() {
			return 'custom';
		}

		public function get_label() {
			return __( 'Custom', 'themify' );
		}

		/**
		 * List of layouts
		 *
		 * @return array
		 */
		public function get_layouts() {}

		/**
		 * Get the Builder data for a given $slug
		 *
		 * @return array|WP_Error
		 */
		public function get_builder_data( $slug ) {}
	}

	$providers[] = 'Themify_Builder_Layouts_Provider_Custom';
	return $providers;
}
add_filter( 'themify_builder_layout_providers', 'custom_add_sample_themify_layouts' );

In your extended "Themify_Builder_Layouts_Provider" class you need these four methods:

  • get_id Something unique.
  • get_label Returns the label, this shows up in the Load Layout dialog as a separate tab.
  • get_layouts Should return a formatted array of layouts list. See previous section on how this should be formatted.
  • get_builder_data Should return the Builder data for a given layout name ("slug").

Note that above snippet is sudo-code, you have to update the methods to provide the required data. Checkout the Popup plugin to see an example on how to achieve this.

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_ajax_front_vars', 'custom_themify_builder_script_vars' );
add_filter( 'themify_builder_ajax_admin_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".

The New Global Style Feature is Here! We're celebrating with 20% off everything. Use coupon: GLOBAL20