New methods for adding custom elements to Layout Builder?

[Israel Curtis]

So it seems the old public functions for adding your own custom builder elements are no more:

http://dev.themeblvd.com/tutorial/add-remove-builder-elements/

Those functions don’t exist in the latest layout builder plugin. So I poked around and attempted to manually use add_element() on the instance of the Theme_Blvd_Builder_API, and even tried the “themeblvd_get_elements” filter, adding my own element data array just like the others in the API. Nothing resulted in my element being shown in the dropdown of available elements…

Any hints on how to inject custom elements with the latest API?

Topic

[Jason Bobich]

Hi,

There’s no new method. The function themeblvd_add_builder_element has always existed within the theme framework, and still does. The reason for this is so that if you disable the Layout Builder plugin, and you were using the function in your child theme, everything doesn’t break.

But while the old usage instructions will still work (as a fallback), it’s suggested that you now pass all arguments in as an array like:

/**
 * Add element
 */
$options = array(
    'option_1'  => array(
        // ...
    ),
    'option_2'  => array(
        // ...
    )
);

$args = array(
    'id'		=> 'my-element',
    'name'		=> 'My Element',
    'options'	=> $options,
    'callback'	=> 'my_element_display'
);

themeblvd_add_builder_element( $args );

/**
 * Element callback function
 */
function my_element_display( $id, $options, $location ) {
    // ...
}

… but that’s the only difference. See /framework/api/helpers.php in the theme.

[Israel Curtis]

hmmm.. when I attempted to make use of themeblvd_add_builder_element(), I couldn’t avoid getting this “undefined” error, even when calling it in a “after_setup_theme” hook. If i’m not using this in a child theme, but in a companion plugin, what’s the proper way to ensure the function exists before I call it?

[Mon Feb 09 01:40:36 2015] [error] PHP Fatal error: Call to undefined function themeblvd_add_builder_element() in /nas/wp/www/cluster-1098/liturgical/wp-content/plugins/liturgical-config.php on line 622

[Israel Curtis]

alright, no clue what I’m doing differently now, but it does seem that if I make sure to call themeblvd_add_builder_element() in a “after_setup_theme” hook, it’s not throwing an undefined error 😛 And I do have the custom element appearing in the layout builder, and I can add it to the layout. But I still can’t seem to get the element to render output when displaying the layout on a page. I’ve got a callback function, and it’s pretty much what’s in the tutorial, but no matter what I have echoed in that callback, it doesn’t appear on the page.

add_action('after_setup_theme', 'foo');
function foo() {
	$options = array(
    array(
        'name'      => 'Title',
        'desc'      => 'Enter in your title.',
        'id'        => 'title',
        'type'      => 'text'
    ),
    array(
        'name'      => 'Content',
        'desc'      => 'Enter in your content.',
        'id'        => 'content',
        'type'      => 'textarea'
    )
	);
	$args = array(
	    'id'		=> 'profile_box',
	    'name'		=> 'Profile Box',
	    'options'	=> $options,
	    'callback'	=> 'my_profile_box'
	);
	themeblvd_add_builder_element($args);
}

function my_profile_box( $id, $options, $location ) {
	echo "<h3>{$options['title']}</h3>";
	echo "<p>{$options['content']}</p>";
        echo "here's my output!!";
}

[mizzinc]

Yes , also interested in resolving this.

[Jason Bobich]

All right guys, I’ve got this figured out. It requires a fix in the theme. I’ve got it added, but if you want to manually put the fix in yourself, here’s how.

In the theme, open up /framework/includes/layout.php, and you’re going to be adding to towards the bottom of the themeblvd_element() function.

Around line 407, you should see // Close Element. Just before this, add the following:

// Custom Element
do_action( 'themeblvd_'.$args['type'], $args['id'], $args['options'] );

… So you’ve got something like this:

// Custom Element
do_action( 'themeblvd_'.$args['type'], $args['id'], $args['options'] );

// Close element
do_action( 'themeblvd_element_'.$args['type'].'_bottom', $args['id'], $args['options'], $args['section'], $args['display'], $args['context'] );
// ...

=====

A couple of other notes:

1) Your callback should now only have two arguments because there’s no $location parameter any more. (this was the featured, main, featured below)

function my_profile_box( $id, $options ) {

2) If you’re doing this in a plugin and hooking to after_setup_theme, I’d suggest doing something to check if the function exists. Having it setup the way you’re doing it means that if you ever disable the theme for debugging, or some other reason, you’ll get a PHP error.

There are tons of ways you could obviously do this, here’s one way:

add_action('after_setup_theme', 'foo');
function foo() {
	if ( ! defined('TB_FRAMEWORK_VERSION') ) {
		return;
	}

	// ...

}

[Israel Curtis]

Works great! This is an incredibly useful ability, as even with the multitude of framework hooks, it was rather clunky to insert custom content modules within the flow of a layout builder template (could only hook the start or end of a section, then match the ID to tell if it was the right place for a module). Now I can quickly drop my custom content boxes wherever I need them, and they work just like every other element. Love it.

[Israel Curtis]

Just one more small request — the custom builder elements are being added to the end of the dropdown list, instead of being included alphabetically. With a long list, it can be a little confusing when it seems sorted but it isn’t quite…

[Author]

Replies